Daftar Isi yang Dapat Disesuaikan dan Bergaya untuk Blogger

Untuk mendapatkan situs SEO yang dioptimalkan, mengirimkan peta situs adalah wajib. Untuk mendapatkan situs User Frienly, membuat daftar isi yang gaya dan tampan adalah salah satu jawabannya. Tidak ada pertanyaan tentang itu, jika sitemap Anda dikirimkan ke google misalnya, google memiliki ide yang lebih baik untuk mempelajari struktur situs Anda. Dan jika Anda daftar posting Anda di halaman daftar isi, pengunjung Anda akan dapat melihat semua posting dan memilih apa yang menarik bagi mereka. Untuk mengirim sitemap, harap baca cara membuat sitemap untuk pengindeksan halaman yang lebih baik , dan untuk membuat daftar isi silakan lanjutkan membaca posting ini.

Hanya ada satu langkah yang diperlukan untuk membuat daftar isi (TOC) untuk blog Anda. Buat saja halaman, lebih baik menjadi halaman statis. Kemudian tambahkan kode berikut dalam editor HTML :

<style type = "text / css"> 
/ * Outer Border 
------------------ * /
#toc {width: 99%; margin: 5px auto; border: 1px solid # 2D96DF; 
-webkit-box-shadow: 4px 4px 8px 2px rgba (0,0,0, 0,2); 
-moz-box-shadow: 4px 4px 8px 2px rgba (0,0,0, 0,2); 
box-shadow: 4px 4px 8px 2px rgba (0,0,0, 0,2);} 

/ * Label Warna dan Latar Belakang 
------------------ * /
.labl {color : # FF5F00; font-weight: bold; margin: 0 -5px; padding: 1px 0 2px 11px; 
latar belakang: -moz-linear-gradient (kanan, # C2EAFE 0%, # 055A85 40%); 
latar belakang: -webkit-gradient (linier, kiri 10, kanan 80, penghenti warna (0.20, # 055A85), penghenti warna (1, # C2EAFE)); 
border: 1px solid # 2D96DF; radius batas: 4px; -moz-batas-radius: 4px; 
-webkit-border-radius: 4px; box-shadow: 3px 3px 1px #bbb;
-moz-box-shadow: 3px 3px 1px #bbb; -webkit-box-shadow: 3px 3px 1px #bbb; tampilan: blok;} 
.labl a {warna: 
#fff ;} .labl: first-letter {text- transform: huruf besar;} 

/ * Info Posting Terbaru 
------------------ * /
.baru {warna: # FF5F00; font-weight: bold; font-style: italic} 

/ * Daftar Judul Posting 
------------------ * /
.postname {font-weight: normal; latar belakang: -moz-linear-gradient (kanan, # C2EAFE 0%, # ff 40%); 
latar belakang: -webkit-gradient (linear, kiri 80, kanan 10, color-stop (0,60, # fff), color-stop (1, # C2EAFE));} 
.postname li {border-bottom: #ddd 1px putus-putus; margin-right: 5px} 
</style>
<div id = "toc"> <script type = "text / javascript" src = "https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/dvslabs/customizable- TOC.js "> </script> 
<script src =" http: // www-netidnow-com .https://www-netidnow-com.blogspot.com// feeds / posts / default? Max-results = 9999 & amp; alt = json-in-script & amp; callback = loadtoc "> 
< / script> </div>

Ganti " yourblogname " dengan URL blog asli Anda, simpan posting dan selesai. Untuk contoh langsung tentang bagaimana daftar isi ini terlihat, klik tautan peta situs di menu navigasi utama atau klik di sini . 
Selain itu, Anda dapat mengubah tampilan TOC Anda dengan mengedit gaya yang disertakan di atas. Di sana Anda dapat mengubah gaya Daftar Perbatasan , Warna Label dan Latar Belakang, Info Posting Terakhir, dan Gaya Judul Posting. Cukup edit dan sesuaikan gaya apa pun yang Anda suka sehingga itu harus cocok dengan templat situs Anda. Catatan, CSS gradien linier khusus diterapkan . Untuk beberapa browser seperti Opera lama, gradien linier ini tidak akan berfungsi. Tetapi itu harus bekerja dengan baik di browser modern terbaru seperti Google Chrome, Mozilla Firefox atau Safari.

Penghargaan untuk penulis skrip TOC oleh: Abu Farhan