Cara Memasang Daftar Isi Keren untuk Blog

Halaman sitemap / daftar isi blog merupakan salah satu elemen blog yang keharusan ada pada blog, sehingga menjadi keharusan bagi setiap blogger memasang halaman daftar isi/sitemap ini. Ini memudahkan para pembaca untuk melihat isi dari seluruh posingan blog Anda. Daftar isi yang terdapat pada sitemap page adalah inti dari semua postingan. Jadi saya berfikir bahwa pemasangan widget ini adalah sebuah kewajiban bagi para blogger.

Sebagai kelengkapan blogger blogspot, dengan adanya sitemap atau daftar isi otomatis pada blog, bakal berikan kemudahan kepada visitor dan termasuk untuk admin blog itu sendiri. Jika pengunjung blog inginkan lihat seluruh daftar isikan dari blog Anda, maka tentu saja harus untuk memasang page daftar isi. Page sitemap ini secara otomatis bakal menampilkan seluruh postingan cocok dengan label. 

Pada tutorial kali ini, bakal aku bagikan langkah dalam membuat sitemap sederhana dan enteng bagi Anda yang ingin tampilan sitemap yang sederhana tapi keren dan SEO. Cara pemasangannya pun benar-benar mudah, menjadi kalau Anda menerapkan langkah ini bersama benar, maka daftar mengisi blog bakal nampak terhadap page yang dibuat.

Aktifkan Blog Feed

Sebelum pemasangannya, Anda harus mengaktifkan blog feed terlebih dahulu, caranya 

Settingan ini juga mencegah pencurian artikel melalui blog feed. Bagi Anda yang belum memiliki akun feed RSS, Anda bisa membaca postingan tentang Cara Membuat Akun FeedBurner.

Cara Memasang Daftar Isi [Sitemap] Keren

Berikut ini beberapa style untuk cara membuat sitemap pada blogger yang tentunya merupakan daftar isi otomatis blog yang sangat responsive, SEO Friendly dan keren. Silakan pilih salah satu dari ketiga style sitemap dibawah ini yang menurut Anda cocok diterapkan dalam pada blog.

Halaman Sitemap Blogspot Style 1

Kode CSS Daftar Isi Blogspot

 <p>  
 <script src="https://cdn.jsdelivr.net/gh/dewaplokis/s@master/sitemapb.js" type="text/javascript"></script>    
 <script src="https://sulistia-one.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>  
 </p>

Silakan ubah https://sulistia-one.blogspot.com dengan link blog milik Anda

Sitemap / Daftar Isi Blog Style 2

Kode CSS

<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/dewaplokis/sm@master/dpsm.js" type="text/javascript"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Sitemap Blogger Style 3

Kode CSS

<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 keiga jenis sitemap / daftar isi blog diatas, silakan sesuaikan kode CSSnya sesuai dengan selera, karena kemungkinan pada cara membuat sitemap blogger responsive yang saya bagikan ini ada kode yang ingin dirubah, apakah itu warna, ukuran font dll.

Cara Membuat Daftar isi Otomatis di Blog

Setelah melihat ketiga tampilan sitemap diatas, Anda mungkin sudah tertarik ingin mencoba salah satunya. Bisa saja Anda membuat sitemap dengan mencoba satu persatu style diatas namun belum tahu bagaimana cara memasangnya dengan benar pada halaman atau page blog. Silakan ikuti instruksinya berikut ini:

1. Masuk ke akun blogger ➤ Pilih Page ➤ lalu pilih New page

2. Tulis Judul Halaman ➠Klik HTML ➠Pastekan Kode CSS (salah satu style sitemap diatas) ➠ Lalu klik Publish

Untuk judul halaman, silakan isikan sesuai selera. Anda bisa menulis Sitemap atau Daftar Isi, Atau Daftar Isi Blog

Ingat untuk menghapus terlebih dahulu kode sebelumnya sebelum mengganti style agar kode script sitemap ini dapat berfungsi dengan baik

Demikian tutorial blogging kali ini Cara Mudah Membuat Halaman Sitemap [Daftar Isi] di Blog Keren. Jika menurut Anda postingan ini bermanfaat, silakan dishare demi kebaikan bersama. Terima kasih

Subscribe to receive free email updates: