17 Desember 2009

Autoscroll pada Blog Archive (arsip blog) Blogspot.com

Blog archive adalah arsip postingan pada blog mulai dari pertama kali memosting sampai dengan postingan terakhir. Kesulitan yang dihadapi adalah jika jumlah postingan sudah terlalu banyak dan waktu postingan yang telah lama sehingga menyebabkan tampilan di blog menjadi sangat panjang.

Pada Blog Archive attayaya, postingan dimulai sejak Mei 2008, dan ditampilkan berdasarkan rangkuman bulan, kecuali pada bulan berjalan akan dimunculkan per judul postingan. Jika 1 bulan attayaya memosting 20-30 postingan maka Blog archive akan memanjang ke bawah sebanyak 20-40 baris (tergantung panjang judul). Bayangkan betapa panjangnya Blog Archive itu nantinya.

Untuk memperpendek tampilan Blog Archive, tanpa menghilangkan/menyembunyikan tanggal/bulan/tahun rangkuman archive, maka dapat mempergunakan perintah "overflow:auto" yang berfungsi untuk meng-autoscroll tampilan blog archive. Contoh ada disamping kanan.

Cara Autoscroll pada Blog Archive Blogspot.com
tetapi yang perlu diingat adalah :
beda timplet bisa menjadi beda kode html
jadi... kode html dibawah ini bisa jadi tidak ditemukan pada blog temen2


Sign in
masuk ke Tata Letak
masuk ke Edit HTML
klik/centang Expand Template Widget
Cari kata "ArchiveList" (pada template lain mungkin "BlogArchive")
Dibawah kata ArchiveList, cari kode yang mirip seperti di bawah ini :

<div class='widget-content'>

<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

<b:include name='quickedit'/>
</div>

tambahkan :
<div style='overflow:auto; width:ancho; height:420px;'>

dibawah :
<div class='widget-content'>

dan tambahkan (untuk menutup fungsi div diatas) :
</div>

diatas :
<b:include name='quickedit'/>


sehingga semua kode menjadi :

<div class='widget-content'>

<div style='overflow:auto; width:ancho; height:420px;'>

<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

</div>

<b:include name='quickedit'/>
</div>


Catatan :
  1. Kode berlatar belakang biru adalah kode yang ditambahkan.
  2. Cara ini bisa juga dipakai untuk membuat AutoScroll pada Label/Kategori atau pada widget lain yang memanjang.


Selamat mencoba...................


