Cara Membuat Sitemap Keren di Template Median Ui
Hallo semua, pada halaman ini kembali saya akan membagikan cara membuat sitemap keren di template median ui. Jika kamu tertarik langsung aja yuk simak dibawah ini.
Di artikel sebelumnya saya juga telah membagikan cara membuat sitemap. Namun berbeda dengan sitemap kali ini, Apa bedanya? Seperti yang tertera pada judul sitemap ini diperuntukkan bagi pengguna template median ui.
Sebenarnya bisa aja digunakan di template yang lain, akan tetapi besar kemungkinan tampilannya tidak responsive. Namun jika kalian bisa dan mengerti coding bisa menyesuaikan class-nya.
Cara Membuat Sitemap di Median Ui V1.6 & V1.7
Buka dashboard blogger > halaman > buat halaman baru lalu salin kode script dibawah ini dan pastekan dalam tampilan html dan simpan.
<!--[ Sitemap script DTE, source: dte.web.id/teknis/widget-daftar-isi-tabulasi-blogger ]-->
<script src='//dte-project.github.io/blogger/tabbed-toc.min.js?active=0&load=true&ad=false&date=%25M~%25%20%25D%25%2C%20%25Y%25' defer='defer'></script>
<style>
.tabbed-toc{border:0;font-size:15px}
.tabbed-toc-tabs{width:10em;font-size:14px}
.tabbed-toc-tab{padding:0 15px;border-radius:3px 0 0 3px;position:relative;transition:var(--trans-1);color:inherit}
.tabbed-toc-tab::after{content:'';position:absolute;top:0;bottom:0;right:0;border-right:1px solid var(--linkC);opacity:0}
.tabbed-toc-tab:hover, .tabbed-toc-tab.active{background:var(--transB)}
.tabbed-toc-tab:hover::after, .tabbed-toc-tab.active::after{opacity:1}
.tabbed-toc-tab.active{color:var(--linkC);opacity:.7}
.ltr .tabbed-toc-panels{border-color:var(--contentL)}
.ltr .tabbed-toc-time{position:relative;font-size:12px;opacity:.7}
.tabbed-toc li{padding:5px 7.5px;line-height:1.6em;min-height:40px;display:flex;align-items:center;justify-content:space-between}
.tabbed-toc li >*{padding:0 7.5px; margin:0}
.tabbed-toc a{color:inherit}
.tabbed-toc-title{font-size:16px}
.tabbed-toc-title sup{font-weight:400;font-size:12px;color:var(--linkC)}
.drkM .ltr .tabbed-toc-panels{border-color:rgba(255,255,255,.1)}
.drkM .tabbed-toc-tab.active, .drkM .tabbed-toc-title sup{color:var(--darkL)}
.drkM .tabbed-toc-tab::after{border-color:var(--darkL)}
@media screen and (max-width:750px){
.tabbed-toc nav{display:flex;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:touch; /*position:relative;width:calc(100% + 40px);left:-20px;right:-20px;padding:0 20px*/}
.tabbed-toc nav::-webkit-scrollbar{width:0;height:0}
.tabbed-toc nav::-webkit-scrollbar-track{background:transparent}
.tablet-toc nav::-webkit-scrollbar-thumb{background:transparent;border:none}
.tabbed-toc-tab{border-radius:3px 3px 0 0;white-space:nowrap;flex-shrink:0;scroll-snap-align:start}
.tabbed-toc-tab::after{top:auto;left:0;border-right:0;border-bottom:1px solid var(--linkC)}
.tabbed-toc ol{margin-top:15px;padding:0 15px;list-style:decimal}
.tabbed-toc li{display:list-item;padding:5px 0;overflow:visible;list-style:inherit}
.drkM .tabbed-toc-tab::after{border-color:var(--darkL)} }
@media screen and (max-width:500px){
.tabbed-toc-title{font-size:15px}}
</style>
Cara Membuat Sitemap di Median Ui V1.5
Buka dashboard blogger > halaman > buat halaman baru lalu salin kode script dibawah ini dan pastekan dalam tampilan html dan simpan.
<div class='postSection sitemaps' id='sitemaps'>
<div class='loading'>Loading....</div></div>
<script>/*<![CDATA[*/
/* Blogger Sitemap Dropdown: change i.src="..." with your url */
var toc_config = {containerId:'sitemaps', 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:'sitemaps',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=\"sitemapBox\"><h4 class=\"sitemapTitle\">'+n[g]+'</h4>',l+='<div class=\"sitemapContent\"><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></div>'}t.innerHTML=l }; var i=o.createElement("script");i.src="https://www.media903.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>
<style>
.sitemaps{font-size:14px}
.sitemapBox{padding:15px;border:1px solid var(--content-border);border-radius:5px}
.sitemapBox:not(:last-child){margin-bottom:20px}
.postEntry .sitemapTitle{margin-top:0; font-size:14px;font-weight:400;font-family:var(--body-font)}
.sitemapTitle:before{content:'Label: '; font-size:90%;opacity:.8}
.sitemaps ol{list-style:none;margin:0;padding:0;counter-reset:sitemap-count}
.sitemaps li{display:flex;align-items:baseline}
.sitemaps li:not(:last-child){margin-bottom:0}
.sitemaps li:before{content:counter(sitemap-count) '.';counter-increment:sitemap-count;flex-shrink:0;width:25px;font-size:13px;font-family:var(--font-body);line-height:normal; opacity:.7}
.darkMode .sitemapBox{border-color:rgba(255,255,255,.1)}
</style>
Silahkan ganti https://www.media903.com dengan alamat atau url blog kalian.
Mungkin sekian pembahasan kali ini, jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Baca juga artikel lainnya untuk mendapatkan informasi dan tips seputar blogging.
Post a Comment