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

Demo
Result

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

Source : naminakiky

Berbagi :