Blogger Jateng
Home / Blogging

3 Model Tampilan Peta Situs/ Sitemap untuk Halaman Blogger

Post a Comment

 

3 Model Tampilan Peta Situs/ Sitemap untuk Halaman Blogger
www.verhan.id


Sitemap/ peta situs atau bisa juga disebut sebagai daftar isi pada halaman blog berfungsi  untuk mengklasifikasikan kategori artikel dan menampilkan jumlah postingan artikel pada suatu blog.

Pembaca yang ingin melihat daftar isi pada suatu blog, maka cukup dengan melihat halaman sitemap ini. Dengan demikian adanya sitemap ini memudahkan pembaca mencari label artikel yang diminatinya. 

Sudah banyak para blogger membuat postingan mengenai model - model sitemap ini pada blog mereka. Termasuk blog saya ini. Pada kesempatan kali ini saya ingin berbagi tulisan mengenai 5 model tampilan sitemap yang saya ambil dari blog dengan alamat www.ferisp.com. 

Berikut 5 Model Tampilan Peta Situs/ Sitemap untuk Halaman Blogger


1. Model Tampilan 1

Pada model ini, kategori artikel/ label berada di sebelah kiri sedangkan listing artikel berada di sebelah kanan. Berikut ini screen shoot model sitemap apabila diterapkan di blog, 

3 Model Tampilan Peta Situs/ Sitemap untuk Halaman Blogger
model tampilan 1

Berikut ini kode html nya. Ganti url https://infinityarch8.blogspot.com/ dengan url blog anda,  

<!-- HTML -->
<div class="siteMap" id="siteMap">
  <span class="loading">Tunggu...</span>
</div>
<!-- End HTML -->

