script sitemap untuk blogger responsive dan baru

hay sapembaca blog elinotes, Membangun blog dengan blogger kita butuh sitemap agar blog yang kita bangun dapat diindex atau dirayapi oleh mesin pencari. pada kesempatan kali ini admin elinotes.com akan membagikan kumpulan script sitemap blogger yang responsive bisa digunakan untuk blogger tentunya update terbaru 2021

apa itu sitemap blogger?

Sitemap atau peta situs adalah file yang berisi keseluruhan navigasi dari sebuah situs atau blog. sitemap blogger sangat penting kerana akan memudahkan mesin pencarian untuk mengindex halaman yang ada pada website. pada blogger sitmap dapat dibuat pada halaman statis.

fungsi sitemap pada blogger

berikut adalah beberapa fungsi dari sitemap:

• membuat halaman blogger menjadi terstruktur dan mudah dirayapi atau dibaca mesin pencari
• sitemap berfungsi memberitahu mesin pencarian apabila terdapat perubahan pada struktur web atau blog
• memudahkan pembaca atau visitor menemukan konten yang dicari
• jika kalian mendaftar adsense sitemap sangat dibutuhkan agar di approve atau diterima google adsense.

jenis jenis sitemap

jenis sitmap ada 2 yaitu: sitemap html dan sitemap xml.

sitemap html di buat untuk pembaca atau visitor blogger, sedangkan sitemap xml dibuat untuk dibaca oleh robot perayapan mesin pencari.

membuat sitemap di blogger

pada blogger sitemap adalah sebuah halaman statis. Halaman statis merupakan halaman yang mandiri dan konstan serta tidak berubah atau stagnan setiap kali halaman tersebut dimuat atau loading.  untuk membuat sitemap diblogger cukup mudah berikut adalah tutorial membuat sitemap diblogger:

masuk dan login ke blogger

langkah pertama kalian harus login ke blogger menggunakan akun google kalian, jangan lupa masukan email dan pasword kalian dengan benar. 

masuk ke akun blogger

pilih halaman pada menu blogger

kalian pilih halaman pada blogger dan pilih ikon plus (+) buat halaman baru

ikon buat halaman baru pada blogger

buat halaman baru

kita akan membuat halaman sitemap blogger dengan mengubah dari tampilan menulis ke tampilan html. caranya kalian klik ikon pensil di pojok kanan dan pilih tampilan html. 

tampilan menulis dan tampilan html pada blogger

script sitemap untuk blogger responsive dan baru

Masukkan script  sitemap HTML berikut, copy paste dikolom tampilan HTML blogger. ada banyak kode skrip html kalian silakan tinggal pilih, terserah mau yang kode sitemap blogger 1, 2, 3, dan 4 tinggal pilih sesuai selera. yang membedakan hanya tampilannya saja. berikut ini kumpulan kode sitemap untuk blogger yang terbaru.

kode sitemap blogger 1

tampilan sitemap blogger 1

kode script responsive

 <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="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">  
 </script></div>  

kode sitemap blogger 2

tampilan sitemap blogger 2

kode responsive :

 <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: ' &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>  

kode sitemap blogger 3

tampilan sitemap blogger 3

kodenya:

 <script src="https://sites.google.com/site/script4shared/sitemap.js"></script><script src="http://maxblog.me/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>  

jika kalian menggunakan kode sitemap blogger 3 ubah maxblog.me menjadi nama blog kalian

kode 

sitemap blogger 4

tampilan sitemap blogger 4

 <div style="background-color: #dde1e3; border: 1px solid #999999; height: 100px; overflow: auto; padding: 10px; width: 100%px;">  
 <script src="https://sites.google.com/site/script4shared/sitemap.js"></script><script src="http://maxblog.me/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>  
 </div>  

jika kalian menggunakan kode sitemap blogger 4 ubah url maxblog.me menjadi nama blog kalian

kode.

menyimpan kode sitemap

setelah memilih kode sitemap dan menempelkannya di tampilan html blogger, langkah terakhir adalah tinggal simpan save dan publikasikan.

selamat sitemap untuk blogger sudah selesai dibuat. cara ini bisa diaplikasikan untuk tampilan blogger baru.

 

sekian artikel script sitemap untuk blogger responsive dan baru yang elinotes dapat bagikan. semoga bermanfaat.