Cara Membuat Sitemap Responsive, Seo Friendly dan Keren di Blogger Tanpa Edit Html

komputerdia.com - Didalam membuat blog atau situs tentu kita tidak asing dengan istilah sitemap. Jika kita artikan menurut suku katanya sitemap dapat diartikan menjadi peta situs. Sesuai dengan namanya sitemap atau peta situs merupakan salah satu halaman penting didalam suatu blog atau situs yang difungsikan untuk menuntun pengunjung agar dapat melakukan eksplorasi secara mendalam di blog yang kita kelola. Selain itu fungsi sitemap sendiri adalah sebagai salah satu media yang digunakan oleh para blogger untuk melakukan promosi blog serta isi kontenya kedalam mesin pencari (search engine) agar dapat di index dengan cepat oleh mesin pencari tersebut.

Dalam artikel ini, saya akan sedikit membagikan cara bagaimana cara membuat sitemap atau peta situs blogger yang responsive dan keren tanpa harus melakukan editing html. Sitemap yang saya bagikan ini cukup kalian pasang pada halaman statis atau menu halaman yang terdapat pada pada blogger

Cara Membuat Sitemap Responsive di Blogger

1. Sitemap Responsive Sidebar

Gaya sitemap pertama ini merupakan sitemap yang sudah dilengkapi dengan menu sidebar dan sudah disetting dengan fitur responsive. sitemap ini juga merupakan sitemap yang saya terapkan di situs atau blog komputerdia.com

• Langkah pertama silahkan kalian masuk ke blogger 
• Setelah itu silahkan kalian pilih menu Halaman / Page dan pilih menu Halaman baru

• Langkah selanjutnya kalian akan melihat halaman kosong, silahkan kalian beri judul halaman tersebut dengan Sitemap
• Selanjutnya kalian arahkan halaman tersebut ke HTML dan copy kode dibawah ini kemudian 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>
<b>PILIH KATEGORI BLOG</b>
<br />
<style scoped="scoped" type="text/css">
#sidebar-wrapper{display:none!important}
#main-wrapper{width:100%!important}
#show-cat{float:left;margin:0;width:25%;height:180px;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:#00008B;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:#00008B;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:normal}
#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,128,.1);}
#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,128,.6)}
#show-cat::-webkit-scrollbar-thumb{background-color:rgba(0,0,128,.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:0px 0}#show-post{width:100%}}
</style>

<div id="show-cat">
</div>
<div id="show-post">
<script type="text/javaScript">
var cat_home='https://komputerdia.com';cat_numb=20;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:#00008B!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 ganti kode yang berwarna merah dengan alamat situs blog kalian
• Setelah itu silahkan kalian klik tombol publikasikan dan lihat hsilnya
• Jika kita lihat keseluruhan dari penempatan kode diatas maka akan terlihat seperti gambar dibawah ini

2. Sitemap Responsive Vertical Label

Gaya sitemap kedua ini merupakan sitemap yang hampir sering digunakan oleh banyak blogger, sitemap ini juga sudah dilengkapi dengan fitur responsive sehingga tampilannya akan selalu mengikuti lebar dan besar perangkat yang digunakan

• Langkah pertama silahkan kalian masuk ke blogger 
• Setelah itu silahkan kalian pilih menu Halaman / Page dan pilih menu Halaman baru

• Langkah selanjutnya kalian akan melihat halaman kosong, silahkan kalian beri judul halaman tersebut dengan Sitemap
• Selanjutnya kalian arahkan halaman tersebut ke HTML dan copy kode dibawah ini kemudian 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 #272727;
-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: #272727;
border:1px solid #0F0F1A;
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;margin-left:10px}
</style>

<br />
<div id="toc">
<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

• Setelah itu silahkan kalian klik tombol publikasikan dan lihat hsilnya
• Jika kita lihat keseluruhan dari penempatan kode diatas maka akan terlihat seperti gambar dibawah ini

3. Sitemap Responsive Load

Sitemap gaya ketiga ini merupakan sitemap responsive blogger yang mempunyai fitur load, dimana ketika kalian meng-klik judul label atau  kategori maka deretan judul artikel akan terlihat secara otomatis dengan gaya load.

• Langkah pertama silahkan kalian masuk ke blogger 
• Setelah itu silahkan kalian pilih menu Halaman / Page dan pilih menu Halaman baru

