Membuat 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 Page2. 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&alt=json-in-script&callback=recent&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!
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&alt=json-in-script&callback=recent&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&alt=json-in-script&callback=recent&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>
<script style='text/javascript'>
var numposts = 999;
var showpostthumbnails = true;
var displayseparator = true;
</script>
<script src="/feeds/posts/default/-/Label%20Name?orderby=published&alt=json-in-script&callback=recent&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).*
Labels: Desain Blog
<< Home