Cara Membuat Sitemap Keren, Responsive dan Seo Friendly di Blogger
komputerdia.com - Sitemap atau Peta Situs merupakan salah satu elemen yang sangat penting pada sebuah blog atau situs, sitemap ini pada dasarnya akan dijadikan suatu alat bantu untuk para webmaster untuk mempermudah pengunjung atau bahkan mesin pencari (search engine) dalam melakukan pengenalan serta ekplorasi terhadap semua elemen yang terdapat di dalam website/blog. Dengan adanya sitemap, mesin pencari seperti google dapat dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya. Sama halnya dengan webiste pada umumnya, blog juga memerlukan sitemap agar mesin pencari dapat dengan mudah mendeteksi konten di dalamnya, dalam sistem sitemap ini juga pengguna dapat melakukan submit peta web berbasis XML langsung ke mesin pencari google melalui sebuah console yang sudah disediakan oleh google.
Membicarakan masalah sitemap, dalam artikel ini saya akan membagikan beberapa desain sitemap blogger responsive, keren dan seo friendly yang bisa diterapkan pada blog yang kalian kelola. Cara pemasangan sitemap sendiri kalian tidak perlu melakukan perubahan atau penambahan pada menu edit html, namun untuk melakukan pemasangan sitemap ini kalian hanya perlu menambahkan satu halaman statis yang akan diterapkan kode khusus.
Cara Membuat Sitemap SEO dan Responsive
1. Sitemap Responsive Load
Desain sitemap pertama ini merupakan desain sitemap responsive yang mengambil tema loader, dimana ketika kaian melakukan klik pada judul label/kategori maka secara otomatis judul konten blog kalian akan dimuat didalamnya
- 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="https://goo.gl/2qrReh" media="screen" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
var showNew = true,
accToc = true,
openNewTab = true,
maxNew = 10,
baru = "Baru !",
sDownSpeed = 600,
sUpSpeed = 600;
</script>
<script src="https://goo.gl/6FjxRX" type="text/javascript"></script>
<script src="https://www.komputerdia.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
- Silahkan kalian ganti kode yang berwarna merah dengan alamat blog yang kalian miliki
- 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 Responsive Sidebar
Desain sitemap kedua ini merupakan sitemap responsive yang dibuat dengan gaya sidebar, dimana ketika kalian melakuka klik pada menu atau label maka secara otomatis list postingan artikel akan keluar dibagian kanan layar seperti yang tertera pada gambar diatas
- 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:0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px solid #e6e6e6}#show-cat ul{margin:0;padding:0}#show-cat ul li{list-style-type:none;margin:0;padding:0}#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #e6e6e6}#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:#232531;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:#232531;color:#fff}#show-post{float:left;width:69%;line-height:1.6em}#show-post ul li{list-style-type:none;padding:10px;}#show-post a:hover{color:#07ACEC}#show-post a{font-weight:bold}#navi-cat{padding:20px 0}#navi-cat a{margin-right:10px;border:1px solid #ccc}#navi-cat a,#navi-cat span{padding:10px 15px}#navi-cat span{float:right}.post-body ul{margin:0!important}#show-cat::-webkit-scrollbar{width:8px;height:8px}#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);}#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}#show-cat::-webkit-scrollbar-thumb{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=10;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+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#232531!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></div>
<div style="clear:both;"></div>
- Silahkan kalian ganti kode yang berwarna merah dengan alamat blog yang kalian miliki
- 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 Responsive Simple
Sitemap gaya ketiga ini merupakan sitemap responsive yang didesain dengan gaya simpel dan sudah disisipkan kode seo friendly, kelebihan sitemap ini adalah mampu menampilkan total jumlah keseluruhan artikel didalam 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>
/* Sitemap Blogger Responsive */
#sitemap .title {background-color:#448ccb; color:#fff; font-size:150%; font-weight:400; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap a {color:#212121; text-decoration:none; transition:all .3s ease;}
#sitemap a:hover {color:#000;}
#sitemap ol {margin:0px; padding:0px;}
#sitemap ol li {color:#212121; font-weight:400; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}
</style>
<div id="sitemap">Loading...</div>
<script> //<![CDATA[
var start=1;var max=150;var sitemapArr=new Array();function runsitemap(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap(root){var elem=document.getElementById('sitemap');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){sitemapArr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runsitemap()} else{var print='',a=sitemapArr.sort(function(a,b){return a.judul>b.judul?1:-1});for(var x=0;x<a.length;x++){print+='<li><a href=\"'+a[x].url+'\" title=\"'+a[x].judul+'\">'+a[x].judul+'</a></li>'} elem.innerHTML='<div class=\"judul\">Total Post: '+a.length+'</div><ol>'+print+'</ol>'}}} runsitemap();
//]]> </script>
- 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 Responsive Elegan
Sitemap keempat ini merupakan sitemap yang didesain dengan gaya elegan dan sudah mempunyai fitur responsive shingga tampilan sitemap ini akan selalu mengikuti lebar dan besar dari perangkat yang digunakan.
- 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://blogurl.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 alamat blog yang kalian miliki
- Setelah itu silahkan kalian tekan tombol Publikasikan dan lihat hasilnya
- Jika sitemap ini gagal dimuat di blog kalian, pastikan terlebih dahulu bahwa didalam blog kalian sudah terdapat kode dibawah ini
- <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
- Jika belum ada silahkan copy kode diatas dan simpan kode tersebut tepat diatas kode </head>
- Jika cara diatas divisualisasikan melalui media gambar, maka akan terlihat seperti dibawah ini
5. Sitemap Responsive Blogger Elegan
Sitemap kelima ini merupakan desain sitemap responsive elegan. dengan menggunakan sitemap versi ini maka kalian akan melihat deretan daftar artikel secara otomatis sesuai dengan labael artikel yang sudah kalian tentukan
- 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: #3498DB;
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{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>
<script src="https://www.komputerdia.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
- Silahkan kalian ganti kode yang berwarna merah dengan alamat blog yang kalian miliki
- 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 Responsive Gradient
Sitemap yang keenam ini merupakan hasil modifikasi dari sitemap gaya kelima, dimana pada sitemap ini warna yang digunakan adalah gabungan dua warna atau dikenal dengan istilah gradient. Untuk masalah fitur, sitemap ini juga sudah di setting denngan tampilan yang sangat 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">
#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&alt=json-in-script&callback=loadtoc">
</script></div>
- Silahkan kalian ganti kode yang berwarna merah dengan alamat blog yang kalian miliki
- 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 Responsive Blogger Detail
Desain sitemap yang ketujuh ini merupakan sitemap yang mempunyai tampilan sangat detail, dimana jika kalian menggunakan sitemap jenis ini, maka kalian akan melihat nama label, tanggal publikasi artikel serta akan menampilkan jumlah artikel 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>
/* CSS Sitemap */
#bp_toc{background:transparent;width:100%;color:#999;margin-top:10px;margin:0 auto;padding:5px}
.toc-header-col1{padding:15px!important;line-height:15px;background-color:#f56954;width:250px;transition:all 0.3s ease-in-out}
.toc-header-col2{padding:15px!important;line-height:15px;background-color:#2c323c;width:75px;transition:all 0.3s ease-in-out}
.toc-header-col3{padding:15px!important;line-height:15px;background-color:#252a32;width:125px;transition:all 0.3s ease-in-out}
.toc-header-col1:hover,.toc-header-col2:hover,.toc-header-col3:hover{opacity:0.9}
.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:15px;text-transform:lowercase;text-decoration:none;color:#fff;font-family:'Viga';font-weight:400;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{padding:10px;font-size:92%;;transition:all 0.3s ease-in-out}
.toc-entry-col1:hover,.toc-entry-col2:hover,.toc-entry-col3:hover{background:#fdfdfd}
.toc-entry-col1:nth-child(odd),.toc-entry-col2:nth-child(odd),.toc-entry-col3:nth-child(odd){padding:10px;font-size:92%}
.toc-entry-col1:nth-child(even),.toc-entry-col2:nth-child(even),.toc-entry-col3:nth-child(even){padding:10px;font-size:92%}
.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{text-decoration:none;color:#666;transition:all 0.3s ease-in-out}
.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#f56954}
span.toc-note{padding:10px;margin:10px 0;display:inline-block;background:#fff;color:#666}
#bp_toc table{width:100%;margin:0 auto;border-collapse:collapse;border-spacing:0;border-color:transparent}
#bp_toc tr:nth-child(even){background:#fafafa}
#bp_toc tr:nth-child(odd){background:#f5f5f5}
</style>
<div id="bp_toc">
Loading Sitemap. Please wait....</div>
<script src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<b:if cond="data:blog.pageType == "https://www.komputerdia.com/p/sitemap.html""> <style scoped="" type="text/css">
#outer-wrapper {width:100%;max-width:1000px;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
.banner,#footer-wrapper,#comments,#sidebar-wrapper,#header-wrapper,#menu-wrapper {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
</style> </b:if>
- Silahkan kalian ganti kode yang berwarna merah dengan alamat blog yang kalian miliki
- Setelah itu silahkan kalian tekan tombol Publikasikan dan lihat hasilnya
- Jika cara diatas divisualisasikan melalui media gambar, maka akan terlihat seperti dibawah ini
Demikian artikel kali ini yang bisa saya bagikan, semoga dapat bermanfaat serta dapat membantu kalian dalam membuat halaman sitemap di blogger
0 Response to "Cara Membuat Sitemap Keren, Responsive dan Seo Friendly di Blogger"
Post a Comment