• Langkah selanjutnya kalian akan melihat halaman kosong, silahkan kalian beri judul halaman tersebut dengan Sitemap
• Selanjutnya kalian arahkan halaman tersebut ke HTML dan copy kode dibawah ini kemudian 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 scoped="" type="text/css">
.table-of-content{background-color:#fff;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 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.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.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#666 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 .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;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:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'https://www.komputerdia.com/',
    containerId: 'table-of-content',
    showNew: 2,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    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://cdn.staticaly.com/gh/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>

• Silahkan kalian ganti kode warna merah dengan alamat blog yang kalian kelola
• Setelah itu silahkan kalian klik tombol publikasikan dan lihat hsilnya
• Jika kita lihat keseluruhan dari penempatan kode diatas maka akan terlihat seperti gambar dibawah ini

4. Sitemap Responsive Blogger Blaster

Desain sitemap yang ke empat ini merupakan sitemap responsive yang hampir sama dengan desain sitemap pada nomor 2, namun sitemap ini telah dilengkapi dengan fitur menu sidebar yang membuat sitemap ini terlihat lebih kreatif dan menarik

• Langkah pertama silahkan kalian masuk ke blogger 
• Setelah itu silahkan kalian pilih menu Halaman / Page dan pilih menu Halaman baru

• Langkah selanjutnya kalian akan melihat halaman kosong, silahkan kalian beri judul halaman tersebut dengan Sitemap
• Selanjutnya kalian arahkan halaman tersebut ke HTML dan copy kode dibawah ini kemudian 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">
.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}
@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: ' &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>

• Setelah itu silahkan kalian klik tombol publikasikan dan lihat hasilnya
• Jika kita lihat keseluruhan dari penempatan kode diatas maka akan terlihat seperti gambar dibawah ini

5. Sitemap Responsive Color Load

Sitemap kelima ini merupakan sitemap yang sama dengan jenis nomor 3, namun sitemap ini telah dilakukan mofidifikasi pada bagian warna serta telah dilakukan pengoptimalan pada fitur responsive serta seo friendly

• Langkah pertama silahkan kalian masuk ke blogger 
• Setelah itu silahkan kalian pilih menu Halaman / Page dan pilih menu Halaman baru

• Langkah selanjutnya kalian akan melihat halaman kosong, silahkan kalian beri judul halaman tersebut dengan Sitemap
• Selanjutnya kalian arahkan halaman tersebut ke HTML dan copy kode dibawah ini kemudian 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 scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-size:13px;font-weight:400;overflow:hidden;}
.table-of-content .toc-header{color:#fff;font-weight:400;font-size:14px;background-color:#48bbc6;margin:0;padding:10px 30px;overflow:hidden;cursor:pointer;border-bottom:1px solid #eee;transition:initial;}
.table-of-content .toc-header:hover{background-color:#999;}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:14px;right:30px;left:11px;border:5px solid transparent;border-color:#fff transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fff}
.table-of-content .toc-header.active:before{border-color:#fff transparent transparent;top:14px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;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,.post ol li a:link{color:#444!important;text-decoration:none;font-size:86%;transition:initial}
.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;}
.post a:link {color:#444!important;}
#main-wrapper{padding:0;width:100%;border:0}
</style>

<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'https://www.komputerdia.com',
    containerId: 'table-of-content',
    showNew: 5,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#48bbc6;padding:2px 6px 2px 6px;line-height:normal;float:right;text-transform:uppercase;">baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 0,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script><br />
<script src="https://cdn.statically.io/gh/Arlina-Design/redvision/master/daftar-isi-tea.js"></script><br /></div>

• Silahkan kalian ganti kode warna merah dengan alamat blog yang kalian kelola
• Setelah itu silahkan kalian klik tombol publikasikan dan lihat hsilnya
• Jika kita lihat keseluruhan dari penempatan kode diatas maka akan terlihat seperti gambar dibawah ini

6. Sitemap Responsive Otomatis

Sitemap blogger responsive dan seo friendly yang ke enam ini merupakan sitemap yang cukup banyak digunakan oleh para blogger. Selain mempunyai fitur responsive, sitemap ini juga mempunyai tampilan yang simpel namun elegan.

• Langkah pertama silahkan kalian masuk ke blogger 
• Setelah itu silahkan kalian pilih menu Halaman / Page dan pilih menu Halaman baru

• Langkah selanjutnya kalian akan melihat halaman kosong, silahkan kalian beri judul halaman tersebut dengan Sitemap
• Selanjutnya kalian arahkan halaman tersebut ke HTML dan copy kode dibawah ini kemudian 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="jontor">
<script src="https://cdn.statically.io/gh/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);}
.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;}
.rak_info_Postname li:nth-of-type(odd){background:#f1f3f3;}
.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>

• Setelah itu silahkan kalian klik tombol publikasikan dan lihat hasilnya
• Jika kita lihat keseluruhan dari penempatan kode diatas maka akan terlihat seperti gambar dibawah ini

Semoga beberapa design template yang saya bagikan diatas dapat membantu kalian dalam membuat sitemap blogger. Semua desain template yang saya bagikan diatas bisa kalian ubah sesuai dengan kebutuhan dan keinginan kalian

Share this post