Cara Membuat Daftar Isi Otomatis Dengan Gambar Thumbnail | Zein Komputer Solutions

Home » Tutorial » Cara Membuat Daftar Isi Otomatis Dengan Gambar Thumbnail

Cara Membuat Daftar Isi Otomatis Dengan Gambar Thumbnail

Mempercantik blog merupakan kesenangan yang luar biasa bagi para pemula blogger, apalagi bisa di sesuaikan dengan keinginan kita, dari segi warna dan background. Nah kali ini ZC Solutions mau kasih tau Cara Membuat Daftar Isi Otomatis Dengan Gambar Thumbnail nah jika kalian belum tahu apa itu sitemap. Sitemap itu fungsinya adalah agar search engine seperti Google, Yahoo, Bing, dsb dapat mendeteksi adanya update pada situs atau blog pribadi kita. Jika sudah terdeteksi adanya update maka Google akan segera mengindex blog.

kali ini kita akan membahas "Cara Membuat Sitemap Secara Otomatis Dengan Gambar Thumbnail" pada blog. yaitu membahas bagaimana cara membuat sitemap atau daftar isi secara otomatis untuk pengunjung situs kita (bukan untuk robot Google), dalam tutorial kali ini Blogger adalah platfrom yang kita gunakan, Blogger memberikan fasilitas untuk membuat sitemap dengan begitu mudah, begitu cepat, dan serba otomatis.

DemoLangsung pada tutorialnya

Login dasboard blogger
Buat halaman baru
Copy script dibawah ini dan simpan di satu halaman agan

CSS

<style type="text/css"> #toc-outer {   font:normal 11px/14px Arial,Sans-Serif;   color:#FFCC00;   text-align:left;   margin:0px auto;   border:2px solid #222;   padding:15px;   background-color:#2da6d9;   -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.6);   -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.6);   box-shadow:0px 1px 4px rgba(0,0,0,0.6); } #loadingscript {   background-color:#70736E;   background-image:-webkit-linear-gradient(top, #196b8d, #2da6d9);   background-image:-moz-linear-gradient(top, #196b8d, #2da6d9);   background-image:-ms-linear-gradient(top, #196b8d, #2da6d9);   background-image:-o-linear-gradient(top, #196b8d, #2da6d9);   background-image:linear-gradient(top, #196b8d, #2da6d9);   padding:10px;   font:bold 20px Georgia,Serif;   color:black;   height:400px;   text-indent:-9999px;   -webkit-box-shadow:inset 0px 0px 0px 5px #222;   -moz-box-shadow:inset 0px 0px 0px 5px #222;   box-shadow:inset 0px 0px 0px 5px #222; } .itemposts {   margin:0px auto 5px;   height:auto;   background-color:#474645;   overflow:hidden;   display:block; } .itemposts h6 {   margin:0px auto 2px;   font:bold 12px/14px Arial,Sans-Serif;   background-color:#70736E;   background-image:-webkit-linear-gradient(top, #196b8d, #2da6d9);   background-image:-moz-linear-gradient(top, #196b8d, #2da6d9);   background-image:-ms-linear-gradient(top, #196b8d, #2da6d9);   background-image:-o-linear-gradient(top, #196b8d, #2da6d9);   background-image:linear-gradient(top, #196b8d, #2da6d9);   padding:10px 15px;   text-transform:none;   color:white; } .itemposts h6 a {   color:white;   text-decoration:none;   text-shadow:0px 1px 0px rgba(0,0,0,0.3); } .itemposts img {   float:left;   height:72px;   width:72px;   margin:2px 10px 2px 0px;   -webkit-box-shadow:none;   -moz-box-shadow:none;   box-shadow:none;   background-color:##323331;   border:1px solid #dcdcdc;   padding:4px; } .itemposts .iteminside {   padding:10px;   background-color:#343434;   border-top:1px solid #e5e5e5;   -webkit-box-shadow:inset 0px 1px 0px white;   -moz-box-shadow:inset 0px 1px 0px white;   box-shadow:inset 0px 1px 0px white; } .itemposts .itemfoot {   clear:both;   border:1px solid #EAE7DB;   padding:5px 10px;   margin:10px 0px 0px;   background-color:#323331;   color:#fff;   overflow:hidden; } .itemposts .itemfoot a.itemrmore {   font-weight:bold;   color:#ffffff;   float:right;   text-decoration:none; } .itemposts .itemfoot a.itemrmore:hover {   color:#ffffff;   text-decoration:underline; } #itempager {   background-color:#f3f3f3;   background-image:-webkit-linear-gradient(top, #196b8d, #2da6d9);   background-image:-moz-linear-gradient(top, #196b8d, #2da6d9);   background-image:-ms-linear-gradient(top, #196b8d, #2da6d9);   background-image:-o-linear-gradient(top, #196b8d, #2da6d9);   background-image:linear-gradient(top, #196b8d, #2da6d9);   padding:30px 0px;   border-top:1px solid #E5E5E5;   -webkit-box-shadow:inset 0px 1px 0px white;   -moz-box-shadow:inset 0px 1px 0px white;   box-shadow:inset 0px 1px 0px white; } #pagination, #totalposts {   color:#999;   font:bold 10px Verdana,Arial,Sans-Serif;   padding:0px;   margin-bottom:10px;   text-align:center; } #pagination span, #pagination a {   border:1px solid #e5e5e5;   color:white;   display:inline;   margin:0 1px;   padding:2px 5px;   text-indent:0px;   background-color:#323331;   text-decoration:none; } #pagination span.actual, #pagination a:hover {   background:#6e6e6e;   background-image:-webkit-linear-gradient(top, #222222, #707070);   background-image:-moz-linear-gradient(top, #222222, #707070);   background-image:-ms-linear-gradient(top, #222222, #707070);   background-image:-o-linear-gradient(top, #222222, #707070);   background-image:linear-gradient(top, #222222, #707070); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',endColorstr='#f3f3f3') } #pagination span.hidden {   display:none; } </style>

JSCRIPT

<script type="text/javascript"> var showPostDate   = true,     showComments   = true,     idMode         = true,     sortByLabel    = false,     labelSorter    = "JQuery",     loadingText    = "Loading...",     totalPostLabel = "Jumlah posting:",     jumpPageLabel  = "Halaman",     commentsLabel  = "Komentar",     rmoreText      = "Read more &#9658;",     prevText       = "Preview",     nextText       = "Next",     siteUrl        = "http://namablog.blogspot.com", /*ganti dengan nama blog agan*/     postsperpage   = 5, /*jumlah postingan yang akan ditampilkan*/     numchars       = 350,     imgBlank       = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZkzgH_wICkBZtwvVDI18VuDp1MsWZKP6POpNySPjUDasHFZ_i4dHeqwAShuJFmAfNQeXM9QbG5x9g4soi9bbLdsWrwLZ0gzlsJ3oWbfVAowo-X5hs_YvH14n1NaSXkuUoM6toLpLYpBg/s1600/photo.png"; /*gambar postingan ketika postingan tidak memiliki gambar*/ /*Bisa diganti*/  </script> <script src="https://googledrive.com/host/0B6j3qmGl3sSvfnpZLW9WbC1JRXBUMVhRaEtMMWVOcTZxMmhRbmhoUmZXTGgydFAwd2lnY2s/table-kang-aby.js" type="text/javascript"> </script>

Selamat Berkreasi , dari segi warna bisa agan ganti dan di sesuaikan.

Di Tulis Oleh: Kang Unknown

Judul Cara Membuat Daftar Isi Otomatis Dengan Gambar Thumbnail
Jika ingin menyalin (copy-paste) artikel ini, sertakan link dibawah ini sebagai sumbernya :

<a href="https://zeinkomsolutions.blogspot.com/2015/06/cara-membuat-daftar-isi-otomatis-dengan.html" target="_blank">Cara Membuat Daftar Isi Otomatis Dengan Gambar Thumbnail</a>

ZC