Cara Membuat Site Map Bergambar (Thumbnail)

Tempo hari saya pernah memposting Cara membuat Sitemap di Blogger Otomatis Seo Friendly. Yang saya posting Tempo hari itu adalah hanya site map yang dengan kata - kata saja (Anchor Text), Tapi kali ini berbeda, Site Map yang akan dipostingkan kali ini adalah berbasis (Thumbnail) atau bergambar. Site Map atau biasa dipanggil Daftrar Isi Blogger adalah sebuah lokasi yang menempatkan semua yang pernah dipostingan anda menjadi satu page. Site Map ini berperan sangat penting sebagai pengganti "search" pada blog anda. Karena ketika kita meng-klik link Site Map, maka akan tampail semua postingan anda, walaupun itu artikel baru maupun artikel lama. Jika anda tertarik dengan site map seperti gambar diatas, ikuti langkah-langkah berikut.

Cara Pertama :

1. Masuk Blogger - Login.
2. Laman - Laman Baru.
3. Pilih HTML jangan Compose.
4. Copy kode berikut ini dan pastekan dibagian HTML.

<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="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;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>

5. Selesai!
6. Publikasikan.

Mudah bukan? Jika anda ingin site map yang anchor text seperti diblogger ini "Klik Disini"
Demikianlah Tips Blogger kali ini, Semoga Bermanfaat!