Cara Membuat Daftar Isi Blog dengan Menu Keren

|| || || 8 komentar
Membuat Daftar Isi Blog Otomatis Dengan Menu - Daftar isi pada blog adalah daftar deretan artikel-artikel yang ada pada blog tersebut dan biasanya berada pada suatu laman atau halaman web/blog. Daftar isi biasanya berfungsi untuk mempermudah pengunjung mencari artikel-artikel yang membahas informasi yang pengunjung cari. Setiap blog biasanya memiliki daftar isi yang berbeda-beda.

Daftar isi yang akan saya bahas kali ini adalah daftar isi yang berbeda dari sebelumnya. Daftas isi saya kali ini sudah saya lengkapi dengan menu pilihan (opsi) bagi pengunjung untuk melihat-lihat artikel dari menu label yang pengunjung klik. Sehingga pengunjung akan lebih mudah dan cepat dalam mencari artikel yang pengunjung butuhkan.

Jika anda masih kurang belum mengetahui dan mengerti, silahkan anda klik link DEMO di bawah ini:


Memasang daftar isi pada blog menurut saya baik untuk SEO (Search Engine Optimization). Karena dengan memasang daftar isi pada blog, mesin pencari bisa lebih meningkatkan kemampuanya untuk mengindeks blog anda sehingga blog anda akan lebih di sayang oleh Google. 

Baca Juga : Cara Membuat Daftar Isi Otomatis Super Ringan

Memasang Daftar Isi dengan Menu di Blog

Silahkan ikuti langkah-langkah di bawah ini jika jika anda tertarik ingin memasang script ini di blog saudara:
  • Login dengan akun blog saudara
  • Masuk ke Dasboard blog yang ingin anda edit
  • Pilih menu Laman --> Buat Laman Baru --> Laman Kosong
  • Klik tombol HTML pada entri Laman (Ada di bagian bawah kolom judul laman)
  • Masukan script di bawah ini :
 <style type="text/css">
#tabbed-toc {
  margin:0 auto;
  background-color:#8A94F0;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#000;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px Tahoma,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Tahoma,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#C4C9F8;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#181D67;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #181D67;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#051466;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  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 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#eee;
}
#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:#999;
  color:none;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #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,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<a href="http://ngeblog07.blogspot.com" style="display: block; font: normal bold 8px Tahoma,Sans-Serif; margin: 9px; text-align: right; text-decoration: none;" title="ARSIP">arsip</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://ngeblog07.blogspot.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: false,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script>
  • Berikan judul laman sesuai keinginan anda, seperti Daftar Isi Blog, Daftar Post , dan lain-lain.
  • Berikan juga Deskripsi Penelusuran jika perlu (Baca: Membuat Deskripsi Berbeda Tiap Artikel)
  • Jika semua dirasa sudah siap, silahkan klik PUBLIKASIKAN.
Catatan : Silahkan anda ganti url berwarna merah tebal dengan alamat url blog anda.

Terima Kasih Atas Kunjungan Anda
Judul: Cara Membuat Daftar Isi Blog dengan Menu Keren
Ditulis Oleh Riki Junizar
Artikel ini dipatenkan pada www.myfreecopyright.com, Jika mengutip harap berikan link balik yang menuju artikel Cara Membuat Daftar Isi Blog dengan Menu Keren ini. Jika tidak akan diproses secara DMCA Takedown yang tentu saja tidak baik akibatnya bagi blog saudara. Terima kasih atas perhatiannya

/[8 komentar Untuk Artikel Cara Membuat Daftar Isi Blog dengan Menu Keren]\
Ibrahim M.Pd.I mengatakan...

Cara Membuat Daftar isi Blog Keren dan Cantik memang menjadi keinginan para blogger ya sob, hal itu sebagai salah satu penarik pengunjung. oya terima kasih atas artikel yang bermanfaat ini, Salam hangat saya dari www.terwujud.com

Marlon Alamo mengatakan...

Wah tampilannya bagus sobat. Mohon ijin pakai Daftar Isi nya ya sobat.
Terima kasih sudah sudi berbagi.
Salam Kenal, dan salam blogger

Benii saputra mengatakan...

mantap mas thx info dan izin copy yah

alifia institute mengatakan...

Thank's Bang,

Rosyid Hidayat mengatakan...

thank you !

Susu Kambing Newgoat mengatakan...

Waahhh boleh nih di coba :D
thanks saranya :)

Winda Ayu Fitriani mengatakan...

trimakasih atas pencerahannya...<3

Arif Hidayat mengatakan...

cara pasang link artikelnya itu gmna gan?

Posting Komentar

Terima kasih telah membaca artikel di atas, kalau boleh dibantu tolong berikan komentar yang relevan sesuai dengan topik pembahasan artikel di atas. Anda diperbolehkan berkomentar dengan memperhatikan hal-hal berikut:
1. Komentar jangan mengandung SARA dan PORNO.
2. Jangan berkomentar dengan menggunakan LINK MATI apalagi LINK AKTIF.
3. Jika anda orang Indonesia yang cinta tanah air, maka berkomentarlah dengan bahasa baku dan sopan.
Jika komentar anda melanggar syarat di atas, maka komentar anda tidak akan saya publish dan akan saya tandai sebagai SPAMER.

Terima kasih atas kunjunganya ^_&