+15 Cara Membuat Halaman Sitemap Responsive di Blogger Terbaru

Mokanesia.com - Banyak cara membuat halaman sitemap responsive dan keren di Blogger. Mulai sitemap ala Arlina Design dan blogger-blogger lainnya. Membuat sitemap di blogspot memang sangat mudah hanya tinggal copy paste pun jadi.

Namun sekarang kita harus memilih sitemap yang responsive untuk tampilan mobile dan tentunya tidak membebani kinerja kecepatan load blog kamu. Dan untuk tampilan sitemap itu selera masing-masing ada yang membuat sitemap yang terpenting responsive, ada yang mencari sitemap yang simpel dan ada yang memikirkan responsive dan tampilannya untuk blog mereka.

Sebelum itu pahami dulu apa itu sitemap dan kegunaannya itu untuk apa, bisa baca penjelasannya dibawah ini.

Pengertian Sitemap?

Secara singkat, sitemap atau peta situs ialah halaman khusus yang dibikin untuk kumpulkan semua data url yang ada pada website Kamu. Memberi bermacam info yang terjadi pada website Kamu ke mesin pencari. Ini bisa mencakup semua keadaan data url website Kamu waktu itu juga.

Kegunaan Sitemap Blog?

Karena ada sitemap, website Kamu makin lebih gampang untuk mengenalkan data url ke Search Engine. Hingga, website Kamu akan bisa lebih cepat terindeks di mesin perayap Google. Ini termasuk juga salah satunya panduan simpel SEO (Search Engine Optimization) yang kerap jadi perhatian oleh beberapa kelompok blogger.

Sitemap secara automatis akan terupdate saat Kamu mempublikasikan artikel terkini. Pasti, ini akan memberitahukan ke mesin pencari jika website Kamu masih diatur secara baik dan masih memberi faedah ke beberapa orang.

Sitemap dapat menolong pengunjung untuk menyaksikan bermacam jenis kelompok artikel menurut cap yang berada di website Kamu. Dengan itu, pengunjung bisa dengan gampang untuk mendapati artikel apa yang Dia mencari. Sebagai contoh dapat Kamu saksikan sitemap ngeblogger.com.

Menurut master blogger yang pernah saya tanya, sitemap sendiri dapat menggerakkan pageview dan kurangi bounce rate pada website Kamu. Pasti ini akan membuat website Kamu akan lebih bagus dari sebelumnya.

Baca Juga

Membuat Halaman Contact Us & Halaman Lainnya di Blogger

Cara Membuat Halaman Privacy Policy & Disclaimer di Blogger

Bagaimana sudah paham apa itu sitemap blog dan kegunaanya? Sekarang jika kamu sudah paham langsung saja meluncur ke tutorial cara membuat halaman sitemap blog karena ini akan panjang.

Membuat Halaman Sitemap Di Blogger

Disini akan saya jelaskan mengenai cara membuat halaman sitemap dan akan saya berikan beberapa versi desain atau tampilan dari sitemap. Jadi silahkan pilih tampilan yang kamu suka untuk kamu pasang di blog kamu.

Cara Membuat Halaman Sitemap Ala Arlina Design

Versi 1 Ala Arlina Design

1. Sebelum itu copy terlebih dahulu kode JQUERY dibawah ini lalu paste di HTML blog kamu, tepatnya sebelum tag </head> atau </body>. Jika kode tersebut sudah ada pada blog kamu maka langsung lanjut ke langkah berikutnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

2. Setelah anda menempatkan kode JQUERY diatas pada HTML blog kamu, selanjutnya kamu pergi ke menu Pages/Halaman lalu buat Halaman Baru dan beri judul Sitemap.

Dan ubah tampilan menulis menjadi tampilan HTML dan copy code dibawah ini kemudian paste kode ini pada halaman sitemap tadi.

