Nah, seperti yang saya bilang tadi, sitemap atau daftar isi ini bersifat otomatis, jadi anda tidak perlu lagi berepot-repot membuat link satu-satu yang menautkan masing-masing post di blog kita.
Selain memudahkan pengunjung untuk menemukan indeks blog kita, kita juga dapat memudahkan search engine untuk menemukan keseluruhan post yang ada di blog kita, jadi apabila ada postingan yang belum terindex, maka search engine bisa mengetahuinya.
Oh iya sobat, berbeda dengan beberapa daftar isi lainya, sitemap yang satu ini memiliki tampilan yang cukup menarik, karena bersifat open close seperti terbuka dan tertutup, jadi akan lebih menghemat tempat atau space di blog kita.
Dari pada berlama-lama lagi, yuk mending langsung praktek aja, kita cuma membutuhkan beberapa bait kode javascript doang kok untuk membuat widget ini, hehehe.
Cara Membuat Sitemap / Daftar Isi Otomatis di Blog
Langkah pertama yang harus anda lakukan tentunya adalah login ke blogspot terlebih dahulu, ketika sudah masuk ke halaman dasbor, pilih Laman > Klik Laman baru > Pilih Laman kosong > Pilih Opsi "HTML" pada postingan laman (bukan compose) > Lalu pastekan kode dibawah ini kedalamnya:
<div dir="ltr" style="text-align: left;" trbidi="on"> <style type="text/css"> #dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh53-HeCAbYDUAcB4hrL708jUnzrwTU8WlC5UBlGNKMOI1qbPiteOzghhcuW_KicozjbvjHKEYj8C87gqg8sbdrpKbUf4LEc9gXAeD31NEKlSPdO7RxWfZfqTsdrUUV1YwSLemafxPRwSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPAFTy1EDAg3eS6ggG1EmaSUVr5r-_G6l7pyMjtcG3zLpsCNF1lWy4xlezVeY2HI5HQfKgPjhOtL-4Pbv1XH6ndPrwoHyt7yv0oe1ZJ5HNze-MAShYrai771uaq_PtHMa-1E76sBR9x48/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJtJGuF1irsaE-kFQ3cabJFFELjIpIO-BG-8eJTvXRBW7RUwHicjDrw50c89VPVcdvJBOmfTcEWPB0MMNHKiB5SKt4TKrBIwvOljoqkZcNHEOgcWfMhjVK9dn0xu_qt-ttkD_qQGAVE_Y/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="https://farhanshare-blogspot-com.googlecode.com/files/sitemap%20%281%29.js" type="text/javascript"></script><script src="http://farespo.blogpsot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script> </div>
Keterangan: ganti kode yang berwarna biru dengan URL blog anda
Terakhir klik save atau publikasikan. Nah, bagaimana sobat? mudah sekali bukan cara membuat daftar isi otomatis di blog.
Demikian postingan tentang cara membuat sitemap / daftar isi otomatis di blog, simak juga artikel menarik lainya seputar widget blog tentang Cara Membuat Pesan Pembuka Ketika Masuk Blog.
menjadi lebih mudah dan praktis ya mas, jadi kita tidak lagi repot-repot mencari kesana-kemari, dengan adanya daftar isi tersebut, lebih memudahkan pengunjung dalam menavigasi keseluruhan muatan blog.
ReplyDeletelangsung praktek dah, maklum mas,belum paham tentang hal yang beginian, hehe..
salam kenal