Cara Membuat Daftar Isi Blog Keren Model Grid di Blogspot

Daftar isi blog merupakan sesuatu yang mendeskripsikan dan memuat tentang keseluruhan isi dan data-data, serta halaman yang ada dalam situs atau blog yang berfungsi memudahkan pengunjung untuk mengetahui isi dari keseluruhan blog. Menu statis ini dikenal juga dengan nama Peta Situs atau yang lebih kerennya disebut Sitemap.

Konon katanya, jenis blog yang paling disukai oleh mesin pencari google adalah blog yang memiliki peta situs. Sitemap merupakan salah satu elemen penting untuk mengoptimasi suatu situs, bisa dikatakan sitemap merupakan bagian dari SEO Off Page.

Dari uraian diatas, dapat disimpulkan bahwa Sitemap memiliki banyak manfaat untuk blog, yakni sebagai berikut :

1. Cepat di Index Mesin Pencari
   Dengan membuat Sitemap memungkinkan semua postingan yang ada di blog kamu di index oleh bot pencarian.
2. Meningkatkan Pengunjung
   Apabila mesin pencari merayapi situs blog kamu dengan lancar, kemungkinan postingan kamu akan mendapatkan peringkat tinggi di hasil pencarian dan akan memiliki lebih banyak pengunjung.
3. Mempermudah Pengunjung
   Selain mempermudah bot pencari merayapi psotingan blog, pengunjung juga akan mudah melihat postingan apa saja yang ada di blog kamu.

Selain dapat memperindah blog Anda, ternyata sitemap banyak manfaatnya. Keren kan?

Cara untuk membuat Daftar Isi blog, pernah diposting pada Artikel : Membuat Daftar Isi Blog Otomatis Simpel dan Keren. Fungsinya sama, tapi style atau tampilannya yang beda. Di postingan ini tampilannya bergaya Grid seperti blog Arlina Design

Cara Membuat Sitemap Grid di Blog

Sitemap model grid ini, dilengkapi navigasi Beranda (Home), Navigasi Berikutnya (Next) dan Navigasi Sebelumnya (previous). Dilengkapi pula thumbnail foto artikel dan Judul postingan.

Langkah-langkahnya adalah sebagai berikut :

1. Login Blogger;
2. Pilih menu Halaman dan buat halaman baru;
3. Copy semua kode di bawah ini di halaman postingan dengan mode tulis HTML (bukan Compose);

<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>
<style scoped type="text/css">
#content,.single-posts article{background:transparent;box-shadow:none;padding:0}
.single-posts .entry-title{margin:10px auto 30px auto;text-align:center;background:rgba(0,0,0,0.08);color:#747d8c;display:table;padding:0 20px;border-radius:99em;font-size:16px}
.post-details,.breadcrumbs{display:none}
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
#recentpostsae .recentpostel{width:44.6%;background:#f2f2f2;display:inline-block;margin:0 10px 10px 0;padding:10px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostsae .recentpostel:nth-child(even){margin:0 0 10px 0}
#recentpostsae .recentpostel img{background:#ecf0f1;padding:0;float:left;margin-right:13px !important;width:72px}
#recentpostsae .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000}
#recentpostsae .recentpostel:hover{background-color:#fefefe;box-shadow:none;border:1px solid #ddd}
#recentpostsae .recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{letter-spacing:-10px;text-align:center;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYOrRyZ36MItqne3S26gCB4XBsc94ltHvThzIt6osVB-jy86AyvZCyCr2GUV-Xf_fng3cjYemEtnrtYKZnlKGQSjVZD2e6Y5sdgEQRToHfXUh-cWfjl0YsYNHKK3le38bJfZYIed4vGWxt/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px}
#recentpostnavfeed{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto}
#recentpostnavfeed a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:0;cursor:pointer;transition:all .3s}
#recentpostnavfeed .next,#recentpostnavfeed .previous{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;padding:10px 16px;font-size:1rem;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed .next{float:right;margin:0 0 0 10px}
#recentpostnavfeed .previous{float:left;margin:0 10px 0 0}
#recentpostnavfeed .home{text-align:center;display:table;background:#fff;color:#222;font-size:1rem;float:none;padding:10px 16px;border-radius:99em;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:#ccc}
#recentpostnavfeed i{font-family:fontawesome;font-style:normal}
#recentpostnavfeed .next:hover,#recentpostnavfeed .previous:hover,#recentpostnavfeed .home:hover{background:#fff;color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
@media screen and (max-width:993px){#recentpostsae .recentpostel{width:100%;margin:0 0 10px 0}}
</style>

<script type='text/javascript'>
//<![CDATA[
var numfeed = 10;
var startfeed = 0;
var urlblog = "URL BLOG";
var charac = 0;
var urlprevious, urlnext;
function kodebloggerkufeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZwDCjTn0xxmt6KbOrLPb-nmPKromibp-0wXKNxR4WBscsZ6gIyUOtT4IOgAwQlAjMuUQyIiBWU7J12UWJPMOoVHGx5Zns3smEKWdNzb3x2-8PRE86D7_8ld1EvXIy7aakzctf8TOGTa1-/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+kodebloggerkufeed(i,charac)+"</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'><i class='fas fa-arrow-left'></i></a>":"<span class='noactived previous'><i class='fas fa-arrow-left'></i></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'><i class='fas fa-arrow-right'></i></a>":"<span class='noactived next'><i class='fas fa-arrow-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='fas fa-home'></i></a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","kodebloggerkulabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("kodebloggerkulabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>




4. Ubah URL BLOG (warna merah) dengan alamat blog Anda;
5. Jika ingin memodifikasi atau menyetel lebar Sitemap, ubah di bagian kode ini :
   
   

   #recentpostsae .recentpostel{width:44.6%;background:#f2f2f2;display:inline-block;margin:0 10px 10px 0;padding:10px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
   

   
   
6. Setelah semuanya sudah sesuai, lalu publikasikan;
7. Selesai

Tampilan dari Daftar isi atau Sitemap ini dapat Anda lihat pada tombol Demo dibawah :




Cara membuat daftar isi blog yang Keren dengan Model Grid di Blogspot ternyata sangatlah mudah. Semoga Bermanfaat