Cara Membuat Archive Blog yang Lebih Baik (Fresh Trick)

Posted on Feb 23, 2013

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?

Contoh

DEMO LIVE

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 haru mengubah javascriptnya.

Ini Dia Cara Untuk Mengaplikasikannya

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>

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

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

Contoh

.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 tutornya, diambil dan dikembangkan lagi oleh ini dari sini. Terimakasih.

Bagi yang merasa artikel ini menarik, dan ingin menyebarluaskannya dimohon bagi siapa pun yang ingin mengutip diwajibkan untuk mencantumkan kode link di bawah ini. Hargailah karya cipta orang lain. Terimakasih.

<a href="http://netfori.blogspot.com/2013/02/cara-membuat-archive-blog-yang-lebih.html">Cara Membuat Archive Blog yang Lebih Baik (Fresh Trick)</a>

34 comments:

UnknownFebruary 23, 2013 at 10:29 PM
mmmmm lain cara lain juga CSSnya
rahmatFebruary 23, 2013 at 10:48 PM
@ALt Amiend: memang benar sob, kalo sama ya aneh... :)
zigzoorFebruary 23, 2013 at 11:07 PM
wah mantap nih sob,ijin kopas untuk disimpan ya,buat blog yang lainnya,thks ya tutorialnya.
UnknownFebruary 23, 2013 at 11:11 PM
folback sukses...
rahmatFebruary 23, 2013 at 11:14 PM
@zig zoor: oke boleh aja, yang penting sertakan link sumber.. :)

@alt amiend: terimakasih telah bekerjasama.
AnonymousFebruary 23, 2013 at 11:58 PM
wah .. keren sobat ... :D
Achmad MuharyaFebruary 24, 2013 at 12:32 AM
lebih simple :D
UnknownFebruary 24, 2013 at 5:55 AM
Bagus juga tuh. Makasih udah share :) Hehe
HermanbagusFebruary 24, 2013 at 9:14 AM
wah bisa lebih bagus nih sob
rahmatFebruary 24, 2013 at 12:52 PM
@Nazar Dark:Waw makasih sob pujiannya...

@Achmad Muharya: Memang sob. Lebih simple.

@febriansyah haq: Iya sama-sama :)

@Herman Bagus: Iya sob memang.

Terimakasih untuk semua sudah berkenan berkunjung ke blog ini. :)
Abed SaragihFebruary 24, 2013 at 1:15 PM
Daftar isi atau archivenya model baru ini sob,terlihat macam semacam daftar isi yang seperti dibuku sob :)

Lain kali saya pakai model archive ini sob.Thks sob.
rahmatFebruary 24, 2013 at 2:12 PM
@Abed Siragih: Oke silahkan saja.
HanifFebruary 24, 2013 at 4:20 PM
nice kapan2 saya ambil, tapi mungkin ada sedikit yang harus dirubah -__-
News IPFebruary 24, 2013 at 4:39 PM
hehe, boleh juga,, nanti bisa aku coba,, sekarang lagi buru2.. :D
Belajar PhotoshopFebruary 24, 2013 at 7:28 PM
saiia mau pasang ini kang.. tapi kendala saiia adalah.. laman page saiia, kepotong.. en gag bisa di buka (klik) tulisan 'selengkapnya' itu kang... ada saran..?!?!
Harun ArFebruary 25, 2013 at 12:07 AM
Aku lihat demonya keren, script saya copy pula....
Makasih infonya

Ohya maaf ya kelamaan nunggu follow dari aku. Kali ini lancar mas aku member #44.
Tapi Profilmu memang tak ada di Campoeng Cmoneng, coba cek
Dhiyas knFebruary 25, 2013 at 1:42 PM
Lebih cepa ya loding nya. Nice tutorial gan. Mantap mampir ya
Arluva 25February 25, 2013 at 2:20 PM
mampir siang sobat
Harun ArFebruary 25, 2013 at 10:21 PM
Saya datang lagi Mas..., mohon maaf kalo ada sesuatu yg kurang ya..... Saya berharap kita menjadi sahabat yang akrab ke depan dan ke depannya...
Salam sukses untuk blog netfoi
News IPFebruary 26, 2013 at 7:12 PM
bagus ternyata tuh sob.. :D cuman ada tanggalnya itu lohh... :D
AnonymousFebruary 27, 2013 at 4:08 PM
baguss nihh sob untuk uji coba :D
News IPFebruary 28, 2013 at 2:27 PM
hadir kembali sob.. :D
Lion CommunityMarch 2, 2013 at 2:10 PM
Pokok Nya Backlinks Terus Gan :-)

Di Tunggu Backlinks Nya :D
AnonymousMarch 7, 2013 at 8:28 PM
kereen mas dan simple . izin mencoba :D
KatumbuMarch 8, 2013 at 4:04 PM
ijin bookmark dulu gan belum terlalu ngerti nhe..
Achmed Islamic HernawanMarch 9, 2013 at 8:00 AM
wah, asik juga tuw. spya bisa liat artikel terdahulu, ntar ane coba ah...
rahmatMarch 10, 2013 at 9:01 AM
@Hanif: Silahkan diambil. Tapi jangan lupa kasih link sumber. Gak asal KUTIP.

@News IP: Buru-buru kemana sih. Kok gak stay di sini aja??

@Belajar Photoshop "tulisan selengkapnya yang mana ya?" Perasaan hasil dari yang saya share tidak ada tulisan selngkapnya.

@Harun Ar: terimakasih, sobat. Iya mungkin salama ini banyak salah saya juga minta maaf. Amiin sobat. Salam sukses juga buat hanuracom.

@Aditia Novit: Oke sama-sama.

@Lion Community : Baclink ya?

@Yogie G. Kurniawan: Oke boleh aja silahkan di coba.

@katumbu: oke-oke monggo.

@Achmed Islamic Hernawan:Coba aja sekarang sob... hehehe

Oke terimakasih dengan segala kunjungan anda dan komentar yang mendikung blog ini. terimakasih saya ucapkan sebesar-besarnya.
UnknownMarch 14, 2013 at 7:10 PM
Keren sob :) kapan kapan saya ambil ya ;D
Pakistani ShadiMarch 18, 2013 at 5:52 PM
You made some good points .I did a little research on the topic and found that most people agree with your blog. Thanks.
Didin HanudinApril 4, 2013 at 10:13 PM
Info bagus nih jadi nambah pengetahuan. terimakasih
dangmurgantoApril 9, 2013 at 2:02 PM
mntab sob,,kyk daftar posting blog sobat ini ya..??
HanudinApril 13, 2013 at 2:18 PM
boleh juga nih infonya. akan aku coba th cara membuat archivenya. makasih udah berbagi
rahmatApril 30, 2013 at 4:09 PM
@Pakistani Shadi= wah bangga nih ada komen dari luar negeri. thank you very much.
SunandarMay 13, 2013 at 8:10 PM
alhamdulillah berhasil gan :)
thanks..

http://nandarious.blogspot.com/

Blog Netfori

Cara Membuat Archive Blog yang Lebih Baik (Fresh Trick)

Artikel Terkait :

34 comments:

Populer Pekan Ini

Recommended To Read!

Daftar Isi

Kategori

Info Blog Netfori

Klik Gambar Untuk Bergabung!