Membuat Daftar Isi Blog Secara Otomatis

Daftar Isi / Sitemap yang ada di blog akan memudahkan pemilik maupun pengunjung blog untuk mencari artikel yang dibutuhkan. 

Daftar isi artikel akan tersusun berurutan sesuai abjad label, tanpa anda harus menulisnya satu persatu atau mengklasifikasikannya secara manual. Dan 10 artikel terbaru akan diberi kode dengan tulisan New! berwarna merah.

Daftar isi ini memiliki 2 versi, yaitu: 

1. Daftar isi biasa (Konvensional).

2. Daftar isi dengan Layar gulung (Scroll bar).

3. Daftar Isi Blog Berdasarkan Label/Kategori

Keuntungan kita membuat daftar isi blog antara lain adalah :

• Membuat daftar isi blog (peta situs, sitemap, table of content) berdasarkan label atau kategori posting sangat baik untuk mesin pencari juga user.
• Menu daftar isi blog akan memudahkan pembaca mengakses bagian-bagian atau konten blog secara cepat dan mencari tulisan, artikel, atau posting yang mereka butuhkan. Menu navigasi daftar isi ini juga dianjurkan Google guna memudahkan user menjelajahi blog kita.
• Sitemap (Daftar Isi) update secara otomatis ketika Anda mempublikasikan posting
• Daftar Isi Ini akan secara otomatis menandai pesan terbaru Anda sebagai BARU di sitemap (Daftar Isi)
• Semua posting anda akan diatur dengan baik di bawah kategori yang diberikan (Label)
• Memiliki tampilan yang lebih segar dan baru pada blog anda

Silakan anda memilih salah satunya saja sesuai selera. Skrip ini keistimewaannya sangat singkat dan simpel, bisa dibandingkan dengan sekian banyak skrip yang ditawarkan blogger lainnya.

1. Cara Membuat Daftar Isi Blog Model Biasa

Pada dashbor blog anda pilih LAMAN (PAGE) Selanjutnya klik LAMAN BARU >> LAMAN KOSONG. Setelah tampil halaman seperti ketika anda akan membuat artikel. Cara sama dengan cara membuat postingan baru dengan memasukkan skrip di bawah ini pada mode HTML (sebelah compose) 

<scriptsrc="http://tyos2002.blogspot.com/files/sitemap%281%29.js"></script><script src="http://tyos2002.blogspot.com/feeds/posts/default?max-results=999&alt=json-in-script&callback=loadtoc"></script>

Silakan beri judul postingan tersebut sesuka anda, misalnya : Daftar Isi blog / Sitemap atau Daftar Artikel blog mungkin juga Halaman Kotak Isi Blog Penuh Makna, yang pasti terserah anda.

Publikasikan.

Keterangan :

Ganti teks http://tyos2002.blogspot.com dengan url blog anda, Ganti teks width: 100%; height: 500px; adalah ukuran panjang dan lebar kotak, anda dapat merubahnya, jika mau. 

2. Cara Membuat Daftar isi Blog Model Layar Gulung

Pada dashbor blog anda pilih LAMAN (PAGE) selanjutnya klik LAMAN BARU >> LAMAN KOSONG setelah tampil halaman seperti ketika anda akan membuat artikel. Cara sama dengan cara membuat postingan baru dengan memasukkan skrip di bawah ini pada mode HTML (sebelah compose) 

<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height: 500px; background-color: none; text-align: left;"> <script src="http://tyos2002.blogspot.com/files/sitemap%281%29.js"></script><script src="http://tyos2002.blogspot.com/feeds/posts/default?max-results=999&alt=json-in-script&callback=loadtoc"></script></div>

atau 

<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height:270px; background-color: none; text-align: left;"> <script style="text/javascript" src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script><script src="http://tyos2002.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

Silakan beri judul postingan tersebut sesuka anda, misalnya : Daftar Isi blog / Sitemap atau Daftar Artikel blog mungkin juga Halaman Kotak Isi Blog Penuh Makna, yang pasti terserah anda.

Publikasikan.

Keterangan :

Ganti teks http://tyos2002.blogspot.com dengan url blog anda, Ganti teks width: 100%; height: 500px; adalah ukuran panjang dan lebar kotak, anda dapat merubahnya, jika mau. 

Daftar Isi Blog Berdasarkan Label/Kategori.

• Klik menu "Page" (Halaman) di Dashboard Blog
• Klik New Page  (Halaman Baru) 
• Isi nama halaman dengan Sitemap, Peta Situs, atau Daftar Isi
• Klik tombol mode HTML
• Copy dan Paste salah satu kode HTML di bawah ini.  Jangan lupa ganti dulu contohblognih dengan nama blog Anda.
• Klik Publish! 

<span style="font-size: x-large;">.. Daftar Isi ..</span><style> p.labels a{color: #00FF00; text-transform: uppercase;font-size: 15px;} a.post-titles {color: #FFFF00;} ol li{list-style-type:decimal;line-height:15px;} </style><br /> <script src="http://yourjavascript.com/7366511402/simplesitemap.js" type="text/javascript"></script><br /> <script src="https://tyos2002.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=bloggersitemap"></script>

Keterangan :

Ganti teks .. Daftar Isi ..,  https://tyos2002.blogspot.com, labels a{color: #00FF00; font-size: 15px; post-titles {color: #FFFF00; height:15px; sesuai dengan yang diinginkan.

Daftar Isi Blog Berdasarkan Kategori/Label dengan drop fitur turun.

Untuk menyisipkan Table Menarik Daftar Isi (Sitemap) di Blog anda, Ikutilah Langkah ini :  

Pergi ke Blogger >> Template >> Edit HTML >> Lanjutkan

Sekarang cari Untuk   ]]> </ b: skin> di Template Anda dengan (CTRL + F)

ketika Anda menemukan   ]]> </ b: skin> copas scrip berikut ini  tepat di atas nya.

/ * -------- MyBloggerLab TOC ----- * / .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; menguraikan: none; kursor: pointer; text-decoration: none; Font: 14px / 100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px RGBA (0,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, 0,2); -moz-box-shadow: 1px 1px 4px #AAAAAA; box-shadow: 0 1px 2px RGBA (0,0,0, 0,2); color: # e9e9e9; border: 2px putih padat penting;! background: # 6e6e6e; background: -webkit-gradien (linier, kiri atas, kiri bawah, dari (# 888), untuk (# 575757)); background: -moz-linear-gradient (top, # 888, # 575757); filter: PROGID: DXImageTransform.Microsoft.gradient (startColorstr = '# 888888', endColorstr = '# 575757'); } DATA-daftar { 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 putih padat penting;! background: # 1C8DFF; background: -webkit-gradien (linier, kiri atas, kiri bawah, dari (# 9dc2e7), untuk (# 438cd2)); background: -moz-linear-gradient (top, # 9dc2e7, # 438cd2); filter: PROGID: DXImageTransform.Microsoft.gradient (startColorstr = '# 9dc2e7', endColorstr = '# 438cd2'); }

• Sekarang simpan template dengan menekan tombol Save Template
• Kemudian kita akan membuat halaman baru untuk Tabel Daftar isi. Ingat: kita akan membuat halaman baru bukan post. Untuk membuatnya halaman baru ini :  ke Blogger >> Pages >> New Halaman>> Halaman Kosong
• Selanjutnya Berikan judul untuk halaman Anda itu dengan judul "Daftar Isi dengan drop fitur turun"  kemudian Copas scrip berikut ini di MODE HTML, bukan Compose. 

<script src = "http://nurulimaminfo.googlecode.com/files/daftarisiv2-pack.js"> </ script> <script src=" https://tyos2002.blogspot.com /feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"> </ script> <script type = "text / javascript"> var accToc = true; </ script> <script src = "http://deroc.googlecode.com/files/accordion-pack.js" type = "text / javascript"> </ script>

Ganti teks http://tyos2002.blogspot.com dengan url blog anda

Semoga bermanfaat..

sumber : 

www.jadipintar.com     www.gagaje.blogspot.com    trikseosimple.blogspot.com     www.mybloggerlab.com    contohblognih.blogspot.com