Terima kasih untuk Bang Ais www.menyanyah.com yang telah mengoprek blog archive attayaya pada malam Selasa (hari Senin jam 20.30 wib 14 Desember 2009.
Bersamaan dengan perbaikan terhadap blog Ijopunkjutee (http://ijopunkjutee.blogspot.com/) yang sebelumnya hancur babak belur dipukul oleh mbah google.
Hal yang sama diderita oleh Dinoe http://dinoe-dasbos.blogspot.com/
Semoga masalah Dinoe dapat terselesaikan.





43 komentar:

  1. ehehehe...iya iya...ntar deh, kalo punyaku kepanjangan, baru dipasang yang kaya gitu.
    thanks ya

    BalasHapus
  2. makasih, bro...

    liburan jgn tidur melulu, ntar gendut lho. hehehe

    BalasHapus
  3. Makasih tutorialnya mas atta...

    BalasHapus
  4. Mantabs nich... Sippp...

    BalasHapus
  5. Assalamualaikum kang Atta ,semoga kabar baik ya....

    Wa..boleh nih di terapkan diblogku...maksih banyak kang tipsnya.

    BalasHapus
  6. blog ku blum setaun, arsip nya msh pendek..

    BalasHapus
  7. Udah saya praktekin kang..mantab deh tipsnya...

    BalasHapus
  8. ilmu penting neh...
    makasih banyak, bang..atas infonya...

    aku bookmark dulu kalau2 diperlukan suatu saat... tengkyu... ^_^

    BalasHapus
  9. Memang sangat perlu tuh dibikin scroll...

    BalasHapus
  10. makasih buat kunjungan nya, aku juga sering berkunjung ke sini walaupun tanpa komen hohoho

    BalasHapus
  11. mantabh gan... langsung bookmark... karena ini dia yang aku cari2 selama ini... tsrimakasiiiiiih....

    BalasHapus
  12. apa kbr bang.....wah boleh juga tipsnya buat siap2 klo udah panjang nanti tp kyknya masih lama..

    BalasHapus
  13. Wah! attayaya skrg nampilin trik ngeblog ye, keren.. keren..

    oiya, kamar mandinya dmn?? bole numpang ga?

    BalasHapus
  14. izin copy tutorialnya...
    buat dokumentasi,, dan nanti kalo waktu dah ada akan saya praktekkan..
    terima kasih ya..

    Salam Hangat Selalu

    BalasHapus
  15. oohh.. iya juga yah,, kalo udah kebanyakan pasti jadi panjang gitu deh... ntar deh dipraktekin kalo dah banyak postingannya :D

    BalasHapus
  16. Mantap tutorialnya bang..sayang blm bisa praktekkan blog saya masih blm sembuh bang...mudah2 berkat bantuan dan doa bang attayaya.. . blog saya bisa kembali sembuh, saya bw pakai yg domain dulu bang...thanks atas bantuannya

    BalasHapus
  17. Siiip banga atta..punya dasir sih dah pake model drop down archivenya, tapi labelnya belumm..kusimpan dulu..salam

    BalasHapus
  18. Sekarang ga pake moderasi lagi ya bang?

    BalasHapus
  19. langsung puyeng dikasih html @.@

    BalasHapus
  20. salam sejahtera
    terima kasih yach dach beri saya ilmu yang berharga

    BalasHapus
  21. g berhasil sob malah muncul pesan ini

    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "b:includable" must be terminated by the matching end-tag "".

    code ini <div class='widget-content'> g ada dsekitar ArchiveList yang mirip pun juga ga ada yang ada malah, yang ada malah de sekitar recent coment

    ada solusi g sob ?

    BalasHapus
  22. Thanks Bang, wah punyanya prof. diajar sama mbah google ya?
    ahh...

    BalasHapus
  23. Blog IjoPunkJutee dah PECICILAN lagi Oom...:D

    BalasHapus
  24. kok bisa dipukul sama mbah google.????

    udah daftar blogvertise, udah diapprove blognya, tapi accountnya kok awaiting approval yah.. huh hhuh...

    BalasHapus
  25. Tutorial yang bermanfaat Bang, kalo ngga dibikin scroll, malah jadi aneh, kepanjangan...

    BalasHapus
  26. Horeeeee *tepuk tangan* tambah ilmu lagi neh, bang. Ntar baru dicoba deh :D makasih info-nya, bang hehehe :D

    BalasHapus
  27. mantab tutor'y bRo...
    pY bLogwaLking....

    BalasHapus
  28. Rupanya ada juga Dokter blog di Bertuah, Besok2 kalau sakit pergi kesana ah...

    Thanks infon Om

    BalasHapus
  29. nice info :) kayaknya sayah juga perlu itu untuk blog ku huhuhu kepanjangan :)

    lagi ga pengen nyepam..segini aja coment na

    BalasHapus
  30. upzt..baru ngeh di blog ku :D
    blog kuh udah tuh ^^
    keknya kerenan di blog ku deh daripada abang :P

    udah ga moderasi yah?

    BalasHapus
  31. wooooow, langsung di coba neh bang.....kerennnnn!

    BalasHapus
  32. beda timplet beda kode ya
    ingak...ingak...
    tiiing.....

    BalasHapus
  33. kalo gampang mau coba ah..thanks..

    BalasHapus
  34. wah..archive blog ku menghabiskan tempat..patut dicoba neh..thx infonya..

    BalasHapus
  35. makanya perlu diminimalis hehehe

    BalasHapus

Copyright © 2013 attayaya: Autoscroll pada Blog Archive (arsip blog) Blogspot.com | Blogger Template for Bertuah | Design by Ais Bertuah