Cara Membuat Daftar isi (Sitemap) Blog Otomatis

Cara Membuat Daftar Isi di Blog Otomatis Responsive dan Fast Loading - Untuk memberikan User Experience (UE) kepada pembaca blog. Kita harus memudahkan pembaca dalam menelusuri seluruh artikel atau konten yang ada di blog.
Cara Membuat Daftar isi (Sitemap) Blog Otomatis

Salah satu cara memberikan layanan yang baik terhadap pembaca yaitu dengan membuat dan memasang daftar isi atau sitemap blog.

Daftar isi blog adalah sebuah halaman yang dibuat oleh pemilik blog agar memudahkan pembaca menelusuri seluruh artikel atau konten blog.

Cara untuk menelusuri artikel blog bisa dengan melihat widget popular posts, artikel terkait dan banyak lagi. Tapi widget tersebut tidak seluruh artikel kita tampil sehingga setelah dilihat pembaca merasa kurang sesuai dengan yang di harapkan.

Oleh karena itu, daftar isi atau sitemap blog sangat penting agar membuat nyaman pembaca berada di blog kita.

Jika telah mengetahui kemungkinan kondisi yang di alami pembaca seperti itu, mungkin anda ingin membuat daftar isi atau sitemap blog.

Dan kode script yang akan saya bagikan ini sangat cocok bagi anda yang menggunakan template VioMagz atau bisa juga untuk template lainnya.

Selain itu juga, kode script ini sangat responsive jadi anda tidak perlu khawatir jika ada pembaca yang mengakses lewat komputer atau smartphone, maka daftar isi atau sitemap akan tampil dengan baik dan menarik.

Cara Membuat Daftar Isi Blog Responsive

Nah kali ini saya akan memberikan tutorial mudah dalam membuat dan memasang daftar isi blog anda, untuk tutorial adalah sebagai berikut:
1. Buka Blogger
2. Klik kolom Halaman > Halaman baru pada menu blogger.
Cara Membuat Daftar isi (Sitemap) Blog Otomatis

3. Copy kode script dibawah ini
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
    blogUrl: "https://www.afaizan.com/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: true, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: true, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 60, // 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>
Note: rubah alamat URL yang berwarna merah dengan alamat URL blog anda
4. Klik mode HTML dan Paste kode script pada halaman
Cara Membuat Daftar isi (Sitemap) Blog Otomatis

5. Jika ingin melihat hasilnya anda bisa mengklik Pratinjau, bila telah berhasil lanjutkan ke poin 6
Cara Membuat Daftar isi (Sitemap) Blog Otomatis

6. Klik Publikasikan dan selesai
Note: Jika daftar isi tidak muncul masukan kode script ini di atas kode script tadi.
<style>
/* Skin for Blogger Tabbed Layout TOC */
.tabbed-toc {
margin: 0 auto;
background: $(header.background.kiri);
background: linear-gradient(to bottom right, $(header.background.kiri), $(header.background.kanan));
position: relative;
}
.tabbed-toc .loading {
display: block;
padding: 2px 12px;
color: $(navmenu.font.color);
}
.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: $(navmenu.font); 
overflow: hidden;
color: $(navmenu.font.color);
text-transform: uppercase;
text-decoration: none;
padding: 12px;
}
.tabbed-toc .toc-tabs li a:hover {
background-color: rgba(64,64,64,0.1);
}
.tabbed-toc .toc-tabs li a.active-tab {
background: rgba(64,64,64,0.1);
position:relative;
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 rgba(64,64,64,0.1);
box-sizing: border-box;
}
.tabbed-toc .toc-line {
float: none;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
.tabbed-toc .panel {
position: relative;
z-index: 5;
}
.tabbed-toc .panel li a {
display: block;
position: relative;
font-weight: bold;
font-size: 14px;
padding: 6px 12px;
overflow: hidden;
}
.tabbed-toc .panel li time {
display: block;
font-weight: normal;
font-size: 11px;
color: #666;
float: right;
}
.tabbed-toc .panel li .summary {
display: block;
padding: 10px 12px 10px;
font-size: 13px;
}
.tabbed-toc .panel li .summary img.thumbnail {
float: left;
display: block;
margin: 5px 8px 0 0;
width: 72px;
height: 72px;
background-color: #fafafa;
}
.tabbed-toc .panel li {background-color:#f3f3f3}
.tabbed-toc .panel li:nth-child(even) {background-color:#fff}
.tabbed-toc .panel li a:hover,
.tabbed-toc .panel li a:focus,
.tabbed-toc .panel li.bold a {
background-color: rgba(64,64,64,0.1);
outline: none;
}
@media (max-width:700px) {
.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.active-tab {
background-color: rgba(64,64,64,0.1);
}
.tabbed-toc .toc-content { border: none }
.tabbed-toc .toc-line,
.tabbed-toc .panel li time { display: none }
}
</style>

Cukup mudah bukan dalam memasang daftar isi atau sitemap untuk blog anda. Dan jika kalian ingin memasang kotak script dalam postingan, maka silahkan baca : Cara Memasang Kotak Script Terbaru Dalam Postingan.

Belum ada Komentar untuk "Cara Membuat Daftar isi (Sitemap) Blog Otomatis "

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel