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..
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
1 komentar so far
mksh sharingnya gan
Silahkan tambahkan komentar Anda, Semoga dapat sama-sama membangun. Terima kasih.
EmoticonEmoticon