[ Tutorial ] Sitemap Plus Dengan Gambar

Cara Membuat Daftar Isi (Sitemap) Blog Plus Gambar Thumbnail.

Klik untuk memperbesar

Daftar isi, Table of Content, atau halaman Sitemap blog biasanya berupa daftar link postinga saja. Variasi disain Sitemap atau Daftar isi blog ada yang Simple, Tabulasi, Gaya Table, Berdasarkan Kategori, Berdasarkan Abjad, dan Accordion.

Kali ini saya akan share tentang membuat Daftar isi/Sitemap Blog Plus Gambar Thumbnail dari CB yang sudah lama dia posting, kali ini akan share Sitemap berupa daftar judul posting plus gambar thumbnail (image).

Daftar isi berupa judul dan gambar thumbnail ini memang cocok buat blog galeri foto, vidio, atau toko online sehingga terlihat lebih menarik. Model daftar isi berikut ini mirip daftar isi plus gambar thumbnail dan ringkasan yang sudah di share/dibagikan oleh CB sebelumnya.

Cara Membuat Halaman Daftar Isi Blog Plus Thumbnail Image

1. Buat halaman baru: Pages > New Page
2. Isi kolom judul dengan Sitemap, Daftar isi, atau Indeks
3. Klik mode HTML (samping Compose)
4. Copy & Paste kode di bawah ini

<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. Publish

Catatan:
- Saya sarankan masih tetap mode HTML untuk mencegah terjadinya error.

Daftatr isi (Sitemap) Blog Plus Gambar Thumbnail sudah ada di blog anda. Silakan anda pasang linknya di menu Navigasi anda.

Daftar Isi Label Tertentu

Kode di atas menampilkan judul posting plus gambar thumbnail dari semua label atau kategori. Jika ingin menampilkan daftar isi posting dari label tertentu, maka kodenya sebagai berikut:

 <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/-/Label%20Name?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>

Catatan:
- Ganti Label%20Name dengan Label pilihan anda.
  Contoh: Tips%20Blogging, Tips%20SEO.
- Jika nama labelnya cuma satu kata, maka penulisannya Label saja, tanpa %20
  Contoh: Blogging, Tutorial.

Terima kasih telah membaca artikel yang saya posting hari ini, semoga dapat bermanfaat bagi kita semua. Jika ada saran dari anda silahkan barbagi pada saya, nantinya saya akan share kembali ^_^. Demikian Membuat Daftar Isi (Sitemap) Blog Plus Gambar Thumbnail. Silahkan anda Share dan Like FP kami untuk berkembangnya blog kami :D.