Cara Merubah Link Credit G Vusion 2

Template G Vusion 2 Karya (ARLINA Design)....
disini saya akan berbagi cara untuk Merubah Link Credit G Vusion 2.
Caranya :

1. Download Template G Vusion 2
2. Extract File
3. Buka File Klik Folder Template >> Buka template Menggunakan Notepad / Wordpad.
4. Cari Code Seperti Ini : \x6A\x51\x75\x65\x72\x79","\x75\x73\x65\x20\x73\x74\x72\x69\x63\x74","\x69\x6E\x69\x74","\x63\x75\x72\x72\x65\x6E\x74\x5F\x74\x61\x62","\x6F\x70\x74\x69\x6F\x6E\x73","\x74\x61\x62\x73","\x24\x65\x6C\x65\x6D\x65\x6E\x74","\x65\x6C\x65\x6D\x65\x6E\x74","\x63\x68\x69\x6C\x64\x72\x65\x6E","\x64\x65\x66\x61\x75\x6C\x74\x73","\x6D\x74\x61\x62\x73","\x66\x6E","\x65\x78\x74\x65\x6E\x64","\x70\x72\x6F\x74\x6F\x74\x79\x70\x65","\x6C\x65\x6E\x67\x74\x68","\x62\x75\x69\x6C\x64\x54\x61\x62\x4D\x65\x6E\x75","\x62\x75\x69\x6C\x64","\x74\x61\x62\x5F\x74\x65\x78\x74\x5F\x65\x6C","\x63\x6F\x6E\x74\x61\x69\x6E\x65\x72\x5F\x63\x6C\x61\x73\x73","\x6F\x6E\x52\x65\x61\x64\x79","\x69\x73\x46\x75\x6E\x63\x74\x69\x6F\x6E","\x70\x75\x73\x68","\x74\x61\x62\x5F\x6E\x61\x6D\x65\x73","\x74\x65\x78\x74","\x68\x69\x64\x65","\x3A\x66\x69\x72\x73\x74","\x66\x69\x6C\x74\x65\x72","\x66\x69\x6E\x64","\x65\x61\x63\x68","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22","\x74\x61\x62\x73\x5F\x63\x6F\x6E\x74\x61\x69\x6E\x65\x72\x5F\x63\x6C\x61\x73\x73","\x22\x20\x2F\x3E","\x77\x72\x61\x70\x41\x6C\x6C","\x24\x77\x72\x61\x70\x70\x65\x72","\x2E","\x77\x72\x61\x70\x49\x6E\x6E\x65\x72","\x63\x61\x6C\x6C","\x74\x61\x62\x73\x6D\x65\x6E\x75\x5F\x65\x6C","\x3C","\x20\x63\x6C\x61\x73\x73\x3D\x22","\x74\x61\x62\x73\x6D\x65\x6E\x75\x5F\x63\x6C\x61\x73\x73","\x22\x3E","","\x72\x65\x70\x6C\x61\x63\x65","\x74\x61\x62\x73\x6D\x65\x6E\x75\x5F\x74\x61\x62","\x74\x6D\x70\x6C","\x63\x6C\x69\x63\x6B","\x74\x72\x69\x67\x67\x65\x72","\x69\x6E\x64\x65\x78","\x70\x72\x65\x76\x65\x6E\x74\x44\x65\x66\x61\x75\x6C\x74","\x73\x68\x6F\x77","\x6F\x6E","\x24\x74\x61\x62\x73\x5F\x6D\x65\x6E\x75","\x3C\x2F","\x3E","\x70\x72\x65\x70\x65\x6E\x64\x54\x6F","\x74\x6F\x4C\x6F\x77\x65\x72\x43\x61\x73\x65","\x6E\x6F\x64\x65\x4E\x61\x6D\x65","\x61\x63\x74\x69\x76\x65\x5F\x74\x61\x62\x5F\x63\x6C\x61\x73\x73","\x6F\x6E\x54\x61\x62\x53\x65\x6C\x65\x63\x74","\x61\x64\x64\x43\x6C\x61\x73\x73","\x3A\x65\x71\x28","\x29","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x72\x65\x6D\x6F\x76\x65\x44\x61\x74\x61","\x73\x74\x79\x6C\x65","\x72\x65\x6D\x6F\x76\x65\x41\x74\x74\x72","\x75\x6E\x77\x72\x61\x70","\x72\x65\x6D\x6F\x76\x65","\x64\x61\x74\x61","\x6F\x62\x6A\x65\x63\x74","\x73\x74\x72\x69\x6E\x67","\x74\x61\x62\x73\x2D\x63\x6F\x6E\x74\x65\x6E\x74","\x61\x63\x74\x69\x76\x65\x2D\x74\x61\x62","\x68\x31\x2C\x20\x68\x32\x2C\x20\x68\x33\x2C\x20\x68\x34\x2C\x20\x68\x35\x2C\x20\x68\x36","\x74\x61\x62\x73\x2D\x6D\x65\x6E\x75","\x75\x6C","\x3C\x6C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x74\x61\x62\x2D\x7B\x30\x7D\x22\x3E\x3C\x73\x70\x61\x6E\x3E\x7B\x31\x7D\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x6C\x69\x3E","\x43\x72\x65\x61\x74\x65\x64\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x61\x72\x6C\x69\x6E\x61\x64\x65\x73\x69\x67\x6E\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x22\x3E\x41\x72\x6C\x69\x6E\x61\x20\x44\x65\x73\x69\x67\x6E\x3C\x2F\x61\x3E","\x68\x74\x6D\x6C","\x23\x63\x70\x72\x69\x67\x68\x74","\x23\x63\x70\x72\x69\x67\x68\x74\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x3A\x2F\x2F\x61\x72\x6C\x69\x6E\x61\x64\x65\x73\x69\x67\x6E\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D","\x72\x65\x61\x64\x79
5. Lalu Anda Copy dan pastekan di DDECODE >> selanjutnya klik decode
6. Maka Akan Terlihat Sebagai Berikut : jQuery","use strict","init","current_tab","options","tabs","$element","element","children","defaults","mtabs","fn","extend","prototype","length","buildTabMenu","build","tab_text_el","container_class","onReady","isFunction","push","tab_names","text","hide",":first","filter","find","each","<div class="","tabs_container_class","" />","wrapAll","$wrapper",".","wrapInner","call","tabsmenu_el","<"," class="","tabsmenu_class","">","","replace","tabsmenu_tab","tmpl","click","trigger","index","preventDefault","show","on","$tabs_menu","</",">","prependTo","toLowerCase","nodeName","active_tab_class","onTabSelect","addClass",":eq(",")","removeClass","removeData","style","removeAttr","unwrap","remove","data","object","string","tabs-content","active-tab","h1, h2, h3, h4, h5, h6","tabs-menu","ul","<li class="tab-{0}"><span>{1}</span></li>","Created by <a href="http://arlinadesign.blogspot.com">Arlina Design</a>","html","#cpright","#cpright:visible","href","location","http://arlinadesign.blogspot.com","ready
7. Ini Belum selesai Kemudian anda kunjungi Rapidtables
   
8. Ganti code yang di warnai biru dengan link blog anda dan nama anda
9. copy pastekan *jangan lupa kash code di depannya \x
10. klik Convert
11. lalu ganti code pertama dengan hasil convert
12. cari /find kembali : https://cdn.rawgit.com/Arlina-Design/redvision/master/view-image.js dan https://cdn.rawgit.com/Arlina-Design/redvision/master/flexscroll.js terdapat kode juga didalamnya anda gantisaja seperti cara yang di atas kemudian save dengan .js kemudian upload di yourjavascrip atau google drive.
13. jika sudah ganti link credit dengan blog anda dan nama anda . simpan lalu upload template tersebut di blog anda

Semoga dapat dimengerti dengan seksama...
jika ada yang tidak jelas. coment di bawah 

TERIMAKASIH

Cara Merubah Link Credit Minima Colored 2.1

Template Minima Colored 2.1 Karya (ARLINA Design)....
disini saya akan berbagi cara untuk Merubah Link Credit Minima Colored 2.1.
Caranya :

1. Download Template Minima Colored 2.1
2. Extract File
3. Buka File Klik Folder Template >> Buka template Menggunakan Notepad / Wordpad.
4. Cari Code seperti : \x6A\x51\x75\x65\x72\x79","\x75\x73\x65\x20\x73\x74\x72\x69\x63\x74","\x69\x6E\x69\x74","\x63\x75\x72\x72\x65\x6E\x74\x5F\x74\x61\x62","\x6F\x70\x74\x69\x6F\x6E\x73","\x74\x61\x62\x73","\x24\x65\x6C\x65\x6D\x65\x6E\x74","\x65\x6C\x65\x6D\x65\x6E\x74","\x63\x68\x69\x6C\x64\x72\x65\x6E","\x64\x65\x66\x61\x75\x6C\x74\x73","\x6D\x74\x61\x62\x73","\x66\x6E","\x65\x78\x74\x65\x6E\x64","\x70\x72\x6F\x74\x6F\x74\x79\x70\x65","\x6C\x65\x6E\x67\x74\x68","\x62\x75\x69\x6C\x64\x54\x61\x62\x4D\x65\x6E\x75","\x62\x75\x69\x6C\x64","\x74\x61\x62\x5F\x74\x65\x78\x74\x5F\x65\x6C","\x63\x6F\x6E\x74\x61\x69\x6E\x65\x72\x5F\x63\x6C\x61\x73\x73","\x6F\x6E\x52\x65\x61\x64\x79","\x69\x73\x46\x75\x6E\x63\x74\x69\x6F\x6E","\x70\x75\x73\x68","\x74\x61\x62\x5F\x6E\x61\x6D\x65\x73","\x74\x65\x78\x74","\x68\x69\x64\x65","\x3A\x66\x69\x72\x73\x74","\x66\x69\x6C\x74\x65\x72","\x66\x69\x6E\x64","\x65\x61\x63\x68","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22","\x74\x61\x62\x73\x5F\x63\x6F\x6E\x74\x61\x69\x6E\x65\x72\x5F\x63\x6C\x61\x73\x73","\x22\x20\x2F\x3E","\x77\x72\x61\x70\x41\x6C\x6C","\x24\x77\x72\x61\x70\x70\x65\x72","\x2E","\x77\x72\x61\x70\x49\x6E\x6E\x65\x72","\x63\x61\x6C\x6C","\x74\x61\x62\x73\x6D\x65\x6E\x75\x5F\x65\x6C","\x3C","\x20\x63\x6C\x61\x73\x73\x3D\x22","\x74\x61\x62\x73\x6D\x65\x6E\x75\x5F\x63\x6C\x61\x73\x73","\x22\x3E","","\x72\x65\x70\x6C\x61\x63\x65","\x74\x61\x62\x73\x6D\x65\x6E\x75\x5F\x74\x61\x62","\x74\x6D\x70\x6C","\x63\x6C\x69\x63\x6B","\x74\x72\x69\x67\x67\x65\x72","\x69\x6E\x64\x65\x78","\x70\x72\x65\x76\x65\x6E\x74\x44\x65\x66\x61\x75\x6C\x74","\x73\x68\x6F\x77","\x6F\x6E","\x24\x74\x61\x62\x73\x5F\x6D\x65\x6E\x75","\x3C\x2F","\x3E","\x70\x72\x65\x70\x65\x6E\x64\x54\x6F","\x74\x6F\x4C\x6F\x77\x65\x72\x43\x61\x73\x65","\x6E\x6F\x64\x65\x4E\x61\x6D\x65","\x61\x63\x74\x69\x76\x65\x5F\x74\x61\x62\x5F\x63\x6C\x61\x73\x73","\x6F\x6E\x54\x61\x62\x53\x65\x6C\x65\x63\x74","\x61\x64\x64\x43\x6C\x61\x73\x73","\x3A\x65\x71\x28","\x29","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x72\x65\x6D\x6F\x76\x65\x44\x61\x74\x61","\x73\x74\x79\x6C\x65","\x72\x65\x6D\x6F\x76\x65\x41\x74\x74\x72","\x75\x6E\x77\x72\x61\x70","\x72\x65\x6D\x6F\x76\x65","\x64\x61\x74\x61","\x6F\x62\x6A\x65\x63\x74","\x73\x74\x72\x69\x6E\x67","\x74\x61\x62\x73\x2D\x63\x6F\x6E\x74\x65\x6E\x74","\x61\x63\x74\x69\x76\x65\x2D\x74\x61\x62","\x68\x31\x2C\x20\x68\x32\x2C\x20\x68\x33\x2C\x20\x68\x34\x2C\x20\x68\x35\x2C\x20\x68\x36","\x74\x61\x62\x73\x2D\x6D\x65\x6E\x75","\x75\x6C","\x3C\x6C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x74\x61\x62\x2D\x7B\x30\x7D\x22\x3E\x3C\x73\x70\x61\x6E\x3E\x7B\x31\x7D\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x6C\x69\x3E","\x43\x72\x65\x61\x74\x65\x64\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x61\x72\x6C\x69\x6E\x61\x64\x65\x73\x69\x67\x6E\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x22\x3E\x41\x72\x6C\x69\x6E\x61\x20\x44\x65\x73\x69\x67\x6E\x3C\x2F\x61\x3E","\x68\x74\x6D\x6C","\x23\x63\x70\x72\x69\x67\x68\x74","\x23\x63\x70\x72\x69\x67\x68\x74\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x3A\x2F\x2F\x61\x72\x6C\x69\x6E\x61\x64\x65\x73\x69\x67\x6E\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D","\x72\x65\x61\x64\x79"
5. Lalu Anda Copy dan pastekan di DDECODE >> selanjutnya klik decode
6. maka akan terlihat : jQuery","use strict","init","current_tab","options","tabs","$element","element","children","defaults","mtabs","fn","extend","prototype","length","buildTabMenu","build","tab_text_el","container_class","onReady","isFunction","push","tab_names","text","hide",":first","filter","find","each","<div class="","tabs_container_class","" />","wrapAll","$wrapper",".","wrapInner","call","tabsmenu_el","<"," class="","tabsmenu_class","">","","replace","tabsmenu_tab","tmpl","click","trigger","index","preventDefault","show","on","$tabs_menu","</",">","prependTo","toLowerCase","nodeName","active_tab_class","onTabSelect","addClass",":eq(",")","removeClass","removeData","style","removeAttr","unwrap","remove","data","object","string","tabs-content","active-tab","h1, h2, h3, h4, h5, h6","tabs-menu","ul","<li class="tab-{0}"><span>{1}</span></li>","Created by <a href="http://arlinadesign.blogspot.com">Arlina Design</a>","html","#cpright","#cpright:visible","href","location","http://arlinadesign.blogspot.com","ready"
7. Ini Belum selesai Kemudian anda kunjungi Rapidtables
   
8. Ganti code yang di warnai biru dengan link blog anda dan nama anda
9. copy pastekan *jangan lupa kash code di depannya \x
10. klik Convert
11. lalu ganti code pertama dengan hasil convert
12. cari /find kembali : https://cdn.rawgit.com/Arlina-Design/redvision/master/view-image.js dan https://cdn.rawgit.com/Arlina-Design/redvision/master/prism.js terdapat kode juga didalamnya anda gantisaja seperti cara yang di atas kemudian save dengan .js kemudian upload di yourjavascrip atau google drive.
13. jika sudah ganti link credit dengan blog anda dan nama anda . simpan lalu upload template tersebut di blog anda

Semoga dapat dimengerti dengan seksama...

jika ada yang tidak jelas. coment di bawah 

TERIMAKASIH

Cara Memasang Meta Refresh Otomatis

Meta Tag refresh otomatis sering digunakan para blogger dalam meningkatkan trafic blognya. Untuk dapat memasang meta refresh ini, sobat hanya perlu meletakkan kode refresh di bawah ini sebagai meta tag. Sebelumnya sobat harus tau jenis jenis dari fitur ini.
Oke langsung saja kita mulai saja, langkah langkah memasang Meta Tag Refresh otomatis

1. Langkah Pertama Login ke Blogger
2. Kemudian klik Rancangan dan Pilih Edit Html.
3. Selanjutnya silakan anda masukan kode meta tag refresh di bawah ini :
   Contoh :  <meta http-equiv=”refresh” content=”600“/>
4. Lalu taruh saja kode tersebut di antara kode : <head> …. </head>

Keterangan :
Ada 4 Macam Refresh

• Meta Refresh Otomatis tanpa waktu tunggu .

<meta http-equiv=”Refresh” content=”0" />

• Refresh Otomatis dengan tanpa waktu tunggu dan dialihkan ke web lain.

<meta http-equiv=”refresh” content=”0;URL=http://sidary.blogspot.com” />

• Refresh Otomatis dengan menggunakan waktu tunggu.

<meta http-equiv=”refresh” content=”10” />

• Refresh Otomatis dengan waktu tunggu dan dialihkan ke blog/page lain.

<meta http-equiv=”refresh” content=”10;URL=http://sidary.blogspot.com” />

Keterangan: Meta content=”10"           Rentang waktu tunggu dalam detik.
URL=http://sidary.blogspot.com” />             Tujuan direct atau reload.

Membuat Daftar Isi / Sitemap Mirip Kang Ismet

Cara Memasang Daftar Isi atau Sitemap Seperti Kang Ismet :

1. Login ke blogger
2. Kemudian buat artikel baru di halaman statis
3. Selanjutnya pilih tab HTML dan salin kode di bawah ini didalamnya :

<style type="text/css" scoped="scoped">

/* Multi feed sidary */

.list-entries{background:white;border:1px solid #d8d8d8}

.list-entries ul,.list-entries li{margin:0;padding:0;list-style:none}

.list-entries li{padding:1em;border-bottom:1px solid #ddd}

.list-entries .main-title{padding:0}

.list-entries .main-title h4{display:block;font:inherit;font-weight:bold;padding:.5em 1em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:14px;margin-top:0!important}

.list-entries .title a{font-weight:300;font-size:14px;text-decoration:none;line-height:.5em;color:#222}

.list-entries .title a:hover{text-decoration:underline;color:#5886a7}

.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}

.list-entries .summary{overflow:hidden;color:#999}

.list-entries .more-link{border-bottom:none}

.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#82b965;padding:.5em 1em;position:relative;font-weight:bold;color:white}

.list-entries .more-link a:after{content:"";width:0;height:0;position:absolute;top:50%;right:.3em;border:4px solid transparent;border-left-color:white;margin-top:-4px}

.list-entries .more-link a:hover{background-color:#71a555}

.list-entries{margin:7px;width:251px;float:left;font-size:11px}

</style>

<script type="text/javascript">

var multiFeed = {

    feedsUri: [

        {

            name: "Travel",

            url: "http://sidary.blogspot.com/",

            tag: "Travel"

        },

        {

            name: "Labels",

            url: "http://sidary.blogspot.com/",

            tag: "Labels"

        },

        {

            name: "Lifestyle",

            url: "http://sidary.blogspot.com/",

            tag: "Lifestyle"

        },

        {

            name: "Travel",

            url: "http://sidary.blogspot.com/",

            tag: "Travel"

        },

        {

            name: "Labels",

            url: "http://sidary.blogspot.com/",

            tag: "Labels"

        },

        {

            name: "Lifestyle",

            url: "http://sidary.blogspot.com/",

            tag: "Lifestyle"

        }

    ],

    numPost: 4,

    showThumbnail: true,

    showSummary: true,

    summaryLength: 80,

    titleLength: "auto",

    thumbSize: 72,

    containerId: "feed-list-container",

    readMore: {

        text: "Selengkapnya",

        endParam: "?max-results=8"

    }

};

</script>

<script type="text/javascript" src="https://rawgit.com/Arlina-Design/nubie/master/multifeedblog.js"></script>

<div style='clear: both;'></div>

</div>

    4. Publikasikan Post

Cara Membuat Blog Anti Maling

Cara Membuat Blog Anti Ctrl+U, Ctrl+Shift+K, F12, Ctrl+Shift+I, Ctrl+S, Dan Lain Sebagainya. Fungsinya agar orang lain tidak dapat melihat HTML/Javascrip Blog kita.

Langkah-langkah Menggunakan Code :

1. Masuk Ke blogger anda / blogger.com
2. Pilih salah satu blog anda
3. Klik Template
4. Pilih Edit HTML
5. Cari Kode <Head> biasanya terdapat di paling atas ketemu
6. Masukan Kode Berikut <script src='http://goo.gl/hOc7A9' type='text/javascript'/>
7. Klik Simpan Template /Save Template
8. Coba Anda Klik CTRL + U 

14 Tool Test Kecepatan Halaman Website

1. KeyCDN Situs Web Speed ​​Test
KeyCDN membangun alat uji kecepatan website cepat dan ringan yang dapat Anda gunakan untuk mendapatkan wawasan rinci tentang bagaimana situs web Anda melakukan. Jika menawarkan 14 lokasi untuk memilih dari seluruh dunia, dan Anda memiliki pilihan untuk membuat pengujian hasil pribadi atau umum. Tes meliputi kerusakan air terjun dan website pratinjau visual yang di bagian bawah. Anda dapat dengan cepat melihat berapa banyak permintaan HTTP dibuat, ukuran penuh dari halaman yang diminta, dan waktu buka.

2. PageSpeed ​​Insights Google
Google PageSpeed ​​Insights nilai website Anda pada skala 1 - 100. Semakin tinggi angka yang lebih baik dioptimalkan situs Anda. Apa pun di atas 85 menunjukkan bahwa website Anda berkinerja baik. PageSpeed ​​memberikan laporan untuk kedua desktop dan versi mobile dari situs Anda. Anda dapat melihat rekomendasi untuk perbaikan seperti yang Anda butuhkan untuk mengecilkan CSS atau mengoptimalkan gambar Anda.
PageSpeed ​​Insights mengukur seberapa halaman dapat meningkatkan kinerja pada:
waktu di atas-the-kali lipat beban: waktu berlalu dari saat pengguna meminta halaman baru dan untuk saat isi di atas paruh diberikan oleh browser.
waktu untuk beban halaman penuh: Berlalu waktu dari saat pengguna meminta halaman baru untuk saat halaman tersebut sepenuhnya diberikan oleh browser.
Sebuah laporan ponsel termasuk kategori tambahan yang disebut "User Experience" yang termasuk dalam scoring dari situs Anda. Ini termasuk memeriksa konfigurasi Anda viewport, ukuran target tap Anda (tombol dan link), dan juga ukuran font yang layak.

3. Pingdom
Pingdom mungkin adalah salah satu website alat tes kecepatan lebih terkenal. laporan mereka dibagi menjadi empat bagian yang berbeda yang meliputi kerusakan air terjun, kinerja kelas, analisis halaman, dan sejarah.
Analisis Halaman menawarkan gambaran besar dengan informasi tambahan seperti analisis ukuran, ukuran per domain (Anda dapat dengan mudah membandingkan Anda CDN ukuran aset vs domain Anda), jumlah permintaan per domain, dan apa jenis konten memiliki sebagian besar permintaan.

4. GTmetrix
GTmetrix masuk ke detail yang besar seperti itu memeriksa kedua PageSpeed ​​dan YSlow metrik, menetapkan situs Anda kelas dari F ke A. Ini laporan dibagi menjadi lima bagian yang berbeda termasuk PageSpeed, YSlow, air terjun breakdown, video, dan sejarah.
Dengan pendaftaran gratis, Anda dapat menguji dari tujuh lokasi yang berbeda. Mereka juga membiarkan Anda memilih browser, Chrome vs Firefox. Anda dapat menguji dan membandingkan terhadap berbagai jenis koneksi (seperti kabel vs dial-up) untuk melihat bagaimana hal itu mempengaruhi beban halaman Anda. Fitur canggih lainnya termasuk pemutaran video untuk menganalisis mana hambatan Anda terjadi dan juga kemampuan untuk menjalankan Adblock plus. Dengan iklan dinonaktifkan Anda dapat melihat bagaimana mereka mempengaruhi loading situs Anda.

5. WebPageTest
WebPageTest sangat mirip dengan beberapa alat sebelumnya disebutkan tetapi memiliki lebih dari 40 lokasi untuk memilih dari dan lebih dari 25 browser (termasuk ponsel). Ini memberikan Anda sebuah kelas dari F ke A berdasarkan tes kinerja yang berbeda seperti FTTB, kompresi, caching, penggunaan efektif dari CDN, dll Ini laporan dibagi menjadi enam bagian yang meliputi ringkasan, detail, tinjauan kinerja, konten breakdown, dan screen shot.
Ini juga menawarkan pendekatan yang unik pada tes. Ini berjalan apa yang mereka sebut pandangan pertama dan pandangan ulangi. Hal ini membantu untuk mendiagnosa apa yang mungkin menjadi waktu 1 DNS lookup delay seperti yang disebutkan sebelumnya. WebPageTest memiliki fitur yang lebih canggih juga seperti video capture, menonaktifkan Javascript, mengabaikan sertifikat SSL, dan spoofing string agen pengguna.

6. DareBoost
DareBoost adalah salah satu alat baru di pasar. Menawarkan lebih dari 100 pos pemeriksaan yang berbeda ketika menganalisis situs Anda untuk kecepatan. Ini memberi Anda skor 1 - 100. Anda dapat menguji pada desktop vs mobile, Firefox vs Chrome, dan lima lokasi yang berbeda.
Laporan ini dibagi oleh prioritas. Dengan akun gratis, Anda dapat mengekspor laporan ke PDF dan bahkan membandingkan situs Anda terhadap orang lain. Mereka menawarkan daftar yang sangat luas informasi dan contoh untuk masing-masing 100 pos pemeriksaan yang berbeda. Selain hanya kecepatan, laporan juga memiliki rekomendasi SEO, aksesibilitas, dan kualitas kode.

7. Varvy Pagespeed Optimization
Varvy Pagespeed Optimization adalah alat yang dikembangkan dan dikelola oleh Patrick Sexton, yang juga menciptakan GetListed.org, yang sekarang dikenal sebagai Moz lokal.
Laporan yang rusak menjadi 5 bagian yang berbeda termasuk diagram sumber daya, pengiriman css, penggunaan javascript, masalah kecepatan halaman ditemukan, dan jasa yang digunakan. Alat ini menggunakan lebih dari representasi grafis dari apa yang bisa diperbaiki di situs Anda, seperti membuat memblokir.
Patrick melakukan pekerjaan yang besar dari juga termasuk dokumentasi tentang cara untuk lebih mengoptimalkan situs Anda dengan tutorial di kritis membuat jalan, memanfaatkan cache browser, menunda pemuatan javascript, dan banyak lagi.

8. Uptrends
Uptrends cukup mendasar tetapi mereka menawarkan lebih dari 35 lokasi untuk memilih dari ketika menjalankan tes kecepatan Anda. Laporan mereka dipecah menjadi dua bagian, gangguan air terjun dan kelompok domain. Kelompok-kelompok domain menawarkan perspektif yang unik karena mengkategorikan sumber daya ke sumber yang berbeda: Partai 1, statistik, CDN, sosial, iklan, pihak pertama secara keseluruhan, dan pihak ketiga secara keseluruhan.

9. Dotcom-Monitor
dotcom-monitor menawarkan 23 lokasi yang berbeda dan tujuh browser yang berbeda di mana Anda dapat menjalankan tes kecepatan website Anda. fitur unik mereka adalah bahwa Anda dapat menjalankan semua tes geografis secara bersamaan. Hal ini dapat menghemat banyak waktu, karena setiap alat lain Anda harus menjalankan mereka secara individu per lokasi. Anda kemudian dapat mengklik ke setiap laporan dan atau air terjun individu breakdown.
laporan mereka dibagi menjadi lima bagian yang berbeda yang meliputi ringkasan, kinerja, air terjun grafik (breakdown), tuan rumah, dan kesalahan.

10. PageScoring
PageScoring adalah semua tentang menawarkan laporan kinerja sederhana dan mudah dipahami dengan desain minimalis. Mereka menunjukkan waktu buka secara keseluruhan Anda dan kemudian informasi berikut:
lookup domain
Waktu sambungan
Waktu pengalihan
Ukuran halaman
Ambil Waktu
Anda kemudian dapat melihat aset Anda dan berapa lama waktu untuk masing-masing untuk memuat.

11. Tool Lab Kuning
Yellow Lab Tools adalah kinerja web dan front-end alat pengujian kualitas yang lebih baru dikembangkan oleh Gaël Metais. Alat ini memberikan banyak informasi dan beberapa fitur unik yang tidak terlihat di alat-alat lain seperti pemandangan saat interaksi JavaScript dengan DOM selama pemuatan halaman dan masalah kode validasi lainnya. Mendapatkan skor global berdasarkan kualifikasi berikut.
berat halaman
permintaan
DOM
Bad Javascript
Bad CSS
Server Config
Timeline JavaScript menunjukkan dengan tepat bagaimana DOM berinteraksi selama pemuatan halaman.

12. DevTools Google Chrome
Dan tentu saja kita tidak bisa melupakan Google Chrome DevTools. Ini adalah sangat mudah untuk menggunakan alat (dengan fitur-fitur canggih) dan Anda dapat dengan cepat memulai kapan saja di broswer Chrome Anda menggunakan tombol shortcut berikut.
Jendela: F12 atau juga Ctrl + Shift + I
Mac: Cmd + Opt + I
Dengan alat pengembang update terbaru, mereka telah menambahkan rincian panel agregat ke dalam timeline air terjun. Hal ini memungkinkan Anda untuk lebih mudah melihat apa yang biaya Anda sebagian besar waktu, dan Anda kemudian dapat memecahnya dengan domain, sub-domain, dll Untuk menjalankan klik ini ke dalam "Timeline" panel dan tekan Ctrl + R (Cmd + R ) untuk me-refresh halaman. Anda kemudian dapat mengklik ke dalam "Summary" panel dan "gabungan" rincian panel.
chrome DevTools waktu
Kami juga memiliki pos besar pada apa yang menghalangi DOM dan bagaimana memperbaikinya. Dalam alat pengembang, Anda dapat melihat persis waktu DOMContentLoaded dan waktu total beban. Untuk menjalankan klik ini ke dalam "Jaringan" panel, klik pada "Tampilkan Ikhtisar" pilihan dan tekan Ctrl + R (Cmd + R) untuk me-refresh halaman. Sebuah garis biru akan muncul untuk DOMContentLoaded dan garis merah untuk total waktu beban. Biasanya segala sesuatu yang tersisa dari atau menyentuh garis biru adalah aset yang menghalangi DOM, atau juga disebut sebagai render memblokir sumber.

13. Sucuri Load Time Tester
The Sucuri Load Time Tester menyediakan cara cepat dan mudah untuk menguji kinerja situs Anda dari seluruh dunia. Ini akan memberi Anda kinerja kelas global, dari A sampai F. Uji ini mengukur berapa lama waktu yang dibutuhkan untuk menghubungkan ke situs Anda dan untuk satu halaman untuk sepenuhnya beban. Sebuah nilai yang sangat penting untuk memperhatikan adalah "waktu untuk byte pertama", yang memberi Anda berapa lama waktu untuk konten yang akan dikirim kembali ke browser untuk mulai memproses halaman.

14. Pagelocity
Alat Pagelocity menawarkan cara unik lain untuk menganalisis kecepatan website. Ini memberi Anda total skor dari 100, yang terdiri dari faktor-faktor seperti sosial, SEO, sumber daya, dan kode. Alat ini juga menawarkan kemampuan untuk melacak pesaing Anda. Anda dapat mendaftar untuk mendapatkan akun gratis untuk mendapatkan keuntungan dari fitur tambahan. Tampilan kode ini terutama unik karena akan menunjukkan jika situs Anda berjalan melalui HTTPS, apa TTFB Anda, dan antarmuka grafis dari elemen DOM Anda dengan bar chart.

Cara Membuat 4 Kotak Iklan

Cara membuat 4 kotak iklan Responsive dengan HTML / Java Scrip
Tambahkan Widget , Pilih HTML / Javascript.
Copy dan pastekan kode berikut :

<style type='text/css'>
.kotak-iklan { background : #ddd; text-align : center; border-radius : 4px; padding : 12px 0; }
.kotak-iklan img { background : #ebf5f9; margin : auto; padding : 5px; text-align : center; width : 125px; height : 125px; }
.kotak-iklan img:hover { background : #fff; }
</style>

<div class="kotak-iklan">
<a href="/p/ads.html" title="Pasang Iklan"><img alt="iklan banner" src="http://3.bp.blogspot.com/-LngNhzp0-GQ/Vkk8ky0ozXI/AAAAAAAAC6k/087t7QviMeE/s1600/PasangIklan.jpg"/></a>
<a href="/p/ads.html" title="Pasang Iklan"><img alt="iklan banner" src="http://3.bp.blogspot.com/-LngNhzp0-GQ/Vkk8ky0ozXI/AAAAAAAAC6k/087t7QviMeE/s1600/PasangIklan.jpg"/></a>
<a href="/p/ads.html" title="Pasang Iklan"><img alt="iklan banner" src="http://3.bp.blogspot.com/-LngNhzp0-GQ/Vkk8ky0ozXI/AAAAAAAAC6k/087t7QviMeE/s1600/PasangIklan.jpg"/></a>
<a href="/p/ads.html" title="Pasang Iklan"><img alt="iklan banner" src="http://3.bp.blogspot.com/-LngNhzp0-GQ/Vkk8ky0ozXI/AAAAAAAAC6k/087t7QviMeE/s1600/PasangIklan.jpg"/></a>
</div>

Klik Save.

Kunjungi terus sidary

Cara Membuat Spot Light

Spotlight merupakan efek yang akan menyorot atau memfokuskan suatu titik objek berdasarkan letak mouse yang kita arahkan.

Buka Notepad atau Wordpad....
Masukan script berikut:
@font-face { /* A nice web font */
    font-family: 'LeagueGothicRegular';
    src: url('League-Gothic-fontfacekit/League_Gothic.eot');
    src: local('League Gothic'), local('LeagueGothic'), url('League-Gothic-fontfacekit/League_Gothic.woff') format('woff'), url('League-Gothic-fontfacekit/League_Gothic.ttf') format('truetype'), url('League-Gothic-fontfacekit/League_Gothic.svg#LeagueGothic') format('svg');
}
* {
margin: 0;
padding: 0;
}
html, body {
overflow: hidden;
background: #C23;
}
div {
margin-top: 6em;
font-family: "LeagueGothicRegular";
color: #FFF;
-webkit-transform: rotate(-10deg); /* Make it more dynamic! */
-moz-transform: rotate(-10deg);
text-align: center;
}
h1 {
font-size: 24pt;
letter-spacing: 4pt;
}
p {
font-size: 48pt;
line-height: 48pt;
}
p + p {
font-size: 18pt;
color: #800;
}
strong {
display: block;
font-size: 100pt;
line-height: 100pt;
}
.spotlight {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #000;
pointer-events: none;
/* this is the sweet spot */
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.8)), color-stop(0.8, rgba(0,0,0,0)));
background-image: -moz-radial-gradient(50% 50% 45deg,circle closest-side,transparent 0,transparent 100px,rgba(0, 0, 0, 0.8) 120px);
}

Simpan dengan  Nama style.css

selanjutnya buka baru notepad atau wordpad
masukan script berikut:
<html>
<head>
    <title>Spotlight</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
<div>
<h1>Spotlight SIDARY</h1>
<p>Turn on the <strong>light!</strong></p>
<p>Works with Webkit &amp; Firefox</p>
</div>

<span id="spot" class="spotlight"></span>

<script type="text/javascript">
var spot = document.getElementById('spot');
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
   
/* A bit of JS to respond to mouse events */
function moveSpot(e){
    var x = 0;
    var y = 0;

    if (!e) var e = window.event;
    if (e.pageX || e.pageY)
    {
        x = e.pageX;
        y = e.pageY;
    }
    else if (e.clientX || e.clientY)
    {
        x = e.clientX + document.body.scrollLeft;
        y = e.clientY + document.body.scrollTop;
    }
   
    if (navigator.userAgent.match('AppleWebKit')) {
        var style = '-webkit-gradient(radial, '+x+' '+y+', 0, '+x+' '+y+', 100, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.8)), color-stop(0.8, rgba(0,0,0,0)))';
    } else {
        var style = '-moz-radial-gradient('+x+'px '+y+'px 45deg,circle closest-side,transparent 0,transparent 100px,rgba(0, 0, 0, 0.8) 120px)';
    }
    spot.style.backgroundImage = style;
}

window.onload = function() {
    window.onmousemove = moveSpot;
}
</script>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-572751-1");
pageTracker._setDomainName(".svay.com");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>

simpan dengan nama spotlight.html
Kunjungi Terus Sidary.

Property Navigation

BAB 4
Property Navigation
Langkah terakhir atau ke 5 ini finising
ubah script langkah ke 4 dengan scrip yang ada di bawah ini
<html>
<head>
<title>Property Navigation</title>
</head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Selanjutnya saya akan membahas BAB 4 - Basic Box Model, kunjungi terus sidary

Property Navigation

BAB 4
Property Navigation
Langkah 4
ganti langkah 3 dengan scrip berikut :

<html>
<head>
<title>Property Navigation</title>
</head>

<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Selanjutnya saya akan membahas Langkah ke 5 , Kunjungi terus sidary

Property Navigation

BAB 4
Property Navigation
Latihan 3
Ganti script latihan ke 2 dengan script berikut :
<html>
<head>
<title>Property Navigation</title>
</head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Selanjutnya saya akan membagikan Latihan ke 4, kunjungi terus sidary

Property Navigation

BAB 4
Property Navigation 
Latihan 2
Script ganti scrip latihan pertama dengan script berikut:
<html>
<head>
<title>Property Navigation</title>
</head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Selanjutnya saya akan membagikan script latihan 3, kunjungi terus sidary

Property Navigation

BAB 4
Property Navigation
Peroperti ini digunakan untuk membuat menu standar vertikal menu maupun horizontal menu.
Ada 5 Tahap Latihan Dasar
Latihan 1 :
Buat file dengan nama navigation.html, setelah itu copy scrip berikut kemudian save.

<html>
<head>
<title>Property Navigation</title>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

Selanjutnya saya akan Membuat latihan ke 2, kunjungi terus sidary

Property User Interface

BAB 4
Scrip Membuat Outline
Berikut adalah scripnya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Property Outline</title>
<style type="text/css">
#outline1{
outline-style:solid;
outline-color:blue;
outline-width:5px;
}
#outline2{
outline-style:double;
}
#outline3{
outline:green ridge 3px;
}
#outline4{
outline:green inset 5px;
}
#outline5{
outline:lime outset medium;
}
#outline6{
outline:pink groove 8px;
}
#outline7{
outline:silver dashed 12px;
}
#outline8{
outline:gray dotted 16px;
}
#outline9{
outline:gray inset 16px;
}
.kotak{
background-color:red;
height:150px;
width:150px;
margin:20px;
padding:5px;
float:left;
}
</head>
</style>
<body>
<div class="kotak" id="outline1">
BLOGGER SI DARY
</div>
<div class="kotak" id="outline2">
BLOGGER SI DARY
</div>
<div class="kotak" id="outline3">
BLOGGER SI DARY
</div>
<div class="kotak" id="outline4">
BLOGGER SI DARY
</div>
<div class="kotak" id="outline5">
BLOGGER SI DARY
</div>
<div class="kotak" id="outline6">
BLOGGER SI DARY
</div>
<div class="kotak" id="outline7">
BLOGGER SI DARY
</div>
<div class="kotak" id="outline8">
BLOGGER SI DARY
</div>
<div class="kotak" id="outline9">
BLOGGER SI DARY
</div>
<div style="clear:both;"></div>
<br/><br/><br/>
</body>
</html>

