Membuat laman sitemap adalah hal yang paling penting diblogspot bahkan di web beser sekalipun untuk menampilkan berbagai daftar isi dari artikel yang kita buat untuk memudahkan para pembaca atau para pencai informasi yang dibutuhkan dan tentunya tersedia di blog yang kita kelola, kita akan memperlihatkan Cara Membuat Sitemap Responsive Keren di Blogger.
Berdasarkan informasi dari google sitemap adalah file yang berisi daftar post dari sebuah blogspt/web yang memberi tahu google mesin pencari lainnya (Search Engine) tentang strukur konten dalam blog/web tersebut.
 |
| Sitemap Responsive Keren di Blogger |
Sitemap terbagi menjadi dua macam yaitu XML sitemap dan HTML sitemap, perbedaan utama diantra keduanya ialah format penulisan untuk siapa sitemap tersebut ditujukan, silahkan baca terlebih dahulu pentingya sitemap pada blogger agar memahami kedua sitemap yang disebut diatas karena disini kita akan fokus membuat sitemap yang keren.
Sitemap yang akan kita buat adalah sitemap HTML yang berfungi untuk menampilkan daftar isi semua judul postingan kita di satu halan, selain memudhkan pengunjung untuk melihat keleluruhan isi situs, HTML sitemap juga mempermuda bot mesin pencari untuk memindai dan memetakan semua konten yang ada di blog kita.
Caranya cukup mudah tinggal salin kode-kode source yang sudah disedian di sini kemudian simpan ikuti langkah-langkahnya agar tidak ada error pada saat menggunakannya.
Cara Membuat Sitemap Responsive Keren di Blogger (Bloggspot)
Meski sitemap yang kitu buat ini hanya menampilkan semua judul potingan artikel yang kita buat namun bukan berarti sitemap bisa dibuat dengan sadanya kalu bisa bikin yang keren dan juga responsive akan menjadi nilai plus bagi pengelola web, tidak perlu submit artikel karena kita fokus membuat sitemap yang keren dan responsive berdasarkan tag/lebel juga dengan warna yang bagus dilengkapi dengan kapan dibuat, untuk melihat halilnya kamu bisa lihat dibawah!
 |
| Sitemap responsive dari komputer |
Tidak hanya keren sitemap yang kamu buat juga responsive dari pernagkat komputer seta diakses dari perangkat mobile akan terlihat sangat bagus seperti contoh dibawah!
 |
| Sitemap responsive dari Mobile |
Buat kamu yang ingin mencoba membuatnya silahkan langsung praktek Membuat Sitemap Responsive Keren di Blogger (Bloggspot) berikut:
1. Cek JQuery
Untuk melangkapi script yang akan kita gunakan tentunya membutuhkan JQuery agar dapat bekerja dengan sempurna, template blogger umumnya sudah support jQuery tapi kalu ternyata belum ada di struktur template html bloger yang kamu pakai jQuery harus ditambahkan terlebih dahulum untuk mengeceknya silahkan ikuti panduan berikut ini.
- Login ke dasboard blogger
- Masuk ke menu TEMA >> Edit HTML
- Gunakan shortcut Ctrl+F lalu cari "jQuery"
- Jika sudah ditemukan lanjut ke langkah selanjutnya
- Tambahkan kode berikut sebelum tag </head> dan simpan
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
2. Salin Kode untuk Membuat Sitemap Blogger
- Login ke dasboard Blogger Buat halaman baru memalali menu Halaman >> Halaman Baru
- Beri judul "Sitemap" atau nama lain yang kamu inginkan
- Gantilah kode teks dari COMPOSE ke HTML
- Salin deretan kode berikut jangan ada yang dirubah kecuali ganti link :https://postingasik.blogspot.com/ yang berwarna kuning dengan situs kamu sendiri
<div class="spicetab" id="spicetab"></div>
<script>
var tabbedTAB={blogUrl:"https://postingasik.blogspot.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://postingasik.blogspot.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(//sd(-c)?//,"/s"+g.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+g.noThumb.replace(//sd(-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>
Setelah kamu menyelesaikan semua panduan diatas maka seeharusnya sudah berhasil sitemap yang dibuat berfungsi sebaimana mestinya sebab sebelum membuat tutorial ini sources sudah diuji terlebuh dahulu, terimaksih semoga kamu senang.
Post a Comment for "Cara Membuat Sitemap Responsive Keren di Blogger (Bloggspot)"