Selasa, 14 Mei 2013

Menampilkan Arsip Blog dengan Scroll

Hallooo sobat Rojear, kali ini kami akan menshare tutorial tips dan trik pada blog dengan membuat scroll pada widget arsip blog agar lebih hemat dalam penempatannya dan tampilan pun akan terlihat rapih. Menggunakan tampilan herarki pada arsip blog yang mempunyai kelebihan bisa menampilkan jumlah tulisan perbulan dan judul akan sedikit membuat blog terlihat kurang rapi. Oleh karena itu disini kita akan membuatnya menjadi bentuk scroll. Jika sobat sudah menambahkan widget arsip blog dengan model herarki ini, langsung saja lakukan langkah selanjutnya.

Cara Membuat Scroll Pada Blog Archive (Arsip Blog)

- Login ke Blogger.

- Di halaman Dasbor, kita pilih Rancangan.

- Kemudian pilih Edit HTML

- Beri tanda centang pada Expand Template Widget

-download dulu template sobat untuk mengantisipasi bila terjadi eror dan kacau nantinya

-Kemudian cari kode berikut ini :

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

-Setelah ketemu sobat letakkan kode <div style='overflow:auto; width:ancho; height:200px;'> tepat dibawah <div class='widget-content'>

-Setelah selesai sobat letakkan kembali kode </div>


-Kode lengkapnya adalah seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>

Kode warna biru dan hijau adalah kode yang ditambahkan kedalam script tersebut, 200 adalah tingginya, dan kita bisa ubah seseuai selera sobat.

-Simpan jika sudah selesai.

semoga bermanfaat sahabat Rojear.....

Artikel Terkait:

Share this article now on :

Posting Komentar

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( :-p =))