Cara Menciptakan Daftar Isi Menurut 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 gampang saat sedang mencari artikel yang dibutuhkannya.
Jika sebelumnya sudah aku bagikan sebuah tutorial bagaimana cara menciptakan sitemap responsive ala kompiajaib, maka pada tutorial kali ini aku akan membagikan sebuah tutorial bagaimana cara menciptakan sitemap/daftar isi menurut label yang secara otomatis akan menampilkan semua label dengan fitur tabbed click.
Daftar Isi Berdasarkan Label Otomatis akan menampilkan semua kategori/label dengan bentuk sajian tab yang saat teman klik salah satu tab pilihan akan menampilkan semua artikel yang di kelompokkan pada label tersebut.
Cara Membuat Daftar Isi Berdasarkan Label Otomatis di Blog kali ini bermanfaat. Selamat mencoba dan salam luar biasa
Source : naminakiky Sumber https://www.pehawe.info/
Jika sebelumnya sudah aku bagikan sebuah tutorial bagaimana cara menciptakan sitemap responsive ala kompiajaib, maka pada tutorial kali ini aku akan membagikan sebuah tutorial bagaimana cara menciptakan sitemap/daftar isi menurut label yang secara otomatis akan menampilkan semua label dengan fitur tabbed click.
Daftar Isi Berdasarkan Label Otomatis akan menampilkan semua kategori/label dengan bentuk sajian tab yang saat teman 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 gres yang akan dipakai untuk menampilkan daftar isi ini, atau kalau sudah ada teman tinggal menggantinya dengan isyarat dibawah ini dalam mode HTML (bukan compose)<div class="tabbed-toc" id="tabbed-toc"></div>
<script>
var tabbedTOC={blogUrl:"https://harga-motor-dan-mobil.blogspot.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:' – <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://harga-motor-dan-mobil.blogspot.com dengan url blog sobat
Cara Membuat Daftar Isi Berdasarkan Label Otomatis di Blog kali ini bermanfaat. Selamat mencoba dan salam luar biasa
Source : naminakiky Sumber https://www.pehawe.info/