-->

Menerapkan Daftar Isi Menurut Label

Menerapkan Daftar Isi Menurut Label

Kali ini mimin berbagi widget daftar isi yang disortir berdasarkan label dengan animasi menarik. Widget yang bakal mimin buat ini merupakan widget yang dibuat oleh Taufik Nurrohman di blognya www.dte.web.id.

Cara Menambahkan Widget Sitemap di Blog

Tentunya sobat sudah mengetahui fungsi dari widget ini, yang menyortir semua daftar artikel di blog sobat berdasarkan label. Ok langsung saja pada cara penerapannya :

Silahkan buka blogger > Halaman > Kemudian Klik Halaman Baru dan tambahkan semua kode widget di bawah ini pada tab Html

 
<div dir="ltr" style="text-align:left;" trbidi="on"> 
<style scoped="" type="text/html"> 
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)} 
.table-of-content 
.toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial} 
.table-of-content .toc-header:hover{background-color:#fdfdfd} 
.table-of-content 
.toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease} .table-of-content .toc-header.active{color:#fc4f3f} 
.table-of-content 
.toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)} 
.table-of-content 
.loading{display:block;padding:15px;text-decoration:blink} 
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial} 
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial} 
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial} 
.table-of-content a:visited{color:#a2a2a9;transition:initial} 
.table-of-content a:hover,
.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial} 
.post ol li:before{display:none} </style> 
<div class="table-of-content" id="table-of-content"> 
<span class="loading">Loading konten...</span></div> 
<script> var toc_config = { url: 'http://ohbegitusaja.blogspot.com/', containerId: 'table-of-content', showNew: 15, newText: ' 
<strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>', 
sortAlphabetically: { thePanel: true, theList: true }, 
maxResults: 9999, activePanel: 1, slideSpeed: { down: 400, up: 400 },
 slideEasing: { down: null, up: null },
  slideCallback: { down: function() {},
   up: function() {} }, 
   clickCallback: function() {}, 
   jsonCallback: '_toc', delayLoading: 0 }; </script> 
<script src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/daftar-isi-tea.js"></script> </div>

Terakhir Klik Publikasikan.

Cukup mudah bukan, berikut tampilan dari widget daftar isi menurut label


Untuk URL http://ohbegitusaja.blogspot.com yang ditandai warna aqua ganti dengan URL kamu
HTML Tutorial Widget
  • Dapatkan Info Terbaru Seputar Dunia Android dan Termux
  • Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
  • Jadilah seseorang yang pintar dalam dunia teknologi

Iklan Atas Artikel

Iklan Tengah Artikel 1

Data Covid 19 Update

Iklan Bawah Artikel