<!-- Sitemap by MOKANESIA.COM -->
<div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#fafafa;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 0 1px #eee;}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fafafa;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #eee;transition:initial;}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header:hover{background-color:#fafafa;}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content .toc-header.active:before{border-color:#fc4f3f transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.post ol li a,.post ol li a:link{color:#444!important;text-decoration:none;font-size:86%;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#fcfcfc!important;transition:initial;border-bottom:1px solid #e9e9e9;border-top:1px solid #fff;}
.table-of-content li:first-child(border-top:0}
.table-of-content li:last-child(border-bottom:0}
.post ol li a:visited{color:#999;transition:initial}
.post ol li a:link:hover,.post ol li a:visited:hover{color:#fc4f3f;text-decoration:underline;transition:initial}
.post ol li:before{display:none}
ol {text-shadow:initial;}
    url: 'https://blogdemofortutorial123.blogspot.com/',
.post a:link {color:#444!important;}
.post-footer {display:none;!important;}
.comments {display:none;!important;}
</style><br />
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span>&llt;/div>
<script>
var toc_config = {

    containerId: 'table-of-content',
    showNew: 5,

    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#fc7569;padding:1px 6px 2px 6px;line-height:normal;float:right;border-radius:3px;text-transform:uppercase;">baru</strong>',
    sortAlphabetically: {

        thePanel: true,

        theList: true

    },

    maxResults: 9999,

    activePanel: 0,

    slideSpeed: {

        down: 400,

        up: 400

    },

    slideEasing: {

        down: null,

<script src="https://cdn.rawgit.com/anditochatul/daftar-isi/master/sitemapblog.js"></script>
        up: null

    },

    slideCallback: {

        down: function() {},

        up: function() {}

    },

    clickCallback: function() {},

    jsonCallback: '_toc',

    delayLoading: 0

};

</script>


</div>
<!-- Sitemap by MOKANESIA.COM -->

3. Ganti tulisan background merah dengan alamat blog kamu. Setelah itu ke menu bagian kiri yaitu Opsi Komentar Pembaca pilih yang 'Jangan izinkan, sembunyikan yang ada.' lalu klik Publikasikan.

Seperti itu langkah-langkah membuat sitemap di blog dan untuk versi dibawah langkahnya sama saja dengan versi 1 diatas. Hanya nanti akan ada kode yang harus di paste di HTML Blog bukan di halaman saja. 

Cara Membuat Halaman Sitemap Arlina Design Di Blog

Veris 2 Ala Arlina Design

1. Pastikan di dalam blog kamu sudah ada kode JQUERY jika belum scroll keatas dan copy kode JQUERY tersebut sebelum </head> atau </body> pada HTML blog kamu. 

2. Copy kode dibawah ini lalu paste kan ke dalam tampilan HTML pada halaman sitemap.

<!-- Sitemap by MOKANESIA.COM -->
<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=99999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.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:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.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-weight:500;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 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#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);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7}
#bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
#bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}
@media screen and (max-width:768px) {
#bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}}
</style>
 <!-- Sitemap by MOKANESIA.COM --> 

Cara Membuat Halaman Sitemap Responsive Di Blog

Versi 3

1. Copy kode dibawah ini pada tampilan HTML di halaman sitemap blog kamu.

<!-- Sitemap by MOKANESIA.COM --> 
<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 ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;
color:white;}
.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;
.tabbed-toc .toc-tabs {width:20%;float:left;}
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.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 .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}
.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
.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 .summary {display:block;padding:10px 12px 10px;font-style:italic;
border-bottom:4px solid #275827;overflow:hidden;}
background-color:#333;color:white;outline:none;}
.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 {
.tabbed-toc .panel li.bold a:hover,
.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 .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.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
showSummaries: false, // `true` to show the posts summaries
.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
numChars: 200, // Number of summary chars
newTabLink: true, // Open link in new window?
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"
],
maxResults: 99999, // Maximum post results
<!-- Sitemap by MOKANESIA.COM -->
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: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>  

Cara Membuat Halaman Sitemap Keren Di Blogspot

Versi 4

1. Copy kode dibawah ini lalu paste-kan pada tampilan HTML di Halaman SItemap blog kamu. Lalu klik Publikasikan.

<!-- Sitemap by MOKANESIA.COM --> 
<div class="jontor">
<script src="https://rawgit.com/rezamuhamad/rakinfo/master/sitemap.js"></script>
<script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=rak_info_Load"></script>
</div>
<style type="text/css">.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .rak_info_Label{background:#89abbc;color:#fff;text-decoration:none;display:block;padding:5px 0px 5px 10px;font:13px 'Arial';font-weight:bold;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .4em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#fff;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#89abbc;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#89abbc;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.rak_info_Postname li:nth-of-type(odd){background:#f1f3f3;}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:12px 'Arial';padding:0;margin-bottom:2em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
<!-- Sitemap by MOKANESIA.COM -->  
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>

Cara Membuat Halaman Sitemap Keren Di Blog

Versi 5

1. Copy kode dibawah ini kemudian paste-kan di halaman sitemap kamu pada tampilan HTML dan ganti kode background merah dengan alamat blog kamu(baca keterangan yang tertulis), lalu Publikasikan.

<!-- Sitemap by MOKANESIA.COM -->
<style type='text/css' scoped='scoped'>
#show-cat{background: #3498db;float:left;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px}
#show-cat ul{margin:0;border-top:1px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px}
#show-cat ul li a,#navi-cat a{background:#005fbb;color:#ffffff;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:15px}
  #show-post ul li a{color:#fff;}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:60%;background:#005fbb;}
#show-post ul li{color: #fff;list-style-type:none;padding-bottom:15px}
#navi-cat{padding:20px 0}
<script type='text/javaScript'>
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px}
#navi-cat span{float:right}
</style>
<div id='show-cat'></div>
<div id='show-post'>
var cat_home='https://blogdemofortutorial123.blogspot.com/';cat_numb=11;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:#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>
</div>
<div style='clear:both'></div>
<!-- Sitemap by MOKANESIA.COM --> 

*Pada background merah ganti dengan alamt blog kamu

*Pada background biru ganti angka 11 dengan selera kamu, karena angka 11 menunjukan berapa artikel yang ditampilkan pada sitema.

Cara Membuat Halaman Sitemap Di Blogger

Versi 6 Very Simpel

1. Buka halaman sitemap dan pada tampilan HTML, pastekan kode dibawah ini dan ganti tulisan background merah dengan alamat blog kamu. Setelah itu Publikasikan.

<!-- Sitemap by MOKANESIA.COM -->
<script style="text/javascript" src="https://cdn.rawgit.com/mowdot/mysitemap/master/sitemapku.js"></script>
<script src="https://blogdemofortutorial123.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<!-- Sitemap by MOKANESIA.COM --> 

Cara Membuat Halaman Sitemap Responsive dan Keren Di Blog

Versi 7

1. Buka halaman sitemap lalu ubah ke tampilah HTML, copy dan paste kode dibawahini ke tampilan HTML dan ganti tulisan background merah dengan alamar blog kamu, lalu Publikasikan.

<!-- Sitemap by MOKANESIA.COM -->  
<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);
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);
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
border-radius:4px;-moz-border-radius:4px;
padding:1px 0 2px 11px;background: #3498DB;
border:1px solid #2D96DF;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
.labl:first-letter{text-transform:uppercase;}
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
  .postname li a{text-decoration: none;color:#000;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{margin-bottom: 6px;font-size: 14px;border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script src="https://blogdemofortutorial123.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
<script src="https://cdn.rawgit.com/penaindigo/Pena-Indigo-Code/a134f9de/sitemappenaindigo.js" type="text/javascript"></script>
</script></div>
<!-- Sitemap by MOKANESIA.COM --> 

Cara Membuat Halaman Sitemap Otomatis Di Blog

Versi 8

1. Pergi ke halaman sitemap copy dan paste kode dibawah ini pada tampilan HTML, lalu Publikasikan.

<!-- Sitemap by MOKANESIA.COM --> 

<div id="sitemap-blog">
  <table>
        <td>
    <tbody>
      <tr>
          <label for="feed-order">Urutkan artikel berdasarkan:</label>
        </td>
        <td>
          <select id="feed-order">
            <option value="updated">Artikel yang terakhir di update</option>
            <option selected="" value="published">Artikel terbaru</option>
          </select>
        </td>
      </tr>
      <tr>
          <select disabled="" id="label-sorter">
        <td>
          <label for="label-sorter">Filter artikel berdasarkan kategori:</label>
        </td>
        <td>
          <label for="feed-q">Cari artikel dengan kata kunci:</label>
            <option selected="">Loading....</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
        </td>
        <td>
    </tbody>
          <form id="post-searcher">
            <input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" />
          </form>
        </td>
      </tr>
  </table>
</div>
var head = document.head || document.getElementsByTagName('head')[0];
<br />
<header id="result-desc"></header>
<br />
<ul id="daftar-isi-blog"></ul>
<div id="feed-nav">
</div>

<script type="text/javascript">
var style = document.createElement('style');
var css = '#sitemap-blog{padding:7px 10px;margin:0 auto}#sitemap-blog table{width:auto;margin:0 auto;border:none!important}#sitemap-blog table td{border:none!important;padding:0!important}#sitemap-blog form{font:inherit}#sitemap-blog label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}#sitemap-blog select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#sitemap-blog input,#sitemap-blog select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#sitemap-blog select option{min-height:1.4em!important}#sitemap-blog input#feed-q{padding:5px 10px!important}#daftar-isi-blog{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}#daftar-isi-blog li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}#daftar-isi-blog li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}#daftar-isi-blog li a{text-decoration:none;color:#2C2C2C;font-weight:500}#daftar-isi-blog li a:hover{text-decoration:none;color:#E94141}#daftar-isi-blog li .news-text{margin-top:5px;line-height:1.3em!important}#daftar-isi-blog li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;width:140px!important}#result-desc{margin:0;padding:0}#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#result-desc div{color:inherit}#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}#feed-nav a,#feed-nav span:hover{color:#1B1B1B}#feed-nav a:active,#feed-nav a:hover{color:#555}#feed-nav span{cursor:wait}@media (max-width:600px){#sitemap-blog table{margin:0 auto;width:100%}#daftar-isi-blog,#sitemap-blog{margin:0 auto}#daftar-isi-blog li .inner{margin:5px auto;height:auto}#feedContainer li{float:none;display:block;width:auto;height:auto}#daftar-isi-blog li .news-text,#feedContainer:after,#daftar-isi-blog li img{display:none!important}}.post-body{min-height:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2er9U93OVDGASWHuwnvlMTtBfQ_0OPJD81OLQPy5IXXqHkz00-hNX3KHqOP-wyQclKmOh83pnHlPla9AIA6TFwXaFLebpf7bLnBd9B2w4zqpE9ocIjn7ZJ1_XlMASVUOHNw7s0IZkzF0/w220-h19-no/ajax-loader+%25281%2529.gif)50% 50% no-repeat!important}';
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
head.appendChild(style);
</script>
<script type='text/javaScript'>
document.write;
var loadToc, loadCategories, _toc = {
                thumbHeight: 95,
    init: function() {
        var cfg = {
                homePage: window.location.origin,
                maxResults: 10,
                numChars: 270,
                thumbWidth: 140,
                noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHJ6epn9bAW98BTI8sNuyV4L1dqDdxYVIlJfOwV-4lVfNRa-kV4cpSGMXbYB9wHy9FeK9Soh5kPOMZb0s-DS02iUHkMCGR1mUsMAr7dmJffKWY7RkMcDgxgqbErzU6uF3WrkWKAFkuG7wD/s1100/no-thumbnail.png",
                navText: "Tampilkan artikel selanjutnya &#9660;",
                resetToc: "Kembali ke Awal",
                loading: "<span>Memuat...</span>",
                counting: "<div>Memuat artikel...</div>",
                a: el('feed-order'),
                searching: "<span>Mencari...</span>"
            },
            w = window,
            d = document,
            el = function(id) {
                return d.getElementById(id);
            },
            o = {
                h: d.getElementsByTagName('head')[0],
                b: el('label-sorter').parentNode,
                c: el('post-searcher'),
                d: el('feed-q'),
                e: el('result-desc'),
                f: el('daftar-isi-blog'),
                g: el('feed-nav'),
                i: 0,
                },
                j: null,
                k: 'published',
                l: 0,
                m: ""
            },
            fn = {
                a: function() {
                    old = el('temporer-script');
                    old.parentNode.removeChild(old);
                    if (el('temporer-script')) fn.a();
                b: function(param) {
                    var script = d.createElement('script');
                    script.type = "text/javascript";
                    script.id = "temporer-script";
                    script.src = param;
                    o.h.appendChild(script);
                },
                        fn.b(tag !== null ? cfg.homePage + '/feeds/posts/summary/-/' + tag + '?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc' : cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc');
                c: function(mode, tag, order) {
                    o.i++;
                    o.e.innerHTML = cfg.counting;
                    o.g.innerHTML = cfg[mode == 1 ? "searching" : "loading"];
                    if (mode === 0) {
                    } else if (mode == 1) {
                    o.a.disabled = true;
                        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&q=' + tag + '&orderby=' + order + '&callback=loadToc');
                    }
                    o.j = (tag !== null) ? tag : null;
                    o.l = mode;
                    o.b.children[0].disabled = true;
                },
                d: function(json) {
                    var _h;
                    o.g.innerHTML = "";
                        for (var i = 0; i < cfg.maxResults; i++) {
                    o.e.innerHTML = o.l == 1 ? '<span>Hasil penelusuran untuk kata kunci <b>&#8220;' + o.m + '&#8221;</b> (' + json.feed.openSearch$totalResults.$t + ' Hasil)</span>' : '<div>Total: ' + json.feed.openSearch$totalResults.$t + ' Artikel</div>';
                    if ("entry" in json.feed) {
                        var a = json.feed.entry,
                            b, c, _d, e = "0 Komentar",
                            f = "",
                            g;
                            if (i == a.length) break;
                            b = a[i].title.$t;
                            _d = ("summary" in a[i]) ? a[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/<iframe/ig, "").substring(0, cfg.numChars) : "";
                                }
                            g = ("media$thumbnail" in a[i]) ? a[i].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "") : cfg.noImage.replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "");
                            for (var j = 0, jen = a[i].link.length; j < jen; j++) {
                                c = (a[i].link[j].rel == "alternate") ? a[i].link[j].href : "#";
                            }
                            for (var k = 0, ken = a[i].link.length; k < ken; k++) {
                                if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") {
                                    e = a[i].link[k].title;
                                    break;
                            }
                            _h = d.createElement('li');
                        _h.onclick = function() {
                            _h.innerHTML = '<div class="inner"><img style="width:' + cfg.thumbWidth + 'px;height:' + cfg.thumbHeight + 'px;" data-src="' + g + '" src="' + g + '" alt="' + b + '" title="' + b + '"><a class="toc-title" href="' + c + '" target="_blank" title="' + b + '">' + b + '</a><div class="news-text">' + _d + '&hellip;<br style="clear:both;"></div></div>';
                            o.f.appendChild(_h);
                        }
                        _h = d.createElement('a');
                        _h.href = '#load-more';
                        _h.innerHTML = cfg.navText;
                        _h.onclick = function() {
                            fn.c(o.l, o.j, o.k);
                            return false;
                        };
                    } else {
                        _h = d.createElement('a');
                        _h.href = '#reset-content';
                        _h.innerHTML = cfg.resetToc;
                            o.i = -1;
                            o.e.innerHTML = cfg.counting;
                            o.f.innerHTML = "";
                            fn.c(0, null, 'published');
                }
                            o.a.innerHTML = o.a.innerHTML;
                            o.b.children[0].innerHTML = o.b.children[0].innerHTML;
                            return false;
                        };
                    }
                    o.g.appendChild(_h);
                    o.a.disabled = false;
                    o.b.children[0].disabled = false;
                },
                e: function(json) {
                    var a = json.feed.category,
                        b = '<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';
                    for (var i = 0, len = a.length; i < len; i++) {
                        b += '<option value="' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '">' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '</option>';
                    }
                    b += '</select>';
                    o.b.innerHTML = b;
                    o.b.children[0].onchange = function() {
                        o.i = -1;
                        o.f.innerHTML = "";
                        o.g.innerHTML = cfg.loading;
                        fn.c(0, this.value, o.k);
                    };
            };
<!-- Sitemap by MOKANESIA.COM -->  
        loadToc = fn.d;
        loadCategories = fn.e;
        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + (o.i + 1) + '&max-results=' + cfg.maxResults + '&orderby=published&callback=loadToc');
        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');
        o.a.onchange = function() {
            o.i = -1;
            o.f.innerHTML = "";
            o.g.innerHTML = cfg.counting;
            o.b.children[0].innerHTML = o.b.children[0].innerHTML;
            fn.c(0, null, this.value);
            o.k = this.value;
        };
        o.c.onsubmit = function() {
            o.i = -1;
            o.f.innerHTML = "";
            o.m = o.d.value;
            fn.c(1, o.d.value, o.k);
            return false;
        };
    }
};
_toc.init();
</script>

Dan itulah 15 lebih versi Sitemap Blogger yang bisa kamu pilih untuk kamu gunakan pada blog kamu. Membuat halaman sitemap di blog itu banyak cara dan untuk tampilan sitemap itu bisa kamu kreasikan pada syntax CSS nya jika kamu mengerti dan paham cara menggantinya jika tidak paham biarkan saja ikuti yang sudah ada agar tidak terjadi error.

Pastikan kamu teliti dalam memindahkan kode diatas karena salah sedikit maka sitemap tidak akan tampil. Itulah artikel mengenai Cara Membuat Halaman Sitemap di Blogger. Jangan lupa Follow blog ini atau media sosial lainnya pada widget Follow.