Cara Membuat Blog Archive

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.

Contoh

Keunggulan

• 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

• Anda tidak dapat mengubah format tanggal.
• Anda tidak dapat mengubah table headernya.

Sebenarnya bisa, tetapi harus mengubah javascriptnya.

Ini Dia Cara Untuk Mengaplikasikannya

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

2. Beri judul untuk laman anda, tentu saja misal: "Blog Archive" or "Daftar Isi" 

3. Masuk pada HTML > Paste 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>

4. Preview, dan save !

Note: Jika anda tidak ingin menampilkan tanggal anda dapat menambahkan kode di bawah 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

Demikian Semoga Bemanfaat, Terimakasih.