Cara Menciptakan Daftar Isi Sitemap Di Blogspot Blogger

Cara membuat daftar isi di blogspot blogger - Sitemap dan daftar isi Halo teman ngeblog, apa kabar. Semoga kabarnya baik dan sehat semua yah. Pada kesempatan kali ini aku akan bagikan kepada teman cara membuat daftar isi di blog yang keren dan mantul. Tapi sebelum membuatnya, diharapkan teman sudah mengerti membuat label pada blog. Baca Cara Membuat Halaman Privacy Policy di blog/website

Apa itu daftar isi bang?

 Daftar isi ialah kumpulan judul semua materi dari awal sampai akhir.

Tenang aja sobat, daftar isi yang kita buat ini ringan dan keren kok. Dan untuk membuatnya yuk ikuti panduan langkah-langkah dibawah ini. 
  

1. Cara Membuat Efek Loading Daftar Isinya

#1. Masuk ke blogger.
#2. Pilih hidangan tema.
#3. Lalu pilih edit html.

#4. Kode ini menggunakan imbas loading dari fontawesome. Untuk membuatnya tambahkan isyarat di bawah ini sebelum </head> pada template editor.

<script type='text/javascript'>//<![CDATA[function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");//]]></script>  

2. Cara Membuat Daftar Isinya Di Blogspot Blogger

#1. Masuk ke blogger.
#2. Pilih hidangan halaman.
#3. Lalu pilih hidangan halaman baru.

 #4. Setelah itu masuk ke tab HTML.

#5. Masukkan judul > lalu tambahkan isyarat di bawah ini ke form kosong.

<div id="recentpostsae"></div><div id="recentpostnavfeed"></div><style scoped="" type="text/css">*{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-box-sizing:border-box}a,a:link,a:visited{text-decoration:none;transition:all .3s}button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-space:normal;width:auto;border-radius:3px;outline:0}button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.button:focus,.button:hover{color:#fff}#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}#recentpostsae{margin:0}#recentpostsae .recentpostel{width:48.9%;background:#fff;display:inline-block;margin:0 20px 10px 0;padding:15px;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:0;margin-right:13px;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}#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/AVvXsEi6-FQRHLiZYlhzIFIt3aYMWqlfs2fwF9RXhMQ5awquKxZCDLwv61GP5l3EmdUzJIaMzkIH4RSWOfEh5MNKhX5NwNamzHQrLXQ8h_BaPjz9EwK3XV0nVUfr_vNw0GsY3A02bkZj00HP2dnb/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 = 18;var startfeed = 0;var urlblog = "kickandre.xyz";var charac = 0;var urlprevious, urlnext;function arlinafeed(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/AVvXsEj-6tU2RLiAwVcylEZFo7OYhTYMxD0cOkFQ1p1NpQzIFLfQ9rswocLHxbe_3Uac3LE59rKEOOx2e2qCi889Z8g6MCnLEb6JGy7U-HYW-umgR8VXv_W1t5ab-o1kyM25r-DNhR62Vm1WyOFn/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>"+arlinafeed(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/-/Smartphone"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};//]]></script>

#6. Jika sudah selesai, teman pilih publikasikan untuk menerapkan hasilnya, atau pilih pratinjau jikalau teman ingin melihat hasilnya.

#7. Selesai. 
 
Dan jikalau teman ingin menampilkan halaman daftar isi tadi menjadi beranda atau home, edit isyarat daftar isi tadi menjadi menyerupai ini.

/feeds/posts/default

#8. Selanjutnya klik tombol publikasikan.
#9. Maka kesudahannya menyerupai gambar dibawah ini > selesai.

Nah, itulah cara membuat daftar isi di blogspot blogger. Semoga tutorial kali ini bermanfaat dan ada faedahnya buat teman semua. Terima kasih. Salam damai. Dan sampai jumpa dipertemuan berikutnya hehehe.

Share this post