Cara Membuat Daftar Isi Blog Yang Keren dan Responsif

Saya memang baru banget dalam dunia perbloggeran, apalagi di platform blogger/blogspot. Memang saya sudah bergaul dengan dunia blog sejak sekitar 3 tahun yang lalu, tapi hanya di platform wordpress, itupun wordpress dot com lho bukan yang dot org :D
Badai WA
BWadai WA di blog saya beberapa waktu lalu
Namun sejak bWAdai di wordpress menyerang, saya mencoba untuk beralih ke blogger. Selain karena memang ingin belajar sesuatu yang baru, saya lihat di blogger cukup menjanjikan jika blog kita ingin di-monetize, karena banyak pilihan ads yang bisa kita pasang. bWAdai, sebut saja demikian adalah sebutan para blogger wordpress untuk krisis WordAds yang mengakibatkan banyak blogger dibanned dan kalau tidak di banned ya earningnya menjadi anjlok hingga 90%! :cry:

Malah curhat wkwkwk :D
OK, balik ke laptop...

Saat di blogger yang benar-benar baru bagi saya membuat saya harus googling kesana-kemari untuk setting ini itu. Cukup pusing memang, apalagi jika ganti template maka harus edit-edit html-nya lagi, hadehh... Sampai sekarang pun saya paling males untuk membuat gallery foto di blogger karena harus edit banyak html, ribet! Walaupun hasilnya bisa jauh lebih bagus di blogger. Kalau di wordpress dot com hampir semua fitur disediakan :D
Contoh Daftar Isi di Wordpress
Salah satu fitur yang menurut saya sangat penting adalah daftar isi blog. Daftar isi blog akan membuat pengunjung lebih mudah dalam bernavigasi, apalagi sudah diurutkan berdasarkan label yang ada, kemungkinan besar akan membuat pengunjung betah berlama-lama berselancar di blog kita :)

Ada 2 daftar isi di blogger yang menurut saya bagus, yaitu saya sadur dari sini dan situ. Dua-duanya pernah saya pakai, namun saat ini saya merasa lebih cocok dengan yang pertama. Kalau mau lihat, silakan buka daftar isi blog syaa ini :)

OK, bagaimana cara membuat daftar isi yang keren dan responsif di blogger? Begini nih caranya...
  • Login ke blogger
  • Masuk ke  menu Page dan buatlah Page (halaman) baru. Berilah judul Daftar Isi atau apapun yang dirasa cocok
Buat Page baru - Daftar Isi
  • Pilih menu HTML, jangan yang COMPOSE
Pilih mode HTML
  • Masukkan salah satu script di bawah ini, pilih sesuai selera
Script 1...
<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>

<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://www.otovirtual.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

<a href="http://www.otovirtual.com/" target="_blank"><span style="font-size: x-small;">OtoVirtual.com</span></a>
Script 2...
<div id="tabbed-toc">
<span class="loading">Loading, please wait for a moment...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://www.otovirtual.com", // Enter your blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Default thumbnail size
    noThumb: "", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window. `false` to open in same window
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts or
 //define how many recent posts are to be marked by changing the number
    newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>New!</em>" // HTML/CSS for
//the "New!" text
};
</script>
<script src="https://googledrive.com/host/0B_PLgWpOK_wTazVMekZ3TTBiY2M/" type="text/javascript"></script>
<style>
/*Sitemap  */
#tabbed-toc {
 width: 99%;
 margin: 0 auto;
 overflow: hidden !important;
 position: relative;
 color: #222;
 border: 0;
 border-top: 5px solid #FC0204;
 background-color: #1D1D1D;
 -webkit-transition: all 0.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:#ccc;
 text-transform:uppercase;
 text-decoration:none;
 padding:0 12px;
 cursor:pointer;
  -webkit-transition: all 0.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: #FF3333;
 color: #222;
 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 #FF3333;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all 0.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: bold;
 font-size: 11px;
 color: #222;
 line-height: 2.8em;
 height: 30px;
 padding: 0 10px;
 text-decoration: none;
 outline: none;
 overflow: hidden;
 -webkit-transition: all 0.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 0.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 li a.active-tab {
 color:#000;
}
#tabbed-toc .toc-content {
 border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
 display:none;
}
}
</style>

<a href="http://www.otovirtual.com/" target="_blank"><span style="font-size: x-small;">OtoVirtual.com</span></a>

  • Publish Page baru ini dan lihat hasilnya :)
Sangat mudah bukan? Jangan lupa untuk mengganti font yang berwarna biru dengan alamat blog masbro semua. Dan sekali lagi, pilih hanya salah satu script di atas, jangan dua-duanya dicopy :)

Untuk Script 1 hasilnya seperti di bawah ini :
Contoh Daftar Isi Blog dengan Script 1 di atas
Sedangkan Script 2 hasilnya seperti ini :
Contoh Daftar Isi dengan Script 2 di atas


Update 23 Oct 2016

Berhubung script di google drive sudah tidak bia diakses, maka untuk kedua cara di atas sudah tidak berfungsi lagi. Silakan lihat cara yang di bawah ini untuk membuat Daftar Isi Blog :)


Post a Comment

0 Comments