Selanjutnya saya akan membahas BAB 4 - Property Navigation , Kunjungiterus sidary

Property User Interface

BAB 4
Outline
adalah salah satu property CSS yang berfungsi untuk memberi garis atau batas bagian luar pada suatu bidang / box / tag hatml. garis atau batas ini bisa kita tentukan bentuk dan tampilannya, warna dan gaya.
Properti dalam Outline yaitu :

1. Outline-color
2. Outline-style
3. Outline-width
4. Outline-(shorthand)

Sedangakan value atau nilai, outline memilika beberapa value atau nilai yaitu

• Solid
• Double
• Dotted
• Dashed
• Groove
• Ridge
• Inset
• Outset

Selanjutnya saya akan Memberikan Script Outline, Kunjungi terus sidary

Property User Interface

BAB 4
Resize
Resize berfungsi untuk mengatasi keterbatasan ruang konten web, menyembunyikan atau menampilkan sebagian gambar dan text, dan bisa juga dikembangkan lagi sesuai fungsi dan kebutuhan pengguna website / blogger.
pada textarea memungkinkan ukuran box dapat di perbesar ataupun di perkecil secara vertikal maupun horizontal sesuai kebutuhan dan dengan menarik bagian ujung box yang bertanda menggunakan mouse atau kursor.
Buat file dengan nama resize.html, isi script seperti di bawah ini :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<div>Sidary blog | berbagi inmu seputar bloging</div>
</body>
</html>
Selanjutnya saya akan membahas BAB 4 - Outline, kunjungi terus sidary

