Cara Membuat Daftar Isi Berdasarkan Label Otomatis di Blog

Cara Membuat Daftar Isi Berdasarkan Label Otomatis di Blog - Daftar isi/Sitemap merupakan salah satu peta situs yang wajib di gunakan oleh para blogger. Karena dengan adanya sitemap/daftar isi di blog akan membantu pengunjung lebih mudah ketika sedang mencari artikel yang dibutuhkannya.

Jika sebelumnya sudah saya bagikan sebuah tutorial bagaimana cara membuat sitemap responsive ala kompiajaib, maka pada tutorial kali ini saya akan membagikan sebuah tutorial bagaimana cara membuat sitemap/daftar isi berdasarkan label yang secara otomatis akan menampilkan semua label dengan fitur tabbed click.

Daftar Isi Berdasarkan Label Otomatis akan menampilkan semua kategori/label dengan bentuk menu tab yang ketika sobat klik salah satu tab pilihan akan menampilkan semua artikel yang di kelompokkan pada label tersebut.

Cara Memasang Daftar Isi Berdasarkan Label Otomatis

Login Blogger - Klik Halaman dan Buatlah sebuah Halaman baru yang akan digunakan untuk menampilkan daftar isi ini, atau jika sudah ada sobat tinggal menggantinya dengan kode dibawah ini dalam mode HTML (bukan compose)

<div class="tabbed-toc" id="tabbed-toc"></div>

<script>

var tabbedTOC={blogUrl:"https://www.pehawe.me/",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.staticaly.com/gh/pehawe/file/master/tabbed-sitemap.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>


Silahkan ganti https://www.pehawe.me/ dengan url blog sobat


Cara Membuat Daftar Isi Berdasarkan Label Otomatis di Blog kali ini bermanfaat. Selamat mencoba dan salam luar biasa

Source : naminakiky

Belum ada Komentar untuk "Cara Membuat Daftar Isi Berdasarkan Label Otomatis di Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Daftar Situs Idn Poker Online di 18Dewa dan juga Poker Qiu atau di sebut Pokerqiu adalah situs ceme online terpercaya sama dengan 18Dewapoker dan situs poker pkv yang terkenal adalah Masterdomino88 atau nama lain Domino88 bersaing di dunia game online poker Bandar389 dan poker idn lainnya yang memberikan kemenangan tinggi yaitu Big Poker88 baru lagi agen poker bernama Rekan Poker yang punya banyak peluang besar.