Home » » Membuat Daftar Isi (Sitemap) Blog plus Gambar Thumbnail

Membuat Daftar Isi (Sitemap) Blog plus Gambar Thumbnail

Membuat Daftar Isi (Sitemap) Blog plus Gambar Thumbnail
Cara Membuat Halaman Daftar Isi (Sitemap) Blog plus Gambar Thumbnail

DAFTAR Isi, Table of Content, atau halaman Sitemap blog biasanya berupa daftar link posting saja. Variasi desain sitemap atau daftar isi blog ada yang Simple, Tabulasi, Gaya Tabel, Berdasatkan Kategori, Berdasarkan Abjad, dan Accordion.

Kali ini CB share tentang Daftar Isi (Sitemap) Blog plus Gambar Thumbnail, yaitu berupa daftar judul posting plus gambar thumbnail (image). Demonya bisa dilihat di Sitemap CB Blog Foto.

Daftar isi berupa judul dan gambar thumbnail ini memang cocok buat blog galeri foto, video, atau toko online sehingga lebih menarik. Kodenya dishare Techlo Soft.

Model daftar isi berikut ini mirip daftar isi plus gambar thumnail dan ringkasan yang sudah dibagi 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 (kiri atas 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!

Daftar Isi (Sitemap) Blog plus Gambar Thumbnail sudah ada di blog Anda. Silakan pasang linknya di menu. Baca: Cara Memasang Link Halaman Statis dan Label di Nabigasi Menu Blog.

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>

Ganti Label%20Name dengan Label pilihan Anda.  Misal: Blogging%20Tips, Tips%20SEO. Jika nama labelnya cuma satu kata, maka penulisannya Label saja, tanpa %20.
 
Demikian Membuat Daftar Isi (Sitemap) Blog plus Gambar Thumbnail. Good Luck & Happy Blogging! (http://www.contohblog.com).*

Thanks for reading & sharing Membuat Daftar Isi (Sitemap) Blog plus Gambar Thumbnail

Previous
« Prev Post

1 comments:

Comment Page:
  1. Keren mas, ini yang saya cari. Gak hrus edit HTML segala.

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox