Iklan

Membuat Sitemap / Daftar Isi Show Hide di Blogger

Sitemap Show Hide
Bila Anda seorang blogger pasti sudah tau apa manfaat dari sitemap itu sendiri, sitemap bertujuan biar pengunjung dapat melihat artikel yang sudah di publikasikan pada blog Anda. Maka dari itu jikalau postingan Anda sudah menumpuk ada baiknya Anda membuat sitemap / daftar isi yang menggunakan fitur show hide.

Dengan menggunakan sitemap / daftar isi show hide, maka pengunjung lebih mudah untuk melihat semua postingan yang sudah ada pada blog Anda. Sitemap ini memiliki disain yang simple, ibarat yang Anda lihat sitemap ini di lengkapi fitur show hide, kesudahannya Anda mampu menyembunyikan atau menampilkan postingan perlabel yang sudah di terapkan pada admin blog tersebut.


Membuat Sitemap / Daftar Isi Show Hide


Langkah pertama :

Login ke Blogger > Laman > Laman Baru. Lalu Anda copy arahan dibawah ini ke dalam kolom yang sudah di sediakan. Dan di pastikan Anda berada pada mode HTML bukan Compose

Laman baru

<div dir="ltr" style="text-align: left;" trbidi="on"> <style scoped="" type="text/css"> .table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)} .table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial} .table-of-content .toc-header:hover{background-color:#fdfdfd} .table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease} .table-of-content .toc-header.active{color:#fc4f3f} .table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)} .table-of-content .loading{display:block;padding:15px;text-decoration:blink} .table-of-content ol{margin:0;padding:0;list-style:none;transition:initial} .table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial} .table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial} .table-of-content a:visited{color:#a2a2a9;transition:initial} .table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial} .post ol li:before{display:none} </style> <div class="table-of-content" id="table-of-content"> <span class="loading">Memuat konten...</span></div> <script> var toc_config = {     url: 'https://socialseo-bookmark.blogspot.com/',     containerId: 'table-of-content',     showNew: 15,     newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',     sortAlphabetically: {         thePanel: true,         theList: true     },     maxResults: 9999,     activePanel: 1,     slideSpeed: {         down: 400,         up: 400     },     slideEasing: {         down: null,         up: null     },     slideCallback: {         down: function() {},         up: function() {}     },     clickCallback: function() {},     jsonCallback: '_toc',     delayLoading: 0 }; </script> <script> /**  * BLOGGER TOC WITH ACCORDION EFFECT (SORT BY LABEL)  * ---------------------------------------------------  * by Taufik Nurrohman  * Modified by Arlina Fitriyani  * ---------------------------------------------------  */  /* var toc_config = {  url: 'http://arlinadesign.blogspot.com',  containerId: 'table-of-content',  showNew: 15,  newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',  sortAlphabetically: {   thePanel: true,   theList: true  },  maxResults: 9999,  activePanel: 1,  slideSpeed: {   down: 400,   up: 400  },  slideEasing: {   down: null,   up: null  },  slideCallback: {   down: function() {},   up: function() {}  },  clickCallback: function() {},  jsonCallback: '_toc',  delayLoading: 0 }; */ !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+='<h3 class="toc-header"> '+n[g]+"</h3> ",l+='<div class="toc-content"> <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+'">'+o.replace(/ \%new\%$/,"")+"</a>"+(o.match(/\%new\%/)?" "+toc_config.newText:"")+"</li> ")}l+="</ol> </div> "}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .toc-content").hide(),$("#"+toc_config.containerId+" .toc-header").click(function(){$(this).hasClass("active")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .toc-header").removeClass("active").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src=toc_config.url.replace(/\/$/,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+toc_config.maxResults+"&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> </div> 

Pada dikala Anda Publikasikan laman tersebut, pastikan Anda masih di mode HTML bukan Compose

Jika ada arahan CSS yang error atau tidak rapih, sebaiknya Anda berkomentar di bawah dan mencari solusi bersama.

0 Response to "Membuat Sitemap / Daftar Isi Show Hide di Blogger"

Posting Komentar