Cara Membuat Daftar Isi Blog berdasarkan label | Responsive
Daftar isi juga dapat mengurangi tingkat bouncing terhadap blog. Dengan begitu widget sitemap ini dapat menunjang SEO blog kita dan bisa bersaing di pencarian google.
Dan kali ini saya akan memberikan sebuah tutorial cara membuat sitemap milik dari mas Taufik Nurrohman dari web dte.web.id yang sebenarnya scriptnya telah hilang / error di googlecode. Tak lupa juga saya ucapkan terima kasih atas jasa besar mas Taufik atas niatan tulusnya karena telah memberikan berbagai tutorial blogging yang tentunya untuk menambah pengetahuan dan demi kemajuan blogger Indonesia.
Oh, iya.. widget daftar isi yang akan saya bagikan ini menampilkan semua posting blog dengan tampilan tabview. Selain itu terdapat tanda untuk postingan yang terbaru. Sobat bisa melihatnya di gambar thumbnail diatas. Untuk cara memasangnya silakan ikuti petunjuk di bawah ini.
Cara Membuat Daftar Isi Blog berdasarkan label | Responsive
Untuk langkah pertama silakan buka blog sobat lalu lihat menu disamping kiri dari tampilan dashboard blogger.com kemudian pilih Laman.Langkah kedua pada postingan Laman yang baru jangan lupa untuk memilih mode HTML kemudian masukkan (paste) kode dibawah ini.
<div id="tabbed-toc">
<span class="loading">Loading sitemap, please wait for a moment...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "https://www.agungjakanugraha.com",
containerId: "tabbed-toc",
activeTab: 1,
showDates: false,
showSummaries: false,
numChars: 200,
showThumbnails: false,
thumbSize: 40,
noThumb: "",
monthNames: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 7,
newText: " - <em style='color: white;padding: 1px 5px;float:right;background-color: #F00;'>✓ New!</em>"
};
</script>
<script src="https://cdn.rawgit.com/agungjakanugraha/table-of-content/e770b230/toc.js" type="text/javascript"></script>
<style type="text/css">
#tabbed-toc{width:99%;margin:0 auto;overflow:hidden!important;position:relative;color:#222;border:0;border-top:5px solid #1565c0;background-color:#1565c0;-webkit-transition:all .4s ease-in-out}
#tabbed-toc .loading{display:block;padding:5px 15px;font:normal bold 11px Arial,Sans-Serif;color:#FFF}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0;padding:0;list-style:none}
#tabbed-toc .toc-tabs{width:24.8%;float:left!important}
#tabbed-toc .toc-tabs li a{display:block;font:normal bold 10px/28px Arial,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer;-webkit-transition:all .3s ease-in-out}
#tabbed-toc .toc-tabs li a:hover{background-color:#515050;color:#FFF}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#bbb;color:#fff;position:relative;z-index:5;margin:0 -2px 0 0}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:75%;float:right!important;background-color:#F5F5F5;border-left:5px solid #bbb;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .3s ease-in-out}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px Arial,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:700;font-size:11px;color:#222;line-height:2.8em;height:30px;padding:0 10px;text-decoration:none;outline:none;overflow:hidden;-webkit-transition:all .3s ease-in-out}
#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:400;font-size:10px;color:#666;float:right}
#tabbed-toc .panel li .summary{display:block;padding:10px 12px;font-style:italic;border-bottom:4px solid #275827;overflow:hidden}
#tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}
#tabbed-toc .panel li:nth-child(even){background-color:#DBDBDB;font-size:10px}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#222;color:#FFF;outline:none;-webkit-transition:all .3s ease-in-out}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222}
@media (max-width:700px) {
#tabbed-toc{background-color:#fff;border:0 solid #888}
#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{overflow:hidden;width:auto;float:none!important;display:block}
#tabbed-toc .toc-tabs li{display:inline;float:left!important}
#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{background-color:#222;color:#ccc}
#tabbed-toc .toc-tabs {background:#222}
#tabbed-toc .toc-tabs li a.active-tab{color:#000}
#tabbed-toc .toc-content{border:none}
#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}
}
</style>
Nb : Untuk mengedit script di atas silakan ganti https://www.agungjakanugraha.com dengan domain sobat. Kita pun juga bisa mengedit CSSnya dengan mengganti warna atau yang lainnya.Yang terakhir silakan klik Publikasikan.
Demikian tutorial cara membuat daftar isi blog berdasarkan label responsive semoga bermanfaat. Terima kasih telah membaca artikel Agung Jaka Nugraha. Wassalam