<!-- CSS -->
<style>
.siteMap{position:relative;font-family:"Noto Sans",sans-serif;margin:0 auto;border:1px solid #eee}
.siteMap .loading{display:block;background:#fff;color:#333;padding:15px}
.siteMap ul,.siteMap ol,.siteMap li{margin:0;padding:0;list-style:none}
.siteMap .siteTabs{float:left;background:#fff;width:20%;font-size:14px}
.siteMap .siteTabs li a{display:block;color:#333;font-style:uppercase;text-decoration:none;padding:12px;border-bottom:1px solid #eee;overflow:hidden}
.siteMap .siteTabs li a:hover{background:#fafafa;color:#333}
.siteMap .siteTabs li a.siteActive-tabs{position:relative;background:#eee;color:#333;z-index:5}
.siteMap .siteContent,.siteMap .siteLine{float:right;width:80%;border-left:3px solid #ddd;-webkit-box-sizing:border-box;box-sizing:border-box}
.siteMap .siteLine{float:none;position:absolute;display:block;top:0;right:0;bottom:0}
.siteMap .sitePanel{position:relative;z-index:5}
.siteMap .sitePanel li a{display:block;position:relative;font-size:15px;padding:8px 12px;overflow:hidden}
.siteMap .sitePanel li time{display:block;color:#333;font-size:12px}
.siteMap .sitePanel li .summary{display:block;font-size:15px;padding:10px 12px 10px}
.siteMap .sitePanel li .summary img.thumbnail{float:left;display:block;width:72px;height:72px;background:#fafafa;margin:5px 8px 0 0}
.siteMap .sitePanel li{background:#fafafa}
.siteMap .sitePanel li:nth-child(even){background:#fff}
.siteMap .sitePanel li a:hover,.siteMap .sitePanel li a:focus,.siteMap .sitePanel li.bold a{background:#eee;outline:0}
@media screen and (max-width:700px){.siteMap .siteTabs,.siteMap .siteContent{float:none;display:block;width:auto;border-bottom:5px solid rgba(0,0,0,0.07);overflow:hidden}.siteMap .siteTabs li{float:left}.siteMap .siteContent{border-left:0}.siteMap .siteLine,.siteMap .sitePanel li time{display:none}
</style>
<!-- End CSS -->

<!-- JavaScript -->
<script>
var tabbedTOC={blogUrl:"https://infinityarch8.blogspot.com/",containerId:"siteMap",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' &ndash; <span style="color:red;font-size:12px">New!</span>'};!function(a,b){var c=(new Date).getTime(),d={blogUrl:"http://dte-feed.blogspot.com",containerId:"siteMap",activeTab:1,showDates:!1,showSummaries:!1,numChars:200,showThumbnails:!1,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:!1,newText:' &ndash; <span style="color:red;font-size:12px">Baru!</span>'};if("undefined"==typeof tabbedTOC)tabbedTOC=d;else for(var e in d)d[e]="undefined"!=typeof tabbedTOC[e]?tabbedTOC[e]:d[e];a["clickTabs_"+c]=function(a){for(var b=document.getElementById(d.containerId),c=b.getElementsByTagName("ol"),e=b.getElementsByTagName("ul")[0],f=e.getElementsByTagName("a"),g=0,h=c.length;h>g;++g)c[g].style.display="none",c[parseInt(a,10)].style.display="block";for(var i=0,j=f.length;j>i;++i)f[i].className="",f[parseInt(a,10)].className="siteActive-tabs"},a["showTabs_"+c]=function(e){for(var f=parseInt(e.feed.openSearch$totalResults.$t,10),g=d,h=e.feed.entry,i=e.feed.category,j="",l=0;l<(g.showNew===!0?5:g.showNew)&&l!==h.length;++l)h[l].title.$t=h[l].title.$t+(g.showNew!==!1?g.newText:"");h=g.sortAlphabetically?h.sort(function(a,b){return a.title.$t.localeCompare(b.title.$t)}):h,i=g.sortAlphabetically?i.sort(function(a,b){return a.term.localeCompare(b.term)}):i,j='<span class="siteLine"></span><ul class="siteTabs">';for(var m=0,n=i.length;n>m;++m)j+='<li class="toc-tab-item-'+m+'"><a onclick="clickTabs_'+c+"("+m+');return false;" onmousedown="return false;" href="javascript:;">'+i[m].term+"</a></li>";j+="</ul>",j+='<div class="siteContent">';for(var o=0,n=i.length;n>o;++o){j+='<ol class="sitePanel" data-category="'+i[o].term+'"',j+=o!=g.activeTab-1?' style="display:none;"':"",j+=">";for(var p=0;f>p&&p!==h.length;++p){for(var q,r=h[p],s=r.published.$t,t=g.monthNames,u=r.title.$t,v=("summary"in r&&g.showSummaries===!0?r.summary.$t.replace(/<br *\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,g.numChars)+"&hellip;":""),w=("media$thumbnail"in r&&g.showThumbnails===!0?'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+r.media$thumbnail.url.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+g.noThumb.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>'),x=r.category||[],y=g.showDates?'<time datetime="'+s+'" title="'+s+'">'+s.substring(8,10)+" "+t[parseInt(s.substring(5,7),10)-1]+" "+s.substring(0,4)+"</time>":"",z=0,A=r.link.length;A>z;++z)if("alternate"===r.link[z].rel){q=r.link[z].href;break}for(var B=0,C=x.length;C>B;++B){var D=g.newTabLink?' target="_blank"':"";x[B].term===i[o].term&&(j+='<li title="'+x[B].term+'"',j+=g.showSummaries?' class="bold"':"",j+='><a href="'+q+'"'+D+">"+u+y+"</a>",j+=g.showSummaries?'<span class="summary">'+w+v+'<span style="display:block;clear:both;"></span></span>':"",j+="</li>")}}j+="</ol>"}j+="</div>",j+='<div style="clear:both;"></div>',b.getElementById(g.containerId).innerHTML=j,a["clickTabs_"+c](g.activeTab-1)};var f=b.getElementsByTagName("head")[0],g=b.createElement("script");g.src=d.blogUrl.replace(/\/+$|[\?&#].*$/g,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+d.maxResults+"&orderby=published&callback=showTabs_"+c,"onload"!==d.preload?a.setTimeout(function(){f.appendChild(g)},d.preload):a.onload=function(){f.appendChild(g)}}(window,document)
</script>
<!-- End JavaScript -->

2. Model Tampilan 2

Model sitemap ini berbentuk listing posting yang di kelompokkan menurut label. Listing diberi nomor urut, sehingga diketahui jumlah postingan dari setiap label. Berikut ini screen shoot model sitemap apabila diterapkan di blog, 

3 Model Tampilan Peta Situs/ Sitemap untuk Halaman Blogger
model tampilan 2

Berikut ini kode html nya. Ganti url https://infinityarch8.blogspot.com/ dengan url blog anda,  

<!-- HTML -->
<div class="siteMap" id="siteMap">
  <div class="loading">Tunggu...</div>
</div>
<!-- End HTML -->

<!-- CSS -->
<style>
.siteMap{font-size:15px}
.siteMap .loading{background:#fff;color:#333;padding:15px;border:1px solid #eee}
.siteMapBox{background:#fff;padding:15px;border:1px solid #eee}
.siteMapBox:not(:last-child){margin-bottom:20px}
.siteMapTitle{font-size:14px;font-family:"Noto Sans",sans-serif;font-weight:400}
.siteMapTitle:before{content:"Label: ";font-size:90%;opacity:.6}
.siteMap ol{list-style:none;margin:0;padding:0;counter-reset:sitemap-count}
.siteMap li{display:flex;align-items:baseline}
.siteMap li:not(:last-child){margin-bottom:0}
.siteMap li:before{content:counter(sitemap-count) ".";counter-increment:sitemap-count;flex-shrink:0;width:25px;font-size:15px;font-family:"Noto Sans",sans-serif;line-height:normal}
</style>
<!-- End CSS -->

<!-- JavaScript -->
<script>
var toc_config={containerId:"siteMap",showNew:0,sortAlphabetically:{thePanel:!0,theList:!0},activePanel:1,slideSpeed:{down:400,up:400},slideEasing:{down:null,up:null},slideCallback:{down:function(){},up:function(){}},clickCallback:function(){},jsonCallback:"siteMap",delayLoading:0};window.onload=function(){!function(e,t){var n=t.getElementById(toc_config.containerId),o=t.getElementsByTagName("head")[0],l=[];e[toc_config.jsonCallback]=function(e){for(var t,o,a=e.feed.entry,i=e.feed.category,c="",r=0,s=i.length;s>r;++r)l.push(i[r].term);for(var d=0,f=a.length;f>d;++d)(toc_config.showNew||toc_config.showNew>0)&&d<toc_config.showNew+1&&(a[d].title.$t+=" %new%");a=toc_config.sortAlphabetically.theList?a.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}):a,toc_config.sortAlphabetically.thePanel&&l.sort();for(var g=0,h=l.length;h>g;++g){c+='<div class="siteMapBox"><h4 class="siteMapTitle">'+l[g]+"</h4>",c+='<div class="sitemapContent"><ol>';for(var p=0,w=a.length;w>p;++p){t=a[p].title.$t;for(var u=0,m=a[p].link.length;m>u;++u)if("alternate"==a[p].link[u].rel){o=a[p].link[u].href;break}for(var v=0,y=a[p].category.length;y>v;++v)l[g]==a[p].category[v].term&&(c+='<li><a href="'+o+'" title="'+t.replace(/ \%new\%$/,"")+'">'+t.replace(/ \%new\%$/,"")+"</a></li>")}c+="</ol></div></div>"}n.innerHTML=c};var a=t.createElement("script");a.src="https://infinityarch8.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){o.appendChild(a)}:e.setTimeout(function(){o.appendChild(a)},toc_config.delayLoading)}(window,document)}
</script>
<!-- End JavaScript -->

3. Model Tampilan 3

Model sitemap ini berbentuk listing posting seperti pada model tampilan 2. Listing diberi nomor urut, sehingga diketahui jumlah postingan dari setiap label. Pada model tampilan 3 ini label diberikan highlight dan diberi keterangan new! pada posting artikel yang baru saja dibuat. Berikut ini screen shoot model sitemap apabila diterapkan di blog, 

3 Model Tampilan Peta Situs/ Sitemap untuk Halaman Blogger
model tampilan 3

Berikut ini kode html nya. Ganti url https://infinityarch8.blogspot.com/ dengan url blog anda,  


<!-- HTML -->
<div id="siteMap">
  <script src="https://cdn.jsdelivr.net/gh/Ferisp/Widget@main/sitemap-3.js"></script>
  <script src="https://infinityarch8.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>
<!-- End HTML -->

<!-- CSS -->
<style>
#siteMap{width:100%;background:#fff;color:#333;font-family:"Noto Sans",sans-serif;font-size:15px;margin:5px auto;border:1px solid #eee}
.siteLabel{display:block;background:#eee;margin:0 -5px;padding:1px 0 2px 10px;border-radius:3px}
.siteLabel a{color:#333}
.siteList{background:#fff;margin-left:20px}
.siteList li{margin-right:5px;border-bottom:1px solid #eee}
.new{color:red;font-size:12px}
</style>
<!-- End CSS -->

Sekian artikel tentang 3 Model Tampilan Peta Situs/ Sitemap untuk Halaman Blogger. 


Semoga bermanfaat 😊

Post a Comment for "3 Model Tampilan Peta Situs/ Sitemap untuk Halaman Blogger"