Cara Membuat Sitemap Blogger Responsive, Keren dan Seo Friendly

komputerdia.com - Sitemap merupakan salah satu elemen blog/website yang bisa dikategorikan sebagai salah satu bagian yang sangat penting, dengan adanya sitemap ini tentunya sangat membantu pengunjung untuk mempermudah menemukan artikel blog serta untuk mempromosikan situs ke mesin pencari (search engine) agar lebih cepat di index, sehingga website atau blog yang kalian kelola dapat bersaing di mesin pencari tersebut.

Selain pengertian diatas ada juga yang mendefinisikan sitemap (peta situs) sebagai sebuah file atau salah satu bagian halaman pada sebuah website/blog yang berisi daftar link, selain itu sitemap juga berguna sebagai media informasi tentang url-url yang terdapat dalam suatu website/blog yang akan dikirmkan kedalam search engine (mesin pencari)

Masih berhubungan dengan sitemap, dalam artikel kali ini saya akan membagikan beberapa desain sitemap yang bisa kalian terapkan dihalaman statis blog kalian. Pembuatan halaman sitemap ini pada umumnya tidak perlu melakukan pengeditan melalui menu edit html, namun dari sebagian kasus ada juga yang perlu melakukan sedikit editing pada bagian edit html

cara mebuat sitemap blogger responsive keren dan juga seo friendly

Cara Membuat Sitemap Blogger Responsive

1. Sitemap Blogger Responsive Otomatis

Desain sitemap pertama ini mengambil tema otomatis dan sudah di sisipkan fitur responsive sehingga kalian tidak perlu menyesuaikan tampilan mobile lagi, dan pada sitemap ini juga telah ditambahkan fitur total jumlah artikel yang terdapat pada blog tersebut

Langkah pertama silahkan kalian masuk ke akun blogger
Selanjutnya kalian masuk ke menu Halaman dan pilih menu Halaman baru

Setelah itu kalian akan melihat halaman baru, silahkan kalian isi judul halaman tersebut dengan sitemap
Selanjutnya kalian arahlan ke tab/halaman HTML, copy kode dibawah ini dan pastekan di halaman tersebut

<style scoped="" type="text/css">
#comments,#sidebar-wrapper {display:none;}
#post-wrapper {float:none;width:100%;margin:0 auto;max-width:100%;}
</style>

<style>
/* Blogger Sitemap Simple Title Only */
#sitemap3 .judul {font-size:150%; background-color:#008c5f; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap3 a {color:#666; text-decoration:none; transition:all .3s ease;}
#sitemap3 a:hover {color:#000;}
#sitemap3 ol {margin:0px; padding:0px;}
#sitemap3 ol li {color:#666; font-weight:400; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}
</style>

<div id="sitemap3">Loading....</div>
<script> //<![CDATA[
/* Blogger Sitemap Simple Title Only */
var start=1;var max=150;var sitemap3Arr=new Array();function runSitemap3(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap3&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap3(root){var elem=document.getElementById('sitemap3');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemap3Arr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runSitemap3()} else{var print='';for(var x=0;x<sitemap3Arr.length;x++){print+='<li><a href=\"'+sitemap3Arr[x].url+'\" title=\"'+sitemap3Arr[x].judul+'\">'+sitemap3Arr[x].judul+'</a></li>'}
elem.innerHTML='<div class=\"judul\">Total Post: '+sitemap3Arr.length+'</div><ol>'+print+'</ol>'}}} runSitemap3();
//]]> </script>

Setelah itu silahkan kalian tekan tombol Publikasikan dan lihat hasilnya
Jika cara diatas divisualisasikan melalui media gambar, maka akan terlihat seperti dibawah ini

2. Sitemap Blogger Responsive Elegan

Sesuai dengan namanya, sitemap ini sudah disetting dengan tampilan yang cukup menarik perhatian pengunjung dan tentunya sitemap blogger yang satu ini sudah dilengkapi dengan fitur responsive sehingga dapat menyesuaikan tampilan halaman sesuai dengan perangkat yang di gunakan

Langkah pertama silahkan kalian masuk ke akun blogger
Selanjutnya kalian masuk ke menu Halaman dan pilih menu Halaman baru

Setelah itu kalian akan melihat halaman baru, silahkan kalian isi judul halaman tersebut dengan sitemap
Selanjutnya kalian arahlan ke tab/halaman HTML, copy kode dibawah ini dan pastekan di halaman tersebut

<style scoped="" type="text/css">
#comments,#sidebar-wrapper {display:none;}
#post-wrapper {float:none;width:100%;margin:0 auto;max-width:100%;}
</style>

<link href="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.css" rel="stylesheet"></link>
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
    blogUrl: "https://www.komputerdia.com/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: ' – <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>

<script src="https://cdn.statically.io/gh/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>

Silahkan kalian ganti kode yang berwarna merah dengan dengan alamat url blog kalian
Setelah itu silahkan kalian tekan tombol Publikasikan dan lihat hasilnya
Jika cara diatas divisualisasikan melalui media gambar, maka akan terlihat seperti dibawah ini

3. Sitemap Blogger Responsive Purple

Sitemap ketiga ini merupakan sitemap yang termasuk kedalam kategori sitemap simpel yang sudah dilengkapi dengan menu label di bagian sidebar, sehingga dapat memudahkan pengunjung untuk melakukan eksplorasi diblog yang kalian kelola, selain itu sitemap ini juga sudah dilengkapi dengan fitur responsive

Langkah pertama silahkan kalian masuk ke akun blogger
Selanjutnya kalian masuk ke menu Halaman dan pilih menu Halaman baru

Setelah itu kalian akan melihat halaman baru, silahkan kalian isi judul halaman tersebut dengan sitemap
Selanjutnya kalian arahlan ke tab/halaman HTML, copy kode dibawah ini dan pastekan di halaman tersebut

<style scoped="" type="text/css">
#comments,#sidebar-wrapper {display:none;}
#post-wrapper {float:none;width:100%;margin:0 auto;max-width:100%;}
</style>

<div class="spicetab" id="spicetab"></div>
<script>
var tabbedTAB={blogUrl:"https://www.komputerdia.com/",containerId:"spicetab",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' – <em style="color:#ff0000;">New</em>'};
!function(a,b){var c=(new Date).getTime(),d={blogUrl:"https://www.komputerdia.com/",containerId:"spicetab",activeTab:1,showDates:!1,showSummaries:!1,numChars:200,showThumbnails:!1,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:!1,newText:' – <em style="color:#ff0000;">New!</em>'};if("undefined"==typeof tabbedTAB)tabbedTAB=d;else for(var e in d)d[e]="undefined"!=typeof tabbedTAB[e]?tabbedTAB[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="tab-line"></span><ul class="tab-tabs">';for(var m=0,n=i.length;n>m;++m)j+='<li class="tab-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="tab-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)+"…":""),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>

