Untuk mempermudah pembaca mencari artikel pada blog kita, perlu adanya daftar isi blog. Bentuk daftar isi ini bisa dikreasikan sesuai selera.
Berikut adalah cara membuatnya
Jangan lupa Backup template Blog anda
Kemudian Tambahkan sebuah Element halaman -> HTML/Javascript
Copy/Paste code dibawah ini
Jangan lupa ganti dengan alamat blog sobat pada kode warna merah diatas
Jangan lupa disimpan :)
Copy/Paste code dibawah ini
Jangan lupa disimpan :)
Langkah ketiga:
Langkah selanjutnya buka Template -> Edit Html
Copy/paste code dibawah ini pada deretan CSS code atau kalo masih bingung cari code
lalu paste aja dibawah kode tersebut
-----------------------------------------
*/
#toc {
border: 0px solid #78B749;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #cccccc;
color: #444;
padding-left: 5px;
font-weight:bold;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:95%;
text-decoration:none;
text-align: Left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:95%;
text-decoration:underline;
text-align: left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
text-align: left;
font-size:95%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}
Langkah Terakhir:
Yup! udah selesai jangan lupa disimpan dan lihat hasilnya :)
Cara lainya anda bisa lihat di
blogkomputers.blogspot.com
http://masenchipz.com
http://kolom-inspirasi.blogspot.com
http://blogkomputers.blogspot.com/
No comments:
Post a Comment