√ Cara Pasang Sitemap / Daftar Isi Blog Sesuai Label Dengan Sajian Dropdown
Membuat sitemap sangatlah penting untuk diterapkan pada Blog anda, lantaran sitemap merupakan salah satu hidangan navigasi menurut Label layaknya Buku menurut isi judul.
Cara menciptakan sitemap sesuai judul dengan hidangan dropdown ini cukup unik dan juga menarik yang perlu anda Coba untuk menunjukkan kesan mempercantik tampilan pada blog anda.
Jika kebanyakan sitemap dipasang dengan tampilan text saja, maka di cara ini kita dapat menampilkan Sitemap/daftar isi sesuai label dengan hidangan dropdown.
Jika anda tertarik dan ingin mencobanya, silakan ikuti langkah-langkahnya.
Cara Membuat Sitemap/Daftar isi sesuai Label dengan Menu Dropdown
1. > login ke Blog
2. > pilih Theme / Template
3. > pilih EDIT HTML
4. > Carilah arahan dibawah ini
]]></b:skin>Untuk mempermudah pencarian arahan tersebut, silakan Gunakan Fungsi CTRL+F pada Keyboard laptop/komputer anda.
Jika sudah ketemu, silakan Copy arahan dibawah ini dan letakan sempurna di atas arahan ]]></b:skin> tadi.
/* Sitemap Dropdown .blogspot.com */ #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;}
Jika sudah, Silakan Simpan / SAVE.
Selanjutnya kita akan memasang arahan HTML-nya di Pages/Laman.
Owya, untuk penempatan Kode ini dapat diletakan di Laman ataupun di Widget LayOut. Terserah harapan anda ingin di tempatkan di mana saja bisa.
Cara Pasang Sitemap di Pages / Laman
> pilih Pages / Laman
> pilih > New Pages / Laman Baru
> pada ketika muncul laman baru, silakan anda Pilih HTML. Jangan yang Compose.
Jika laman sudah dalam Tab HTML, silakan Copy arahan dibawah ini dan masukan ke Laman HTML tadi.
<div id="sitemap1"><div class="loading">Loading....</div></div> <script> //<![CDATA[ /* Sitemap Dropdown By .blogspot.com */ 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.syilent.blogspot.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>Keterangan:
>> Silakan ganti Alamat Url yang aku tandai berwarna biru dengan alamat url anda.
>> Silakan simpan / Save, dan lihat Hasilnya....
Cara Pasang Sitemap Di LayOut / Tata Letak
> pilih Layout / Tata Letak
> pilih Add Widget / Tambahkan Widget
> Pilih HTML / javascript
Setelah muncul laman pengisian, untuk nama silakan isi ==> Daftar Isi (atau terserah sesuai keinginan).
Selanjutnya di kolom pengisian HTML, silakan Copy arahan dibawah ini dan letakan di kolom tadi.
<div id="sitemap1"><div class="loading">Loading....</div></div> <script> //<![CDATA[ /* Sitemap Menu Dropdown By .Blogspot.com */ 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.syilent.blogspot.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>keterangan:
>> silakan ganti alamat url yang aku tandai berwarna biru dengan alamat url website anda.
>>Jika sudah silakan SIMPAN / SAVE. dan lihat hasilnya...
Nah itulah cara gampang menciptakan sitemap/daftar isi sesuai label dengan hidangan dropdown.
Semoga bermanfaat.
Sumber https://syilent.blogspot.com/
