Cara Membuat Tampilan Scrool di Blog

Buat sahabat blogger ,, untuk kali ini saya membagikan artikel tentang cara membuat sebuah tabel gadget menjadi scrool , sebagai contoh bisa anda lihat pada gambar di atas, pada dasarnya semua gadget html entah berisi seperti arsip blog, popular post dsb semuanya bisa di buat tabel menjadi tampilan scrool seperti gambar di atas, manfatt yang ada merubah tampilan menjadi scrool yang pasti lebih simple dan praktis, nah langsung saja untuk caranya bisa anda lihat di bawah ini.


!] Untuk yang pertama, login di blogger anda.


2] Lalu kedua, buka menu template.


3] Ketiga , buka edit HTML dan jangan lupa centang expand template widget.


4] Untuk ke empat, cari widget yang ingin anda buat menjadi scrool, ketik CTRL+F lalu ketikan judul widget yang ingin anda buat scrool, sebagai contoh saya merubah tampilan scrool pada widget archives / arsip blog, contoh kode archivesnya di bawah 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:300px;'><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>

seperti yang anda lihat pada kode di atas, pada kode warna biru adalah kode tambahan yang anda tambahkan pada widget yang ingin anda buat menjadi scrool, dan pada angka warna merah tebal adalah ukuran widget tersebut , anda bisa merubah sendiri sesuai keinginan anda.


5] Untuk yang terakhir, anda bisa klik pritinjau sebelum save template untuk lihat hasilnya, bila terjadi error, berarti anda belum tepat meletak kode tersebut, anda bisa ulangi lagi untuk meletakan pada posisi yang benar.


cukup segini dulu, semoga bermanfaat.