Friday, June 22, 2012

3 cara mudah menyisipkan scroll pada sebuah widget


fungsi scroll sendiri adalah untuk membuat blog menjadi lebih rapih, agar blog anda tidak terlalu terlalu luas apalagi untuk widget widget yang panjang seperti popular post, recent post, dll itu sangatlah panjang dan harus dikurangi panjangnya untuk itu gunakanlah cara ini karena dengan cara ini tampilan dari widget tersebut akan terpotong dan akan terlihat lebih rapih

3 cara yang akan saya share disini sangatlah mudah untuk di praktekan, ok langsung saja ke cara mengenai 3 cara mudah menyisipkan scroll pada sebuah widget semoga dengan ocehan yang ga jelas dan ga bermutu ini bisa di mengerti ok ke caranya :

Cara pertama :

masuk ke tata letak kemudian add gadged/tambah gadget kemudian masukan 
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;"> dan  </div> untuk penutupnya seperti contoh seperti ini :

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
ISI WIDGET........
</div>
 height:200px adalah panjang widget scroll, anda bisa mengganti sesuai kebutuhan

cara kedua :

cara ini lumayan susah buat dibuat menjadi scroll khususnya cara ini buat widget popular post, arsip blog dll 
ok langsung pertama masuk ke bagian template anda ke bagian edit html kemudian cari kode widget yang ingin di beri scroll ( ingat centang expand widget template ) pada saat ini saya akan memberi contoh arsip blog atau arcive blog, ok cari kode yang mirip seperti ini <div id='ArchiveList'> atau kalau anda tidak menemukannya cari kode yang bertuliskan arsip blog atau archive kemudian akan muncul kode seperti ini


<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<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'/>
nah cara untuk menambahkan scroll pada widget itu cukup menyisipkan  <div style='overflow:auto; width:ancho; height:220px;'> dan </div> untuk penutup menjadi seperti ini



<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:220px;'> <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>

height:220px ini adalah panjang dari scroll tersebut anda bisa menggantinya sesuai kebutuhan

cara ketiga :

 cara terakhir sekaligus cara termudah ok ga usah basa basi langsung ke caranya, caranya masuk ke bagian edit html pada blog anda cara ini berbeda dengan cara di atas dan disini janganlah anda mencentang expand widget template ok bila anda sudah masuk ke bagian template tampa mencenagn expand widget template cari kode yang ID widget yang anda ingin beri scroll  sebagai contoh pada saat ini saya akan menyisipkan widget popular post agar ada scroll. saya mencari Id popularpost sendiri menggunakan f3 atau ctrl+f dan muncul seperti ini



<b:widget id='PopularPosts1' locked='false' title='populer post' type='PopularPosts'/>
nah yang berwarna merah itu adalah Id widget popular post itu sendiri, setelah megetahui ID widgetnya sekarang cari kode
]]></b:skin> dan masukan kode berikut





#PopularPosts1 .widget-content{
height:164px;
width:auto;
overflow:auto;
}

nah yang berwarna merah itu diganti dengan ID widget yang anda ingin beri scroll

nah cukup sudah artikel mengenai 3 cara mudah menyisipkan scroll pada sebuah widget yang menurut saya sangatlah acak-acakan dan susah untuk dimengerti tapi semoga bisa di maklumi ( ngetik jam 4 malam ) untuk itu saya harap dengan artikel 3 cara mudah menyisipkan scroll pada sebuah widget ini anda akan terbantu dan bermanfaat terima kasih








No comments:

Post a Comment