Membuat Daftar Isi (Sitemap) Blog Plus Gambar Thumbnail

cara Dan Teknik 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 sehubungan Daftar Isi (Sitemap) Blog plus Gambar Thumbnail, adalah berupa daftar judul posting plus gambar thumbnail (image).

Demonya dapat 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 unik dan menarik. Kodenya dishare Techlo Soft.

Model daftar isi berikut ini seolah-olah daftar isi plus gambar thumnail dan ringkasan yang sudah dibagi sebelumnya.

cara Dan Teknik 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 isyarat 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 Dan Teknik 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><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).*

Sumber http://www.contohblog.com/

Artikel Terkait

Membuat Daftar Isi (Sitemap) Blog Plus Gambar Thumbnail

4/ 5

Oleh Unknown

Unknown Agustus 04, 2016