Cara Membuat Daftar Isi dengan Gambar Thumbnail diblogger

Pada kesempatan kali ini, saya akan mengulas mengenai pembuatan daftar isi di blog. Sebenarnya sudah banyak cara-cara yang beredar untuk membuat daftar isi itu sendiri, tetapi banyak sahabat blogger yang mencari daftar isi yang menarik dan keren tidak hanya monoton begitu saja, Maka dari itu disni saya akan sedikit mengulas mengenai pembuatan daftar isi yang sudah tercantum gambar thmbnail, daftar isi sendiri juga sebagai media untuk mempermudah pengunjung yang ingin mengetahui apa saja yang ada didalam sebuah blog ataupun website. Langsung saja berikut cuplikan penampakan yang sudah jadi

Cara pembuatan :
1. Login ke akun blog Anda
2. Pilih menu Laman, kemudian klik laman baru

3. Ketikkan kode berikut tetapi pilih pada HTML bukan yang Compose dengan aturan ganti rifaianan.blogspot.com dengan alamat blog teman-teman.

<script src='https://bloggertipstricks.googlecode.com/files/bloggertipstricks.com-sitemap.js'> </script> <script style='text/javascript'> var numposts = 999; var showpostthumbnails = true; var displayseparator = true; </script> <script src="http://rifaianan.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent&max-results=999"></script> <style type="text/css"> .sitemap-container {width: 100%; height: 105px; border-top: 2px solid #eee;} .sitemap-container:hover {background-color:#fafafa;} .thumbnail {width: 60px; height: 90px; float: left; top:0px;} .posttitle {height: 90px; float: left; line-height: 90px; margin-left:25px; display:block; width:80%; white-space:nowrap;} #postimg {margin-top: 10px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 60px; border: 2px solid #eee;} #list{list-style-type: none; padding-left: 0px; margin-left: 0px;} </style>
 seperti ini ..

4. Kemudian Publikasikan. dan selesai ....
5. Untuk melihat alamat urlnya bisa Anda klik pada menu lihat, maka akan muncul alamat urlnya.

Demikian sedikit ulasan mengenai pembuatan Daftar Isi dengan Gambar Thumbnail diblogger, semoga dapat membantu dan bermanfaat untuk anda.. terimakasih

Tweet

Subscribe to receive free email updates: