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
/*——–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
Mudah kan? Demikian sekilas info tips desain blog khususnya tentang Cara Membuat Daftar Isi (Sitemap) Blog Fast Loading. Semoga bermanfaat.
Source:
http://www.mybloggerlab.com/
sama-sama mas…semoga bermanfaat
Makasih banyak buat infonya