Membuat Daftar Isi Blog yang Menarik Ala Namina Kiky


Membuat daftar isi dalam sebuah blog saya rasa sangat diperlukan. Hal ini bertujuan untuk mempermudah pengunjung dalam mencari konten yang mereka cari.

Jika pengunjung banyak membuka artikel karena adanya daftar isi, sudah pasti blog kalian juga akan banyak mendapat pageview dari satu visitor saja. Walaupun terlihat sepele, melakukan trik seperti ini juga dapat mengangkat blog agar lebih berkualitas.

Dari sekian banyak pertanyaan yang muncul tentang meningkatkan kualitas blog, trik seperti ini juga termasuk loh. Namun terkadang banyak yang tidak menyadarinya. Pada postingan kali ini, saya akan membagikan tutorial membuat daftar isi seperti blog Namina kiky


Membuat Daftar Isi Blog Yang Menarik Ala Namina Kiky

1. Silakan kalian masuk dashboard blogger milik kalian sendiri >> Pilih menu Halaman >> Buat halaman baru >> klik mode HTML. Ingat, bukan mode Compose yaa.
2. Silakan kalian salin semua kode dibawah ini. Silakan ganti kode yang diblog warna kuning dengan link Url blog kalian.

<div class="tabbed-toc" id="tabbed-toc"></div>
<script>
var tabbedTOC={blogUrl:"https://Ngeblogger.com/",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' &ndash; <em style="color:red;">New</em>'};
</script>
<script src="https://cdn.jsdelivr.net/gh/Indzign/InSEO@master/daftarisikeren.js"></script>
<style scoped="" type="text/css">
.tabbed-toc{margin:0 auto;position:relative;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite}
.tabbed-toc .loading{display:block;padding:2px 12px;color:#fff}
.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;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
.tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
.tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}
.tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:right;background-color:#fff;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{color:#1277cb;display:block;position:relative;font-weight:500;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:#f9f9f9;margin:0}
.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(0,0,0,0.03);outline:none}
.tabbed-toc .panel li a em{background:#f39c12;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px}
.tabbed-toc .panel li:before{display:none}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (max-width:768px){.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>

Sumber: Namina Kiky

3. Setelah selesai langsung saja publikasikan halaman.

Jika sudah, silakan kalian buka halam daftar isi yang baru saja kalian buat. Secara otomatis artikel akan muncul menurut label yang kalian tentukan.

Demikianlah tutorial membuat daftar isi blog ala Namina Kiky. Semoga tutorial ini bermanfaat dan selamat mencoba.

Berlangganan gratis update artikel terbaru via email:

Belum ada Komentar untuk "Membuat Daftar Isi Blog yang Menarik Ala Namina Kiky"

Posting Komentar

Silakan tulis pesan di kolom komentar dengan bijak. Komentar SPAM, memberikan link tanpa izin Admin, dan tindakan negatif lain tidak akan diterbitkan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel