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.





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