Membuat Daftar Isi (Sitemap) Blog plus Gambar Thumbnail - Hallo guys,mimin mau share nih Tutorial Blog di Blogrenanda, Pada sharing Tutorial Blog kali ini yang berjudul Membuat Daftar Isi (Sitemap) Blog plus Gambar Thumbnail, saya telah menyediakan Tutorial Blog lengkap seperti Membuat Daftar Isi (Sitemap) Blog plus Gambar Thumbnail . mudah-mudahan isi postingan tutorial yang mimin tulis ini dapat anda pahami. okelah, ini dia tutorialnya.

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).*

Demikianlah Artikel Membuat Daftar Isi (Sitemap) Blog plus Gambar Thumbnail

Sekian Tutorial dari Blogrenanda Membuat Daftar Isi (Sitemap) Blog plus Gambar Thumbnail, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan dari BlogRenanda.

Membuat Daftar Isi (Sitemap) Blog plus Gambar Thumbnail

Anda sedang membaca artikel Membuat Daftar Isi (Sitemap) Blog plus Gambar Thumbnail dan artikel ini url permalinknya adalah https://blogrenanda.blogspot.com/2016/08/membuat-daftar-isi-sitemap-blog-plus.html Semoga artikel ini bisa bermanfaat.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: