Blogger

Cara Terbaru Membuat Sitemap SEO Otomatis di Blogspot 2019

Cara Membuat Sitemap untuk blogger di halaman statis | Pada kesempatan kali ini admin akan berbagi tutorial cara untuk menambahkan daftar isi blog di blogger berdasarkan label secara otomatis.

Sitemap atau peta situs merupakan salah satu atribut yang harus ada pada sebua website agar pengunjung lebih mudah untuk mencari artikel sesuai dengan topik yang mereka cari.

Cara membuat sitemap otomatis di blogger bisa memanfaatkan halaman statis yang sudah ada, sehingga sitemap tidak muncul di homepage blog.

Dari beberapa sayarat agar blog bisa diterima google adsense, salah satunya adalah membuat sitemap (daftar isi) pada blog.

Dan kata mastah SEO, sitemap pada blog berpengaruh terhadap proses indexing artikel di mesin pencarian google.

Melihat betapa pentingnya peta situs pada sebuah blog, maka dari itu sobat harus segera membuat sitemap pada blog sobat, agar lebih cepat terindex google.

Untuk membuat peta situs pada blogspot membutuhkan beberapa script code untuk disimpan dihalaman statis.

Namun sobat tidak perlu repot-repot lagi membuat kode tersebut, karena dibawah ini saya akan berikan beberapa tipe sitemap pada blog yang bisa sobat gunakan.

Langsung saja kita masuk ke tutorial cara menambahkan sitemap pada blog dengan mudah, ringan dan seo friendly.

Cara Membuat Sitemap Otomatis di Halaman Statis Pada Blogger

1. Cara membuat Sitemap dropdown keren

Pertama, masuk ke edit HTML pada blog sobat masing-masing.

cara membuat sitemap otomatis

Kemudian simpan kode CSS sitemap dibawah ini DIATAS / SEBELUM </style>

/* Blogger Sitemap Dropdown */
 #sitemap1 {
    background-color:#fff;
     color:#1d2129;
     font-weight:400;
     border:1px solid #ccc;
}
 #sitemap1 .loading {
    padding:10px 15px;
     color:#666;
}
 #sitemap1 .judul {
    background-color:#008c5f;
     color:#fff;
     font-size:125%;
     font-weight:600;
     padding:15px;
     cursor:pointer;
     border-bottom:1px solid #fff;
     letter-spacing:1px;
     transition:all .3s ease;
    text-transform: capitalize;
}
 #sitemap1 .judul:before{
    height: 20px;
    width: 20px;
    display: inline-block;
    float: right;
    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' fill='%23fff'/%3E%3C/svg%3E");
}
 #sitemap1 .judul:last-child {
    border-bottom:0px;
}
 #sitemap1 .judul:hover {
    background-color:#1d2129;
}
 #sitemap1 .judul.aktif {
    background-color:#1d2129;
}
 #sitemap1 .judul.aktif:before {
    border-color:#fff transparent transparent;
     top:5px;
     -webkit-transform:rotate(-180deg);
     -moz-transform:rotate(-180deg);
     -ms-transform:rotate(-180deg);
     -o-transform:rotate(-180deg);
     transform:rotate(-180deg)
}
 #sitemap1 .konten ol, #sitemap1 .konten ol li {
    list-style:none;
     list-style-type:none;
     margin:0px;
     padding:0px;
     font-weight:400;
}
 #sitemap1 .konten ol li:nth-of-type(even) {
    background-color:#e9e9e9;
}
 #sitemap1 .konten ol li:nth-of-type(odd) {
    background-color:#fff
}
 #sitemap1 .konten ol li a {
    text-decoration:none;
     padding:10px 15px;
     display:block;
     color:#666;
     line-height:1.5em;
     transition:all .3s ease;
}
 #sitemap1 .konten ol li a:hover {
    color:#000;
}

Kedua, silahkan sobat buat postingan baru pada halaman statis di blog sobat masing-masing.

sitemap di blogger

Kemudian berikan judul terlebih dahulu agar permalinknya bisa sesuai dengan judul nanti.

Jika sudah silahkan tambahkan kode sitemap berikut pada postingan yang baru sobat buat.

<div id="sitemap1"><div class="loading">Loading....</div></div>
<script> //<![CDATA[
/* Blogger Sitemap Dropdown */
var toc_config = {containerId:'sitemap1', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemap1',delayLoading: 0};
window.onload = function(){
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"judul\">'+n[g]+'</div>',l+='<div class=\"konten\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div>'}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://www.jejaker.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
}
//]]> </script>

Catatan: Ganti https://www.jejaker.com dengan url blog sobat masing-masing

2. Sitemap blogspot style 2

Nah, pada sitemap blogger versi 2 atau style 2 ini sobat tidak perlu lagi edit HTML.

Cukup buat postingan baru di halaman statis kemudian simpan kode peta situs blogspot dibawah ini pada postingan tersebut:

<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.staticaly.com/gh/jejaker/master/42fa2f0e/sitemap%20versi%202" type="text/javascript"></script>
<script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>

3. Sitemap blogger style 3

Nah, ada pilihan lain lagi ni untuk membuat sitemap otomatis berdasarkan label pada blog

<style type="text/css">
.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
position:relative;color:#333;border: 1px solid #9C9C9C;}
.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;
color:white;}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
.tabbed-toc .toc-tabs {width:20%;float:left;}
.tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Freesans,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}
.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
text-decoration:none;outline:none;overflow:hidden;}
.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
border-bottom:4px solid #275827;overflow:hidden;}
.tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
.tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
background-color:#333;color:white;outline:none;}
.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}
.post ol li::before {content: none;}
.post ol li {margin:0;}
@media (max-width:700px) {
.tabbed-toc {border:2px solid #333}
.tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
.tabbed-toc .toc-tabs li {display:inline;float:left;}
.tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#2f77bd;box-shadow:2px 0 7px rgba(0,0,0,.4);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {display:none}
.tabbed-toc .panel li a{height: auto;}
</style>
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
blogUrl: "/", // 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.staticaly.com/gh/jejaker/master/b312a9d6/Sitemap%20versi%203"></script>

Nah, itu dia sob 3 style sitemap blog yang bisa sobat gunakan sesuai dengan selera sobat masing-masing.

Demikian tutorial cara membuat sitemap (daftar isi) otomatis di blog berdasarkan label di halaman statis. semoga bermanfaat

Leave a Reply

Your email address will not be published. Required fields are marked *