LAPAKLAMA.COM » Cara Membuat Daftar Isi Blogger Dengan Berbagai Macam model
Sitemap atau daftar isi yakni suatu tools yang akan memudahkan pengunjung dalam melihat semua isi konten yang ada didalam blog kita menurut label/kategori. Sama ibarat buku, blog juga harus mempunyai sebuah halaman daftar isi agar pengunjung dapat menjelajahi konten kita dengan mudah.
Sitemap/daftar isi blogger berfungsi sebagaimana peta yang akan menuntun seseorang dalam menemukan apa yang sedang mereka cari menurut label atau kategori.
Cara Membuat Daftar Isi Blogger SEO Friendly
Di artikel ini aku akan membagikan 6 bentuk daftar isi yang dapat kau pilih dan kau terapkan didalam blog.
Sebelum aku memperlihatkan code pembuat daftar isi di blog,. pastikan kalian sudah tahu bagaimana cara menggunakannya. Caranya cukup gampang kau hanya perlu menciptakan sebuah halaman statis gres dan memberinama sebagai Sitemap atau Daftar isi dan merubah mode penulisan dari composser ke HTML.
Baca Juga: Membuat Daftar Isi Blog WordPress Secara Otomatis
Model Daftar Isi Blogger Keren dan SEO Friendly
Oke pribadi saja simak yuk 6 Model Membuat Daftar Isi Blogger SEO Friendly.
1. Daftar Isi Berdasarkan Label Dengan Menu Dropdown
Masuk dihalaman dasboard blogger, Kemudian pilih sajian Tema kemudian Edit HTML dan cari kode </style>
Tambahkan CSS dibawah ini sempurna DIATAS/SEBELUM instruksi tersebut.
/* Blogger Sitemap Dropdown */
#sitemap1 {background-color:#fff; color:#1d2129; font-weight:400; border:1px solid #ccc;}
#sitemap1 .loading {padding:10px 15px; color:#666;}
#sitemap1 .judul {background-color:#008c5f; color:#fff; font-size:125%; font-weight:600; padding:15px; cursor:pointer; border-bottom:1px solid #fff; letter-spacing:1px; transition:all .3s ease;}
#sitemap1 .judul:last-child {border-bottom:0px;}
#sitemap1 .judul:hover {background-color:#1d2129;}
#sitemap1 .judul:after {content:''; width:0px; height:0px; position:relative; float:right; top:10px; right:10px; border:5px solid transparent; border-color:#fff transparent transparent; transition:all .3s ease}
#sitemap1 .judul.aktif {background-color:#1d2129;}
#sitemap1 .judul.aktif:after {border-color:#fff transparent transparent; top:5px; -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -ms-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg)}
#sitemap1 .konten ol, #sitemap1 .konten ol li {list-style:none; list-style-type:none; margin:0px; padding:0px; font-weight:400;}
#sitemap1 .konten ol li:nth-of-type(even) {background-color:#e9e9e9;}
#sitemap1 .konten ol li:nth-of-type(odd) {background-color:#fff}
#sitemap1 .konten ol li a {text-decoration:none; padding:10px 15px; display:block; color:#666; line-height:1.5em; transition:all .3s ease;}
#sitemap1 .konten ol li a:hover {color:#000;}
Dan pastikan kau sudah memasang jQuery terlebih dahulu.
Kemudian buat sebuah halaman statis baru, copy instruksi dibawah ini dan letakan dihalaman statis tersebut dengan mode penulisan HTML.
<div id="sitemap1"><div class="loading">Loading....</div></div>
<script> //<![CDATA[
/* Blogger Sitemap Dropdown */
var toc_config = {containerId:'sitemap1', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemap1',delayLoading: 0};
window.onload = function(){
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"judul\">'+n[g]+'</div>',l+='<div class=\"konten\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div>'}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://www.igniel.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
}
//]]> </script>
Publikasikan.
2. Daftar Isi Dengan Judul, Tanggal, dan Label
Masih sama dengan cara pertama, Buat sebuah halaman statis baru, kemudian tambahkan instruksi dibawah ini dalam mode penulisan HTML. kemudian Publikasikan.
<div id="sitemap2">Loading....</div>
<script> //<![CDATA[
/* Blogger Sitemap with Title, Label, and Date */
var postTitle = postUrl = postDate = postSum = postLabels = new Array(), sortBy = 'datenewest', tocLoaded = false, numChars = 250, postFilter = '', tocdiv = document.getElementById('sitemap2'), totalEntires = 0, totalPosts = 0;
function sitemap2(t){function e(){if("entry"in t.feed){var e=t.feed.entry.length;if(totalEntires+=e,totalPosts=t.feed.openSearch$totalResults.$t,totalPosts>totalEntires){var s=document.createElement("script");s.type="text/j4vascript",startindex=totalEntires+1,s.setAttribute("src","/feeds/posts/summary?start-index="+startindex+"&max-results=9999&alt=json-in-script&callback=sitemap2"),tocdiv.appendChild(s)}for(var o=0;e>o;o++){for(var a,l=t.feed.entry[o],r=l.title.$t,i=l.published.$t.substring(0,10),n=0;n<l.link.length;n++)if("alternate"==l.link[n].rel){a=l.link[n].href;break}if("content"in l)var p=l.content.$t;else if("summary"in l)var p=l.summary.$t;else var p="";var c=/<\S[^>]*>/g;if(p=p.replace(c,""),p.length>numChars){p=p.substring(0,numChars);var d=p.lastIndexOf(" ");p=p.substring(0,d)+"..."}var f="";if("category"in l){for(var n=0;n<l.category.length;n++)f+="<a href=\"j4vascript:filterPosts('"+l.category[n].term+"');\" title=\"Click here to select all posts with label '"+l.category[n].term+"'\">"+l.category[n].term+"</a>, ";var u=f.lastIndexOf(",");-1!=u&&(f=f.substring(0,u))}postTitle.push(r),postDate.push(i),postUrl.push(a),postSum.push(p),postLabels.push(f)}}totalEntires==totalPosts&&(tocLoaded=!0,showToc())}e(),sortPosts(sortBy),tocLoaded=!0}function filterPosts(t){postFilter=t,displayToc(postFilter)}function allPosts(){postFilter="",displayToc(postFilter)}function sortPosts(t){function e(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s;var s=postDate[t];postDate[t]=postDate[e],postDate[e]=s;var s=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=s;var s=postSum[t];postSum[t]=postSum[e],postSum[e]=s;var s=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=s}for(var s=0;s<postTitle.length-1;s++)for(var o=s+1;o<postTitle.length;o++)"titleasc"==t&&postTitle[s]>postTitle[o]&&e(s,o),"titledesc"==t&&postTitle[s]<postTitle[o]&&e(s,o),"dateoldest"==t&&postDate[s]>postDate[o]&&e(s,o),"datenewest"==t&&postDate[s]<postDate[o]&&e(s,o)}function displayToc(t){var e=0,s="",o="Judul",a="Klik untuk mengurutkan menurut judul",l="Tanggal",r="Klik untuk mengurutkan menurut tanggal",i="Label",n="";"titleasc"==sortBy&&(a+=" (descending)",r+=" (newest first)"),"titledesc"==sortBy&&(a+=" (ascending)",r+=" (newest first)"),"dateoldest"==sortBy&&(a+=" (ascending)",r+=" (newest first)"),"datenewest"==sortBy&&(a+=" (ascending)",r+=" (oldest first)"),""!=postFilter&&(n="Klik untuk melihat semua postingan"),s+='<table>',s+="<thead>",s+="<tr>",s+="<th>",s+='<a href="j4vascript:toggleTitleSort();" title="'+a+'">'+o+"</a>",s+="</th>",s+="<th>",s+='<a href="j4vascript:toggleDateSort();" title="'+r+'">'+l+"</a>",s+="</th>",s+="<th>",s+='<a href="j4vascript:allPosts();" title="'+n+'">'+i+"</a>",s+="</th>",s+="</tr>",s+="</thead>",s+="<tbody>";for(var p=0;p<postTitle.length;p++)""==t?(s+='<tr><td><a href="'+postUrl[p]+'" title="'+postSum[p]+'">'+postTitle[p]+"</a></td><td>"+postDate[p]+"</td><td>"+postLabels[p]+"</td></tr>",e++):(z=postLabels[p].lastIndexOf(t),-1!=z&&(s+='<tr><td><a href="'+postUrl[p]+'" title="'+postSum[p]+'">'+postTitle[p]+"</a></td><td>"+postDate[p]+"</td><td>"+postLabels[p]+"</td></tr>",e++));if(s+="</tbody>",s+="</table>",e==postTitle.length)var c='<div class="judul">Total Post: '+postTitle.length+"</div>";else{var c='<div class="judul">Menampilkan '+e+" post berlabel '";c+=postFilter+"' dari "+postTitle.length+" total post.</div>"}tocdiv.innerHTML=c+s}function toggleTitleSort(){sortBy="titleasc"==sortBy?"titledesc":"titleasc",sortPosts(sortBy),displayToc(postFilter)} function toggleDateSort(){sortBy="datenewest"==sortBy?"dateoldest":"datenewest",sortPosts(sortBy),displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);document.getElementById("toclink")}else alert("Just wait. Sitemap is loading....")} function hideToc(){var t=document.getElementById("toc");t.innerHTML="";var e=document.getElementById("toclink");e.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">» Show Sitemap</a>'}var postTitle=new Array,postUrl=new Array,postDate=new Array,postSum=new Array,postLabels=new Array,sortBy="datenewest",tocLoaded=!1,numChars=250,postFilter="",tocdiv=document.getElementById("sitemap2"),totalEntires=0,totalPosts=0;
//]]> </script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=sitemap2"></script>
Untuk menciptakan sebuah halaman daftar isi tersebut terlihat anggun kau perlu menambahkan CSS dibawah ini. Caranya masuk kemeu Tema » Edit HTML kemudian tambahkan instruksi dibawah ini diatas kode </style> atau ]]></b:skin>
/* Blogger Sitemap with Title, Label, and Date */
#sitemap2 .judul {font-size:150%; background-color:#2196f3; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:20px;}
#sitemap2 table {background-color:#fff; margin:0px; padding:0px; border:0px; border-collapse:collapse; border-spacing:0px; table-layout:fixed; width:100%;}
#sitemap2 table a, #sitemap2 table a:hover {text-decoration:none;}
#sitemap2 table thead {background-color:#008c5f; text-transform:uppercase;}
#sitemap2 table thead a {color:#fff; display:block;}
#sitemap2 table thead a:after {content:''; width:17px; height:17px; display:inline-block; float:right; margin:5px 3px 0px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%3E%3Cpath d='M11 7h-6l3-4z' fill='%23fff'/%3E%3Cpath d='M5 9h6l-3 4z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;}
#sitemap2 table thead tr th {font-weight:600; padding:10px; text-align:center; border:0px; margin:0px; line-height:2em;}
#sitemap2 table thead tr th:nth-child(2) {border-left:1px solid #fff; border-right:1px solid #fff; width:calc(100px + 20px);}
#sitemap2 table tbody tr {border:1px solid #ccc;}
#sitemap2 table tbody tr:first-child {border-top:0px;}
#sitemap2 table tbody tr:nth-of-type(even) {background-color:#e9e9e9;}
#sitemap2 table tbody tr:nth-of-type(odd) {background-color:#fff}
#sitemap2 table tbody tr td {font-weight:400; padding:10px; color:#666; line-height:1.5em;}
#sitemap2 table tbody tr td a {color:#666;transition:all .3s ease;}
#sitemap2 table tbody tr td a:hover {color:#000;}
#sitemap2 table tbody tr td:nth-child(2) {white-space:nowrap; border-left:1px solid #ccc; border-right:1px solid #ccc; text-align:center;}
#sitemap2 table tbody tr td:first-child, #sitemap2 table thead tr th:first-child {width:67%;}
#sitemap2 table tbody tr td:nth-child(2), #sitemap2 table thead tr th:nth-child(2) {width:120px;}
#sitemap2 table tbody tr td:last-child, #sitemap2 table thead tr th:last-child {width:calc(33% - 120px);}
@media screen and (max-width:480px){
#sitemap2 table tbody tr td, #sitemap2 table thead tr th {width:100% !important; word-break:break-word;}
}
3. Daftar Isi Blog Hanya Judul Saja
Sitemap ini berbeda dengan ke-2 sitemap blog diatas, Sitemap/daftar isi ini hanya menampilkan Judul saja sehingga terlihat simplel dan elegan. daftar isi diurutkan dari postingan terbaru hingga terlama.
Masuk ke sajian Tema » Edit HTML tambahkan instruksi dibawah ini sempurna diatas kode </style> atau ]]></b:skin>
/* Blogger Sitemap Simple Title Only */
#sitemap3 .judul {font-size:150%; background-color:#008c5f; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap3 a {color:#666; text-decoration:none; transition:all .3s ease;}
#sitemap3 a:hover {color:#000;}
#sitemap3 ol {margin:0px; padding:0px;}
#sitemap3 ol li {color:#666; font-weight:400; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}
Kemudian tambahkan instruksi dibawah ini dihalaman statis daftar isi blog kau atau buat halaman statis baru.
<div id="sitemap3">Loading....</div>
<script> //<![CDATA[
/* Blogger Sitemap Simple Title Only */
var start=1;var max=150;var sitemap3Arr=new Array();function runSitemap3(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap3&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap3(root){var elem=document.getElementById('sitemap3');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemap3Arr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runSitemap3()} else{var print='';for(var x=0;x<sitemap3Arr.length;x++){print+='<li><a href=\"'+sitemap3Arr[x].url+'\" title=\"'+sitemap3Arr[x].judul+'\">'+sitemap3Arr[x].judul+'</a></li>'}
elem.innerHTML='<div class=\"judul\">Total Post: '+sitemap3Arr.length+'</div><ol>'+print+'</ol>'}}} runSitemap3();
//]]> </script>
4. Daftar Isi Blog Berdasarkan Abjad & Hanya Judul
Sitemap/daftar isi yang akan kita buat ini juga tidak kalah sederhananya dengan yang ke-3 hanya saja didalam daftar isi ini akan diurutkan menurut Alfabetis atau menurut Apjad.
Sitemap ibarat ini sangat bagus kalau dipakai di blog d0wnl0ad ibarat Musik, Film, Novel, Anime Dll.
Oke caranya:
Masuk kedasboard blogger pilih menu Teman » Edit HTML
Simpan instruksi CSS dibawah ini sempurna DIATAS kode </style> atau ]]></b:skin>
/* Blogger Sitemap Simple Title Only Sort By Title (Alphabetically) */
#sitemap4 .judul {font-size:150%; background-color:#008c5f; color:#fff; font-weight:500; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap4 a {color:#666; text-decoration:none; transition:all .3s ease;}
#sitemap4 a:hover {color:#000;}
#sitemap4 ol {margin:0px; padding:0px;}
#sitemap4 ol li {color:#666; font-weight:300; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}
Kemudian buat halaman statis gres atau edit halaman daftar isi usang blog kamu. dan ganti/tambahkan instruksi dibawah ini dihalaman tersebut dengan mode penulisan HTML.
<div id="sitemap4">Loading....</div>
<script> //<![CDATA[
/* Blogger Sitemap Simple Title Only Sort By Title (Alphabetically) */
var start=1;var max=150;var sitemap4Arr=new Array();function runSitemap4(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap4&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap4(root){var elem=document.getElementById('sitemap4');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemap4Arr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runSitemap4()} else{var print='',a=sitemap4Arr.sort(function(a,b){return a.judul>b.judul?1:-1});for(var x=0;x<a.length;x++){print+='<li><a href=\"'+a[x].url+'\" title=\"'+a[x].judul+'\">'+a[x].judul+'</a></li>'} elem.innerHTML='<div class=\"judul\">Total Post: '+a.length+'</div><ol>'+print+'</ol>'}}} runSitemap4();
//]]> </script>
Daftar isi ini sangat ringan sebab 100% murni memakai JavaScript saja tanpa ada jQuery sama sekali.
5. Daftar Isi Blog Dengan Navigasi Per Abjad/Huruf
Daftar isi yang akan kita buat kelima ini lebih keren dari pada ke-4daftar isi diatas, Karena daftar isi ini akan menampilkan sebuah Navigasi Per Abjad Artikel blog kita.
Masuk ke halaman Edit HTML blogger, kemudian tambahkan instruksi CSS dibawa ini DIATAS kode </style>atau]]></b:skin>
/* Blogger Sitemap Alphabetically with Letter Heading by igniel.com */
#sitemap5 {font-size:14px; font-weight:400}
#sitemap5 .judul {font-size:150%; background-color:#008c5f; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap5 a {color:#666; text-decoration:none; transition:all .3s ease;}
#sitemap5 a:hover {color:#000;}
#sitemap5 .isi .abjad {background-color:#2196f3; color:#fff; padding:10px 15px; font-size:110%; font-weight:600; text-transform:uppercase; position:relative;}
#sitemap5 .isi .abjad #top:before {content:''; width:12px; height:calc(100% - 20px); position:absolute; right:0px; top:0px; padding:10px; cursor:pointer; background:rgba(0,0,0,.2) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15,20H9V12H4.16L12,4.16L19.84,12H15V20Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat;}
#sitemap5 ol, #sitemap5 ol li {list-style-type:none;}
#sitemap5 .nav ol {margin:0px 0px 15px; padding:0px; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
#sitemap5 .nav ol li {background-color:#444; color:#fff; padding:7px 0px; cursor:pointer; margin:0px 5px 5px 0px; text-align:center; text-transform:uppercase; width:40px;}
#sitemap5 .nav ol li:last-child {margin-right:0px;}
#sitemap5 .isi ol {margin:0px 0px 20px; padding:0px; border:1px solid #ccc; border-top:0px;}
#sitemap5 .isi ol li {color:#666; margin:0px; padding:10px 15px; line-height:1.5em; -webkit-margin-start:0px !important;}
#sitemap5 .isi ol li:nth-of-type(even) {background-color:#e9e9e9;}
#sitemap5 .isi ol li:nth-of-type(odd) {background-color:#fff}
@media screen and (max-width:480px) {
#sitemap5 {font-size:13px;}
#sitemap5 .judul {padding:10px;}
#sitemap5 .isi .abjad {padding:7px 15px;}
}
@media screen and (max-width:360px) {
#sitemap5 {font-size:12px;}
#sitemap5 .judul {padding:10px;}
#sitemap5 .isi .abjad {padding:7px 12px;}
#sitemap5 .isi ol li {padding:7px 12px;}
}
Lalu buat sebuah halaman page gres dan beri nama Daftar isi atau Sitemap, kemudian pindah mode penulisan ke mode HTML dan isi dengan instruksi dibawah ini.
<div id="sitemap5">Loading....</div>
<script> //<![CDATA[
/* Blogger Sitemap Alphabetically with Letter Heading by igniel.com */
var scroll = 'smooth'; /* 'smooth' OR 'instant' */
/*
'smooth' for smooth scroll
OR
'instant' for quick scroll
*/
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('q a=["","\\f\\s\\i\\g\\o\\d","\\s\\i\\c\\b\\d\\c\\W\\e\\c\\x\\c\\k\\d","\\f\\i\\s","\\u\\J\\c\\c\\h\\f\\u\\o\\j\\f\\d\\f\\u\\f\\r\\x\\x\\b\\i\\G\\1V\\b\\e\\d\\v\\z\\f\\j\\k\\1n\\s\\b\\e\\e\\N\\b\\s\\1b\\v\\f\\g\\d\\c\\x\\b\\o\\K\\1n\\f\\d\\b\\i\\d\\Z\\g\\k\\h\\c\\1o\\v","\\1n\\x\\b\\1o\\Z\\i\\c\\f\\r\\e\\d\\f\\v","\\b\\o\\o\\c\\k\\h\\1J\\E\\g\\e\\h","\\N\\j\\h\\G","\\f\\g\\d\\c\\x\\b\\o\\K","\\1H\\c\\d\\W\\e\\c\\x\\c\\k\\d\\1K\\G\\1F\\h","\\g\\k\\k\\c\\i\\1X\\1i\\1Y\\1k","\\J\\c\\c\\h","\\e\\c\\k\\1H\\d\\E","\\c\\k\\d\\i\\G","\\1Q\\d","\\d\\g\\d\\e\\c","\\e\\g\\k\\1b","\\i\\c\\e","\\b\\e\\d\\c\\i\\k\\b\\d\\c","\\E\\i\\c\\J","\\o\\r\\f\\E","\\d\\j\\1k\\j\\1E\\c\\i\\1J\\b\\f\\c","\\s\\E\\b\\i\\1x\\d","\\z\\r\\h\\r\\e","\\g\\k\\h\\c\\1o\\2d\\J","\\r\\i\\e","\\f\\j\\i\\d","\\m\\h\\g\\w\\l\\s\\e\\b\\f\\f\\v\\p\\b\\N\\z\\b\\h\\p\\n\\m\\f\\o\\b\\k\\l\\h\\b\\d\\b\\Z\\w\\b\\e\\r\\c\\v\\p","\\p\\n","\\m\\u\\f\\o\\b\\k\\n\\m\\f\\o\\b\\k\\l\\g\\h\\v\\p\\d\\j\\o\\p\\l\\d\\g\\d\\e\\c\\v\\p\\1K\\b\\s\\1b\\l\\d\\j\\l\\1i\\j\\o\\p\\n\\m\\u\\f\\o\\b\\k\\n\\m\\u\\h\\g\\w\\n\\m\\j\\e\\n","\\m\\e\\g\\n\\m\\b\\l\\E\\i\\c\\J\\v\\p","\\p\\l\\d\\g\\d\\e\\c\\v\\p","\\m\\u\\b\\n\\m\\u\\e\\g\\n","\\m\\u\\j\\e\\n","\\m\\e\\g\\n","\\m\\u\\e\\g\\n","\\m\\h\\g\\w\\l\\s\\e\\b\\f\\f\\v\\p\\z\\r\\h\\r\\e\\p\\n\\1i\\j\\d\\b\\e\\l\\2h\\j\\f\\d\\2i\\l","\\m\\u\\h\\g\\w\\n\\m\\h\\g\\w\\l\\s\\e\\b\\f\\f\\v\\p\\k\\b\\w\\p\\n\\m\\j\\e\\n","\\m\\u\\j\\e\\n\\m\\u\\h\\g\\w\\n\\m\\h\\g\\w\\l\\s\\e\\b\\f\\f\\v\\p\\g\\f\\g\\p\\n","\\m\\u\\h\\g\\w\\n","\\s\\e\\g\\s\\1b","\\O\\f\\g\\d\\c\\x\\b\\o\\K\\l\\H\\g\\f\\g\\l\\H\\b\\N\\z\\b\\h\\l\\2j\\h\\b\\d\\b\\Z\\w\\b\\e\\r\\c\\v\\p","\\p\\2e","\\f\\d\\b\\i\\d","\\f\\s\\i\\j\\e\\e\\1F\\k\\d\\j\\2s\\g\\c\\1E","\\o\\b\\i\\c\\k\\d\\2t\\j\\h\\c","\\1w\\r\\c\\i\\G\\1t\\c\\e\\c\\s\\d\\j\\i","\\b\\h\\h\\W\\w\\c\\k\\d\\1k\\g\\f\\d\\c\\k\\c\\i","\\J\\j\\i\\W\\b\\s\\E","\\O\\f\\g\\d\\c\\x\\b\\o\\K\\l\\H\\k\\b\\w\\l\\j\\e\\l\\e\\g","\\1w\\r\\c\\i\\G\\1t\\c\\e\\c\\s\\d\\j\\i\\1x\\e\\e","\\O\\f\\g\\d\\c\\x\\b\\o\\K\\l\\H\\k\\b\\w","\\O\\f\\g\\d\\c\\x\\b\\o\\K\\l\\H\\g\\f\\g\\l\\H\\b\\N\\z\\b\\h\\l\\O\\d\\j\\o"];q 1f=1,V=2c,1a=1l 1h(),Q=1l 1h(),1p=1l 1h(),1j=a[0],T=a[0],1q=a[0];B 1g(){q 1e=D[a[2]](a[1]);1e[a[3]]=a[4]+1f+a[5]+V;D[a[7]][a[6]](1e)}B 2f(1B){q Y=D[a[9]](a[8]);F(!Y){1L};Y[a[10]]=a[0];q S=1B[a[11]];F(S[a[13]][a[12]]>0){I(q U=0;U<S[a[13]][a[12]];U++){q P=S[a[13]][U];q 1d=P[a[15]][a[14]];I(q M=0;M<P[a[16]][a[12]];M++){F(P[a[16]][M][a[17]]==a[18]){q 1c=P[a[16]][M][a[19]];F(1c&&1c[a[12]]>0&&1d&&1d[a[12]]>0){1a[a[20]]({"\\r\\i\\e":1c,"\\z\\r\\h\\r\\e":1d})};2k}}};F(S[a[13]][a[12]]>=V){1f+=V;1g()}1I{I(q t=1a,A=0;A<t[a[12]];A++){q R=t[A][a[23]][a[22]](0)[a[21]]();F(1j[a[24]](R)==-1){1j+=R;Q[R]=[{2l:t[A][a[25]],2m:t[A][a[23]]}]}1I{Q[R][a[20]]({"\\r\\i\\e":t[A][a[25]],"\\z\\r\\h\\r\\e":t[A][a[23]]})}};I(q y 1O Q){1p[a[20]](y)};q t=1p[a[26]]();I(q C=0;C<t[a[12]];C++){T+=a[27]+t[C]+a[28]+t[C]+a[29];I(q L=0,1m=Q[t[C]];L<1m[a[12]];L++){q X=1m[a[26]](B(y,t){1L y[a[23]]>t[a[23]]?1:-1});T+=a[1W]+X[L][a[25]]+a[1U]+X[L][a[23]]+a[28]+X[L][a[23]]+a[2u]};T+=a[2o];1q+=a[2n]+t[C]+a[2r]};Y[a[10]]=a[2g]+1a[a[12]]+a[2p]+1q+a[1Z]+T+a[1R];1A()}}}B 1A(){D[a[1D]](a[1P])[a[1y]](B(y){y[a[1s]](a[1u],B(){q t=a[1S]+1N[a[10]]+a[2b];D[a[1r]](t)[a[1T]][a[1z]]({1C:1v,1G:a[1M]})})});D[a[1D]](a[2a])[a[1y]](B(y){y[a[1s]](a[1u],B(){D[a[1r]](a[2q])[a[1z]]({1C:1v,1G:a[1M]})})})}1g()',62,155,'||||||||||_0x764c|x61|x65|x74|x6C|x73|x69|x64|x72|x6F|x6E|x20|x3C|x3E|x70|x22|var|x75|x63|_0xd28cx14|x2F|x3D|x76|x6D|_0xd28cx17|x6A|_0xd28cx15|function|_0xd28cx18|document|x68|if|x79|x2E|for|x66|x35|_0xd28cx19|_0xd28cx12|x62|x23|_0xd28cx10|grup|_0xd28cx16|_0xd28cxe|print|_0xd28cxf|max|x45|_0xd28cx1b|_0xd28cxd|x2D|||||||||||sitemap5Arr|x6B|_0xd28cx13|_0xd28cx11|_0xd28cxa|start|runSitemap5|Array|x54|abjad|x4C|new|_0xd28cx1a|x26|x78|key|nav|46|47|x53|40|scroll|x71|x41|48|44|scrollSitemap5|_0xd28cxc|behavior|50|x77|x49|block|x67|else|x43|x42|return|43|this|in|49|x24|39|41|45|31|x3F|30|x48|x4D|38|||||||||||52|42|150|x4F|x5D|sitemap5|36|x50|x3A|x5B|break|url|judul|34|33|37|51|35|x56|x4E|32'.split('|'),0,{}));
//]]> </script>
6. Daftar Isi Blog Hanya 1 Label
Sitemap ini sangat berbeda dengan ke-5 daftar isi diatas, sebab daftar isi ini menampilkan hanya 1 label saja secara spesifik.
Tambahkan instruksi CSS ini diatas kode </style> atau ]]></b:skin> dihalaman Edit HTML.
/* Blogger Sitemap One Label Title Only by igniel.com */
#sitemap6 {font-size:14px; font-weight:400;}
#sitemap6 .judul {font-size:150%; background-color:#008c5f; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap6 a {color:#666; text-decoration:none; transition:all .3s ease;}
#sitemap6 a:hover {color:#000;}
#sitemap6 ol {margin:0px; padding:0px;}
#sitemap6 ol li {color:#666; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}
Kemudian tambahkan instruksi dibawah ini Dilaman daftar isi blog kamu. atau buat Lama Baru, Mode penulisan HTML.
<div id="sitemap6">Loading....</div>
<script> //<![CDATA[
/* Blogger Sitemap One Label Title Only by igniel.com */
var label = 'Blogger';
var text = 'Total post with label';
var sortby = 'date'; /* 'date' OR 'title' */
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('i a=["\\f\\v\\g\\h\\r\\d","\\v\\g\\b\\e\\d\\b\\1f\\c\\b\\B\\b\\l\\d","\\f\\g\\v","\\m\\w\\b\\b\\j\\f\\m\\r\\u\\f\\d\\f\\m\\j\\b\\w\\e\\k\\c\\d\\m\\S\\m","\\1q\\e\\c\\d\\q\\I\\f\\u\\l\\R\\v\\e\\c\\c\\Z\\e\\v\\1c\\q\\f\\h\\d\\b\\B\\e\\r\\1a\\R\\f\\d\\e\\g\\d\\S\\h\\l\\j\\b\\1g\\q","\\R\\B\\e\\1g\\S\\g\\b\\f\\k\\c\\d\\f\\q","\\e\\r\\r\\b\\l\\j\\1y\\x\\h\\c\\j","\\Z\\u\\j\\P","\\f\\h\\d\\b\\B\\e\\r\\1a","\\W\\b\\d\\1f\\c\\b\\B\\b\\l\\d\\1C\\P\\1B\\j","\\h\\l\\l\\b\\g\\1A\\1z\\1D\\1E","","\\w\\b\\b\\j","\\c\\b\\l\\W\\d\\x","\\b\\l\\d\\g\\P","\\1K\\d","\\d\\h\\d\\c\\b","\\c\\h\\l\\1c","\\g\\b\\c","\\e\\c\\d\\b\\g\\l\\e\\d\\b","\\x\\g\\b\\w","\\r\\k\\f\\x","\\I\\k\\j\\k\\c","\\f\\u\\g\\d","\\p\\c\\h\\o\\p\\e\\y\\x\\g\\b\\w\\q\\t","\\k\\g\\c","\\t\\y\\d\\h\\d\\c\\b\\q\\t","\\t\\o","\\p\\m\\e\\o\\p\\m\\c\\h\\o","\\p\\j\\h\\Y\\y\\v\\c\\e\\f\\f\\q\\t\\I\\k\\j\\k\\c\\t\\o","\\y","\\1h\\y","\\p\\m\\j\\h\\Y\\o\\p\\u\\c\\o","\\p\\m\\u\\c\\o"];i T=1,H=1G,K=1F 1H();V M(){i U=O[a[1]](a[0]);U[a[2]]=a[3]+1b+a[4]+T+a[5]+H;O[a[7]][a[6]](U)}V 1x(X){i J=O[a[9]](a[8]);C(!J){1d};J[a[10]]=a[11];i A=X[a[12]];C(A[a[14]][a[13]]>0){N(i G=0;G<A[a[14]][a[13]];G++){i D=A[a[14]][G];i E=D[a[16]][a[15]];N(i z=0;z<D[a[17]][a[13]];z++){C(D[a[17]][z][a[18]]==a[19]){i F=D[a[17]][z][a[1o]];C(F&&F[a[13]]>0&&E&&E[a[13]]>0){K[a[1I]]({"\\k\\g\\c":F,"\\I\\k\\j\\k\\c":E})};1l}}};C(A[a[14]][a[13]]>=H){T+=H;M()}1i{i Q=a[11],n;i n=(1J===a[16]?K[a[1w]](V(n,1e){1d n[a[L]]>1e[a[L]]?1:-1}):K);N(i s=0;s<n[a[13]];s++){Q+=a[1L]+n[s][a[1v]]+a[1s]+n[s][a[L]]+a[1k]+n[s][a[L]]+a[1j]};J[a[10]]=a[1u]+1m+a[1t]+1b+a[1r]+n[a[13]]+a[1n]+Q+a[1p]}}}M()',62,110,'||||||||||_0x73e9|x65|x6C|x74|x61|x73|x72|x69|var|x64|x75|x6E|x2F|_0x6718x10|x3E|x3C|x3D|x70|_0x6718x12|x22|x6F|x63|x66|x68|x20|_0x6718xd|_0x6718x9|x6D|if|_0x6718xb|_0x6718xc|_0x6718xe|_0x6718xa|max|x6A|_0x6718x8|sitemap6Arr|22|runSitemap6|for|document|x79|_0x6718xf|x26|x2D|start|_0x6718x5|function|x67|_0x6718x7|x76|x62|||||||||||x36|label|x6B|return|_0x6718x11|x45|x78|x3A|else|28|27|break|text|32|20|33|x3F|31|26|30|29|25|23|sitemap6|x43|x54|x48|x49|x42|x4D|x4C|new|150|Array|21|sortby|x24|24'.split('|'),0,{}));
//]]> </script>
Catatan:
var label : isi dengan label blog kamu, pastikan penulisannya sama persisi dengan label yang ada di blog.
var text : Tulisan di Judul, Bisa kau tulis Label Tersebut
var sortby : Jenis Pengurutan
- date : Berdasarkan tanggal postingan paling lama
- title : Berdasarkan huruf mulai dari A hingga Z
Nah itulah Cara Membuat Daftar Isi Blogger Dengan Berbagai Macam model, silahkan pilih satu model daftar isi blogger yang kau sukai.
Sumber aciknadzirah.blogspot.com