Cara Membuat Archive Blog atau Daftar Isi Blog lebih baik di Laman Blog

Archive or Daftar isi pada blog sangat penting dipasang. Semua visitor kita dapat lebih mudah mengetahui semua postingan kita, mereka dapat memilah dan mimilih lebih banyak sesuai yang mereka butuhkan, oleh karena itu saya akan mengeshare cara membuat archive dengan tampilan baru.

Ini trik baru yang telah saya edit dan kembangkan dari bloggerplugins.org, saya berterimakasih kepada pihak di atas. Lalu apa kelebihan dengan archive lainnya?

Untuk sobat blogger yang ingin mengetahui DEMO LIVEnya, bisa dilihat link di bawah ini..

DEMOLIVE

BEBERAPA COOL FEATURES-NYA:

• Menggolongkan dengan judul-nya (ascending or descending) - dengan mengklik "Judul Posting" di table header.
• Menggolongkan dengan tanggal (older first or newer first) - dengan mengklik "Tanggal Posting" di table header.
• LEBIH CEPAT, mengapa? karena dengan trik ini, semua widget di samping kanan maupun kiri, akan hilang dengan sendirinya.
• Akan ada penjelasan seditkit tentang isi postingan, ketika mouse kita dekatkan ke link-nya.

KELEMAHAN DARI PENGGUNAAN SCRIPT INI ADALAH:

• Anda tidak dapat mengubah format tanggal.
• Anda tidak dapat mengubah table headernya.
• Sebenarnya bisa, tetapi harus mengubah javascriptnya.

BAIKLAH, LANGSUNG SAJA BERIKUT TUTORIALNYA :

·         Buat halaman baru bisa lewat "Buat Laman" atau-pun lewat "Entri Baru" tetapi lebih dianjurkan untuk membuat lewat"Buat Laman".

·         Beri judul untuk laman anda, tentu saja misal: "Archive" or "Daftar Isi" 

·         Masuk pada HTML TAB > Paste kode di bawah ini:

<div id="bp_toc">Loading TOC. Please wait....</div><script src="https://sites.google.com/site/blognetfori/archive/Mycontent_Arc.js" type="text/javascript"></script><br /><script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script><br /><style>.blog-pager, #footer-wrapper, #footer-wrapper2, .footer, .post-footer, .feed-links, .sidebar { display:none !important;}#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}#bp_toc {  border: 0px solid #000000;  padding: 5px;  width:100%;  margin-top:10px;}.toc-header-col1, .toc-header-col2, .toc-header-col3 {  background: #fff;  color: #000000;  padding-left: 5px;  width:60%;}.toc-header-col2 {  width:20%;}.toc-header-col3 {  width:20%;}.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {  font-size:14px;  text-decoration:none;}.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {  font-size:14px;  text-decoration:underline;}.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {  padding-left: 5px;  font-size:14px;}</style>

·         Preview, and then save it! (jika sudah final)

Note: Jika anda tidak ingin menampilkan tanggal anda dapat menambahkan kode dibawah ini setelah kode css di atas tadi:

 .toc-header-col2,.toc-entry-col2{display:none} , if you want to hide date column.toc-header-col3,.toc-entry-col3{display:none} , if you want to hide the label column

Sumber