Linkmagz | Cara membuat Sitemap Blog elegan

Cara membuat Sitemap Blog elegan

Ingin tau apa yang menjadi pertimbangan Google dalam menentukan UX sebuah situs?

Pada postingan ini Anda akan belajar bagaimana Cara membuat Sitemap Blog.

Sitemap blog dengan tampilan yang elegan, yang akan menjadikan situs Anda terlihat lebih profesional dimata pengunjung.

Anda tau, Pengunjung tidak suka berlama - lama berada di situs dengan desain dan fitur asal-asalan.

itu kenapa Anda harus memberikan fitur terbaik dalam situs Anda, salah satunya dengan Sitemap Blog.

Pengertian Sitemap Blog

Sitemap Blog adalah sebuah halaman situs yang berisi kumpulan link pada situs Anda. Ianaya seperti Daftar isi sebuah buku yang memudahkan pengunjung untuk membaca artikel - artikel yang Anda sajikan hanya dengan mengklik url artikel yang tersedia pada situs blog Anda

Sitemap Blog menjadi elemen penting dalam sebuah blog agar pengunjung mendapatkan pengalaman menarik dan membantu meningkatkan UX blog Anda

Fungsi Sitemap Blog

Sitemap blog berfungsi sebagai navigasi utama situs Anda. Ini juga yang menjadi salah satu penilaian Google dalam menentukan situs di mesin pencari.

Jika situs Anda menyediakan fitur Sitemap tentunya selain berpengaruh pada pertingkat SEO Blog Anda, Pengunjung situs juga merasa mudah mencari artikel - artikel menarik yang Anda sajikan.

Cara membuat Sitemap Blog elegan | Linkmagz

1. Masuk ke Dashboar Blogger.
2. Klik menu Halaman / Page.
3. Buat halaman baru dengan judul sitemap.
4. buat postingan pada mode " HTML " lalu Copy dan Paste kan kode dibawah ini

<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>/*!
 * Blogger Tabbed Style Table of Content Widget by Taufik Nurrohman
 * Free for change but keep the original attribution.
 * URL: https://plus.google.com/108949996304093815163/about
 */
var tabbedTOC={blogUrl:"https://linkmagz.com/",containerId:"tabbed-toc",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; <em style="color:red;">New!</em>'};
!function(a,b){var c=(new Date).getTime(),d={blogUrl:"http://dte-feed.blogspot.com",containerId:"tabbed-toc",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; <em style="color:red;">Baru!</em>'};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="active-tab"},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="toc-line"></span><ul class="toc-tabs">';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="toc-content">
';for(var o=0,n=i.length;n>o;++o){j+='<ol class="panel" 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>

Catatan : Sebelum Anda Publikasikan, pastikan URL nya sudah Anda rubah dengan URL blog Anda.

Sitemap Blog ini 100% bekerja pada template Linkmagz, untuk melihat demonya silakan Klik Disini.

Namun Jika masih terlihat berantakan saat Anda membuat sitemap di template blog Anda maka tambahkan kode CSS dibawah ini. 

Caranya masuk ke menu Tema > Lalu edit Tema > lalu pastekan kode dibawah ini tepat diatas kode ]]></b:skin>

.tabbed-toc{margin:0 auto;position:relative}.tabbed-toc .loading{display:block;padding:2px 12px;color:#eee}.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li{margin:0;padding:0;list-style:none}.tabbed-toc .toc-tabs{width:20%;float:left;background:rgba(51,51,51,0.03);font-size:12px;font-size:.75rem}.tabbed-toc .toc-tabs li a{display:block;overflow:hidden;text-transform:uppercase;text-decoration:none;padding:12px}.tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}.tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5}.tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:right;border-left:5px solid rgba(0,0,0,0.07);-webkit-box-sizing:border-box;box-sizing:border-box}.tabbed-toc .toc-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}.tabbed-toc .panel{position:relative;z-index:5}.tabbed-toc .panel li a{display:block;position:relative;padding:8px 12px;overflow:hidden}.tabbed-toc .panel li time{display:block;font-size:12px;font-size:.75rem}.tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}.tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}.tabbed-toc .panel li{background-color:rgba(0,0,0,0.03)}.tabbed-toc .panel li:nth-child(even){background-color:transparent}.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li.bold a{background-color:rgba(64,64,64,0.1);outline:0}@media(max-width:700px){.tabbed-toc .toc-tabs,.tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block;border-bottom:5px solid rgba(0,0,0,0.07)}.tabbed-toc .toc-tabs li{float:left}.tabbed-toc .toc-content{border-left:0}.tabbed-toc .toc-line,.tabbed-toc .panel li time{display:none}}

Setelah selesai, silahkan lihat hasilnya.

Baca Juga :  Cara membuat Random post With Tumbnail support Dark Mode | Buat Pengunjung stay lebih lama di Situs Anda, hanya butuh 2 Langkah untuk membuatnya.

Panduan lengkap Tutorial Blog Klik Disini