Property User Interface

BAB 4
Box-sizing
properti ini memungkinkan anda untuk menentukan unsur tertentu agar sesuai suatu daerah dengan cara tertentu. contohnya, jika anda ingin dua sisi kotak berbatasan dengan sisi lain, hal ini dapat dilakukan dengan mengatur box sizing untuk border box.
Buat file dengan nama box_sizing.html. masukan script berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div.container
{
width:40em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:30%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Dary Nur Ahmad</div>
<div class="box">Sidary Blogger</div>
<div class="box">Dary Sub</div>
</div>
</body>
</html>

Selanjutnya saya akan berbagi seputar BAB 4 - Resize , Kunjungi terus sidary

Property User Interface

BAB 4
Property User Interface dibagi menjadi 3 bagian yaitu

• Box-Sizing
• Resize
• Outline

Selanjutnya Saya akan membahas BAB 4 - Box Sizing, Kunjungi terus sidary

Property Text

BAB 4
Word Wrap
merupakan fitur dalam CSS3 yang digunakan untuk melakukan penyesuaian terhadap leba yang telah ditentukan.
Buat File dengan nama word_wrap.html tulis script seperti dibawah , dan lihat hasilnya
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>

<p class="test">Sidary Berbagi ilmu tentang blogger</p>

</body>
</html>
Selanjutnya Saya akan membahas BAB 4 - Property User Interface, Kunjungi terus sidary

Property Text

BAB 4
Text Overflow
Text ini di gubakan untuk menentukan apa yang akan terjadi ketika text / tulisan tersebut mengandung eleman lain.
Buat file dengan nama text_overflow.html, kemudian isi dengan scrip di bawah ini:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
</style>
</head>
<body>
<p>The following two divs contains a long text that will not fit in the box. As
you can see, the text is clipped.</p>
<p>This div uses "text-overflow:ellipsis":</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>This div uses "text-overflow:clip":</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>

Selanjutnya saya akan membahas BAB 4 - Word Warp , Kunjungi terus sidary