Cara Membuat Sitemap Keren SEO Dan Responsive Di Blog

Sitemap atau daftar isi sebuah situs website atau blog dari blogger blogspot ini sangat penting untuk data dan dokumen page halaman disebuah situs, berguna untuk memberikan ruang informasi kepada semua pengunjung situs tersebut supaya mengetahui seluruh isi artikel pada situs kalian. Kali ini saya akan memberikan tutorial lengkap cara membuat sitemap keren dan juga seo responsive di blog. Sitemap ini bisa dibilang keren juga otomatis dan fast loading di blog, keunggulan dari sitemap ini adalah design nya yang keren dengan berlatarkan warna biru, cocok buat situs kalian yang juga berlatarkan warna biru jadi nya menyatu antara situs dengan tampilan sitemap.

Sebetulnya sitemap juga sama dengan blockquote atau biasa disebut dengan pembungkus catatan yang sudah kami buat di: Cara Membuat Dan Menggunakan Catatan Blockqoute Keren Di Blog  sama-sama sudah tersedia secara default bawaan dari blogger namun terlihat biasa dan tidak menarik. Karena dengan itu membuat sitemap blog dengan tampilan keren akan menjadi perhatian dan nilai tambah dimata pandang pengunjung dan pengunjung juga akan menjadi betah di blog yang kita buat.

Yang menjadi nilai tambah dari sitemap ini adalah dengan optimasi SEO atau Search Engine Optimization jadi tidak akan membuat blog anda menjadi jelek dipandangan mesin pencari, google atau bing. Sitemap ini sudah disetting dengan sedemikian rupa dengan program otomatis akan muncul sesuai dengan label atau category yang sudah di tambahkan kedalam postingan. Maka dari itu dengan ada nya program otomatis, setiap kita update artikel postingan langsung akan masuk kedalam list daftar sitemap, akan terkumpul menjadi satu dengan artikel lainnya yang sama dengan label category yang sudah ditentukan.

Dengan adanya program otomatis kita tidak perlu lagi memasukkan satu per satu setiap update artikel kedalam daftar peta situs atau sitemap. Membuat dan memasang sitemap di situs juga tidak perlu membutuhkan skill kemampuan menguasai dalam code program HTML, karena disinih akan menyediakan script html sitemap yang sudah jadi, maka dari itu kalian hanya tinggal mengcopas dan paste kedalam halaman blog 

Cara Membuat Sitemap SEO Responsive Di Blogger

Di bawah ini akan saya berikan tutorial langkah demi langkah cara membuat sitemap di blogger. Kami sudah menyediakan code nya yang sudah jadi, dengan itu kalian tinggal pasang pada halaman blog kalian.

Sitemap Keren Responsive Versi 1

<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.rawgit.com/penaindigo/Pena-Indigo-Code/a134f9de/sitemappenaindigo.js" type="text/javascript"></script>
<script src="https://website403.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

 

Sitemap Keren Responsive Versi 2

<link href="https://cdn.rawgit.com/penaindigo/project/d4a73206/penaindigocom.css" rel="stylesheet"></link>
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Sedang Mengambil Data . . .</span></div>
<script>
var tabbedTOC = {
blogUrl: "https://website403.blogspot.com/", // 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="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>

 Untuk kalimat atau code dan link yang saya beri tanda dengan block warna biru dan dengan huruf warna putih, bisa kalian ganti dengan sesuai punya kalian.

 

Cara Memasang Script Sitemap Seo Responsive Ke Blogger 

Pada tutorial ini kalian bisa mengikuti nya untuk membuat sebuah halaman di blog untuk dijadikan sebagai halaman sitemap atau peta situs.

Langkah 1: Masuk ke Dashboard Blogger > Pilih Menu Halaman atau Page > Buat Halaman Baru.

Langkah 2: Dari mode Compose Masuk kedalam mode HTML.

Langkah 3: Paste code tersebut kedalam nya.

Setelah semua tahap sudah kalian lakukan, sekarang sitemap anda sudah menjadi keren, otomatis, seo dan juga responsive mobile friendly. Jika ada kesalahan atau error pada script sitemap nya, kalian bisa laporkan kepada admin dengan comment di bawah. Jika kalian ingin mendapatkan update tan artikel terbaru tentang dunia blogging dan internet marketing, yuk subscribe blog ini