Cara Membuat Daftar Isi (Sitemap) Blog SEO Fast Loading

Cara Membuat Daftar Isi (Sitemap) Blog Fast Loading

Jika sobat memperhatikan halaman Sitemap pada situs ini akan sangat segera menampilkan seluruh daftar isi dari artikel yang saya tulis.

Source image: softverberza.com

Biasanya, jika kita "asal" memilih desain Sitemap, terkadang membuat tampilan blog kita semakin berat alias lemot. Namun kali ini sedikit saya berikan informasi cara membuat daftar isi (sitemap) dengan kode yang tidak mempengaruhi kecepatan loading. Tips membuat daftar ini sebenarnya sudah saya buat pula namun dengan desain yang berbeda. Dengan nuansa tampilan daftar isi berdasarkan tabel menurun ke bawah dan terlihat minimalis dan enak dilihat.

Cara Membuat Daftar Isi (Sitemap) Blog Fast Loading

Langkahnya cukup mudah:

1. Masuk akun blogger > pilih template > mode html

2. Silakan copas kode di bawah ini dan letakkan di atas kode ]]></b:skin>

/*--------forumblogindo.com-----*/
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #1C8DFF;
background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
background: -moz-linear-gradient(top, #9dc2e7, #438cd2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}

3. Save template
4. Silakan buat halaman baru (new page) > mode HTML (jangan compose)
5. Copas kode di bawah ini pada halaman new pages tadi > publish
6. Lihat hasilnya