Cara Membuat Sitemap ( Daftar Isi ) Di Blogspot

Membuat sitemap atau rincian daftar isi di blog. Sangat penting untuk di buat sebab daftar isi memudahkan para pengunjung blog yang akan menelusuri semuah artikel kalian.

Jika pengunjung puas dengan artikel dan informasi yang mereka cari di blog kalian sudah dapat di pastikan kualitas Seo yang kalian terapkan akan semakin berkualitas  dan bagus.

Membuat sitemap ( daftar isi ) adalah syarat pertama agar website atau blog kalian bisa di setujui sama pihak google adsense secara approved.

Selain membuat laman seperti about contact, disclaimer dan privacy policy hal yang tidak kalah pentingnya adalah membuat sitemap tersebut.

Dari pihak google sudah menegaskan jika mau mendaftar sebagai publiser iklan atribut dalam website atau blog kalian haruslah lengkap serta jelas.

Membuat sitemap bisa di katakan sebagai persiapan untuk mendaftar google adaense agar bisa cepat di tinjau dan di terima secara penuh.

Berikut beberapa code sitemap keren dan resvonsif serta Seo untuk blogspot.

#1. Sitemap 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>

#2. Sitemap responsive 2

<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>

Untuk cara memasangnya cukuplah mudah kalian cukup menyalin code di atas dan pergi ke tampil pertama blog kalian klik >> halaman >> Buat halaman baru>> lalu pilih mode Html >> letakan code tersebut >> jangan lupa untuk memberi judul Sitemap. Publikasikan

ANDI KURNIAWAN

Nama: andhik kurniauwan

Share this post