<style scoped="" type="text/css">
.spicetab{border-radius:15px;margin:0 auto;position:relative;opacity: .9;background:linear-gradient(90deg, rgb(169, 108, 232), rgb(0, 115, 183));background-size:400% 400%;animation:Gradient 15s ease infinite}
.spicetab .loading{display:block;padding:2px 12px;color:#fff}
.spicetab ul,.spicetab ol,.spicetab li{list-style:none;color: #fff; margin:0;padding:0}
.spicetab .tab-tabs{width:20%;float:left}
.spicetab .tab-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
.spicetab .tab-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
.spicetab .tab-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}
.spicetab .tab-content,.spicetab .tab-line{width:80%;float:right;background-color:#fff;box-sizing:border-box}
.spicetab .tab-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
.spicetab .panel{position:relative;z-index:5}
.spicetab .panel li a{text-decoration: none;color:#737373;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}
.spicetab .panel li time{display:block;font-weight:bold;font-size:11px;color:#4285f4;float:right}
.spicetab .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}
.spicetab .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}
.spicetab .panel li{background-color:#f9f9f9;margin:0}
.spicetab .panel li:nth-child(even){background-color:#fff}
.spicetab .panel li a:hover,.spicetab .panel li a:focus,.spicetab .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}
.spicetab .panel li a em{background:#0998ce;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px}
.spicetab .panel li:before{display:none}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (max-width:768px){.spicetab .tab-tabs,.spicetab .tab-content{overflow:hidden;width:auto;float:none;display:block}.spicetab .tab-tabs li{display:inline;float:left}.spicetab .tab-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.spicetab .tab-content{border:none}.spicetab .tab-line,.spicetab .panel li time{display:none}}
</style>

Silahkan kalian ganti kode yang berwarna merah dengan dengan alamat url blog kalian
Setelah itu silahkan kalian tekan tombol Publikasikan dan lihat hasilnya
Jika cara diatas divisualisasikan melalui media gambar, maka akan terlihat seperti dibawah ini

4. Sitemap Blogger Responsive Simple

Desain sitemap yang keempat ini merupakan sitemap simple elegan, dimana ketika kalian menggunakan sitemap ini, kalian akan melihat semua daftar artikel blog secara langsung dan sudah dilengkapi dengan tanggal pembuatan serta label artikel tersebut. Selain itu sitemap ini juga sudah dilengkapi dengan fitur responsive.

Langkah pertama silahkan kalian masuk ke akun blogger
Selanjutnya kalian masuk ke menu Halaman dan pilih menu Halaman baru

Setelah itu kalian akan melihat halaman baru, silahkan kalian isi judul halaman tersebut dengan sitemap
Selanjutnya kalian arahlan ke tab/halaman HTML, copy kode dibawah ini dan pastekan di halaman tersebut

<style scoped="" type="text/css">
#comments,#sidebar-wrapper {display:none;}
#post-wrapper {float:none;width:100%;margin:0 auto;max-width:100%;}
</style>

<style scoped="" type="text/css">
#bp_toc {background:#008CDB;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Trebuchet MS';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
#comments {display:none;}
</style>
<div id="bp_toc" style="max-height:1200px;overflow:scroll;overflow-x:auto;">
</div>
<script src='https://cdn.statically.io/gh/BloggerSpice/Sitemap/master/sitemap.js' type='text/javascript'></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

Setelah itu silahkan kalian tekan tombol Publikasikan dan lihat hasilnya
Jika cara diatas divisualisasikan melalui media gambar, maka akan terlihat seperti dibawah ini

5. Sitemap Blogger Responsive Gradient

Sitemap gaya ke lima ini merupakan sitemap yang umum sekali digunakan oleh banyak blogger, sitemap ini sudah dilengkapi dengan fitur responsive dan list artikel sudah disetting sesuai dengan label atau kategori didalam blog

Langkah pertama silahkan kalian masuk ke akun blogger
Selanjutnya kalian masuk ke menu Halaman dan pilih menu Halaman baru

Setelah itu kalian akan melihat halaman baru, silahkan kalian isi judul halaman tersebut dengan sitemap
Selanjutnya kalian arahlan ke tab/halaman HTML, copy kode dibawah ini dan pastekan di halaman tersebut

<style scoped="" type="text/css">
#comments,#sidebar-wrapper {display:none;}
#post-wrapper {float:none;width:100%;margin:0 auto;max-width:100%;}
</style>

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>

<div id="toc">
<script src="https://makingdifferent.github.io/blogger-widgets/sitemappage.js" type="text/javascript"></script>
<script src="https://www.komputerdia.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Silahkan kalian ganti kode yang berwarna merah dengan url blog kalian
Setelah itu silahkan kalian tekan tombol Publikasikan dan lihat hasilnya
Jika cara diatas divisualisasikan melalui media gambar, maka akan terlihat seperti dibawah ini

6. Sitemap Blogger Responsive Sidebar Label

Sitemap yang keenam ini merupakan sitemap yang cukup elegan walaupun terlihat sangat sederhana. Sitemap ini sudah dibuat dengan menu sidebar, dimana ketika kalian melakukan klik di label tersebut, maka secara otomatis konten blog akan tampil di samping sidebar tersebut serta sitemap ini sudah dilengkapi dengan fitur responsive

Langkah pertama silahkan kalian masuk ke akun blogger
Selanjutnya kalian masuk ke menu Halaman dan pilih menu Halaman baru

Setelah itu kalian akan melihat halaman baru, silahkan kalian isi judul halaman tersebut dengan sitemap
Selanjutnya kalian arahlan ke tab/halaman HTML, copy kode dibawah ini dan pastekan di halaman tersebut

<style scoped="" type="text/css">
#comments,#sidebar-wrapper {display:none;}
#post-wrapper {float:none;width:100%;margin:0 auto;max-width:100%;}
</style>

<style type='text/css' scoped='scoped'>
#sidebar-wrapper{display:none!important}#main-wrapper{width:100%!important}#show-cat{float:left;margin:20px 5% 20px 0;width:25%;height:370px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:2px solid #099}#show-cat ul{margin:0;border-top:0 solid #099;padding:0}#show-cat ul li{list-style-type:none;margin:0;border-right:2px solid #099;border-bottom:0 solid #099;border-left:0 solid #099;padding:0}#show-cat ul li a{display:block;padding:10px;border-bottom:2px solid #099}#navi-cat a:hover{color:#fff!important}#show-cat ul li:last-child a{border-bottom:none}#show-cat ul li a,#navi-cat a{background:#fff;color:#555;font-weight:bold;text-decoration:none}#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}#show-cat ul li a:hover,#navi-cat a:hover{background:#666;color:#fff}#show-post{float:left;width:69%;line-height:1.6em}#show-post ul li{list-style-type:none;margin:10px 0 0 -40px;padding:10px;border:2px solid #099}#show-post a:hover{color:#07ACEC}#show-post a{color:#0a9;font-weight:bold}#navi-cat{padding:20px 0}#navi-cat a{margin-right:10px;border:2px solid #099}#navi-cat a,#navi-cat span{padding:10px 15px}#navi-cat span{float:right}#show-cat::-webkit-scrollbar{width:8px;height:8px}#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:2px}#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}#show-cat::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}@media screen and (max-width:768px){#show-cat{width:35%}#show-post{width:59%}}@media screen and (max-width:480px){#show-cat{width:100%;margin:20px 0}#show-post{width:100%}}
</style>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='https://www.komputerdia.com/';cat_numb=9999;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>

Silahkan kalian ganti kode yang berwarna merah dengan url blog kalian
Setelah itu silahkan kalian tekan tombol Publikasikan dan lihat hasilnya
Jika cara diatas divisualisasikan melalui media gambar, maka akan terlihat seperti dibawah ini

7. Sitemap Blogger Dark Elegan Responsive

Sitemap gaya ketujuh ini merupakan gaya yang menurut saya pribadi cukup memberikan warna serta kesan yang berbeda, dimana sitemap ini sangat elegan dan tentunya sudah dilengkapi dengan fitur responsive.

Langkah pertama silahkan kalian masuk ke akun blogger
Selanjutnya kalian masuk ke menu Halaman dan pilih menu Halaman baru

Setelah itu kalian akan melihat halaman baru, silahkan kalian isi judul halaman tersebut dengan sitemap
Selanjutnya kalian arahlan ke tab/halaman HTML, copy kode dibawah ini dan pastekan di halaman tersebut

<style scoped="" type="text/css">
#comments,#sidebar-wrapper {display:none;}
#post-wrapper {float:none;width:100%;margin:0 auto;max-width:100%;}
</style>

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
.tb-sitemap {
    background-color: #222;
    color: #ddd;
    font-family: Verdana,Geneva,Tahoma,Arial,Sans-serif;
    font-size: 14px;
    font-weight: 410;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 9px rgba(0,0,0,.1);
}
.tb-sitemap .toc-header {
    color: #fff;
    font-family: inherit;
    font-weight: 410;
    font-size: 14px;
    background-color: #1A1B1E;
    margin: 0;
    padding: 13px;
    overflow: hidden;
    cursor: pointer;
    border-top: 1px solid #5c5c5c;
    border-bottom: 1px solid #5c5c5c;
    transition: initial;
}
.tb-sitemap .toc-header:hover {
    background: rgb(0,52,52);
    background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(3,106,30,1) 38%, rgba(0,182,182,1) 100%);
}
.tb-sitemap .toc-header:before {
    content: '';
    width: 0;
    height: 0;
    position: relative;
    float:right;
    top: 10px;
    right: 10px;
    border: 5px solid transparent;
    border-color: #aaa transparent transparent;
    transition: all .3s ease;
}
.tb-sitemap .toc-header.active {
    background: #1a1b1e;
    color: #fff;
}
.tb-sitemap .toc-header.active:before {
    border-color: #fff transparent transparent;
    top: 5px;
    -webkit-transform: rotateundefined-180deg);
    -moz-transform: rotateundefined-180deg);
    -ms-transform: rotateundefined-180deg);
    -o-transform: rotateundefined-180deg);
    transform: rotateundefined-180deg);
}
.tb-sitemap .loading {
    display: block;
    padding: 14px;
    text-decoration: blink;
}
.tb-sitemap ol {
    margin: 0;
    padding: 0;
    list-style: none;
    transition: initial;
}
.tb-sitemap li {
    counter-increment: step-counter;
    line-height: normal!important;
    margin: 0!important;
    padding: 7px 7px 7px 16px!important;
    white-space: nowrap;
    text-align: left;
    overflow: hidden;
    transition: initial;
}
.tb-sitemap li:first-child {
    background: rgb(0,52,52);
    background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 100%);}
.tb-sitemap li:nth-child(2n) {
    background: rgb(71,62,62);
    background: linear-gradient(90deg, rgba(71,62,62,1) 19%, rgba(0,0,0,1) 38%, rgba(0,52,52,1) 100%);}
.tb-sitemap li:nth-child(2n+3) {
    background: rgb(0,52,52);
    background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 100%);}

.tb-sitemap li::before {
    content: counter(step-counter)'.';
    margin-right: 5px;
}
.tb-sitemap a {
    color: #fff!important;
    text-decoration: none;
    font-size: 90%;
    transition: initial;
    font-weight:normal!important;
}
.tb-sitemap a:visited {
    color: #fff!important;
    transition: initial;
}
.tb-sitemap a:hover,.tb-sitemap a:visited:hover {
    color: #fff!important;
    text-decoration: underline!important;
    transition: initial;
}
</style>

<div class="tb-sitemap" id="tb-sitemap">
<span class="loading">Sitemap Loading..</span>
<script type="text/javascript">
var toc_config = {
 url: 'https://www.komputerdia.com',
 containerId: 'tb-sitemap',
 showNew: 12,
 newText: ' <strong style="font-weight:normal;font-style:normal;color:#000;font-size:11px;background:#fff000;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">New!</strong>',
 sortAlphabetically: {
  thePanel: true,
  theList: true
 },
 maxResults: 9999,
 slideSpeed: {
  down: 400,
  up: 400
 },
 slideEasing: {
  down: null,
  up: null
 },
 slideCallback: {
  down: function() {},
  up: function() {}
 },
 clickCallback: function() {},
 jsonCallback: '_toc',
 delayLoading: 0
};
</script>
<script src="https://amanbhattarai4400.github.io/twistblogg/sitemap.js" type="text/javascript"></script>
</div>
</div>

Silahkan kalian ganti kode yang berwarna merah dengan url blog kalian
Setelah itu silahkan kalian tekan tombol Publikasikan dan lihat hasilnya
Jika cara diatas divisualisasikan melalui media gambar, maka akan terlihat seperti dibawah ini

Cara Membuat Sitemap Blogger Responsive, Keren dan Seo Friendly

Cara Membuat Sitemap Blogger Responsive

1. Sitemap Blogger Responsive Otomatis

2. Sitemap Blogger Responsive Elegan

3. Sitemap Blogger Responsive Purple

4. Sitemap Blogger Responsive Simple

5. Sitemap Blogger Responsive Gradient

6. Sitemap Blogger Responsive Sidebar Label

7. Sitemap Blogger Dark Elegan Responsive

0 Response to "Cara Membuat Sitemap Blogger Responsive, Keren dan Seo Friendly"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Kategori Artikel Pilihan