April 11, 2012

Menambahkan Scroll Pada Widget-Widget

Situseo Blog : Memasang atau menambahkan scroll pada widget, dari beberapa widget yang terpasang mungkin ukurannya tidak selalu sama antara yang satu widget dengan widget yang lainnya, selain untuk menghemat ruang, dengan menambahkan scroll pada widget bisa kita manfaatkan untuk merapihkan atau membuat sama ukuran widgetnya.

Jika sebelumnya pernah dikupas Cara Memasang Scroll Pada Postingan, untuk menambahkan scroll pada widget ada 2 cara untuk melakukannya, walaupun kode utama scroll tetap sama yaitu overflow:...;, sebagai contoh kita akan memasang scroll pada widget Popular Post, saya asumsikan kalian sudah memasang widget popular post pada blog kalian, untuk menambahkan scroll pada popular post, masuk Edit HTML - Ceklist Expand Widget Template dan lakukan backup template jika diperlukan untuk menghindari kesalahan.

Cara 1 :
Setelah masuk menu Edit HTML, cari kode :

<div class='widget-content popular-posts'>

kemudian tambahkan kode scroll, style='overflow:auto; height:200px' sehingga kode-nya menjadi seperti ini ;

<div class='widget-content popular-posts' style='overflow:auto; height:200px'>

popular-post merupakan nama widget yang akan dipasang scroll, sedangkan height:200px merupakan ukuran tinggi dari widget popular post tersebut, kalian bisa atur ukuran ketinggian dari widget tersebut dengan mengubah angkanya.

Cara 2 :
Selain dengan cara pertama yang begitu simple dalam pemasangan fungsi scroll pada widget, kalian bisa menambahkan scroll pada widget dengan cara menambah kode css yang ditempatkan diatas kode ]]></b:skin>, seperti contoh pada cara pertama yaitu memasang scroll pada widget popular post, kode css yang harus ditambahkan adalah :

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

#PopularPosts1 merupakan id dari widget popular post, jika kalian akan memasang scroll pada widget yang lainnya, kalian harus mengetahui id dari widget yang akan ditambahkan scroll.

memasang scroll widget

Selain hanya memasang scroll pada widget dengan menambahkan kode css seperti diatas, kalian bisa memodifikasi widget tersebut dengan penambahan background ataupun dengan pemberian bentuk dll, sebagai contoh sederhana kita tambahkan kode css untuk memberi background dan border lengkung, kode css yang ditambahkan :

#PopularPosts1 .widget-content {
   Background: #91AC53;
   border-radius: 10px;
}

Sehingga keseluruhan kode css yang perlu diletakan diatas kode ]]></b:skin> adalah sebagai berikut :

#PopularPosts1 .widget-content {
   height:200px;
   overflow:auto;
   Background: #91AC53;
   border-radius: 10px;
}

Save template kalian dan lihat hasilnya, jika dari contoh diatas kurang cocok dari segi tampilannya, kalian bisa menambah style-style lainnya, atau bisa juga backgroundnya diganti dengan gambar kesayangan kalian.

Semoga bermanfaat,

15 Diskusi untuk Menambahkan Scroll Pada Widget-Widget

12 April 2012 10.20  

MAAF OOT brow, gimana caranya menghapus dua posting pada blog, sekian terima kasih

12 April 2012 17.41  

bingung bos

13 April 2012 00.07  

@BangTho wah jangan bingung2 nanti tambah stress loh...hehehehehe (keep try and learn...happy blogging :D)

13 April 2012 00.45  

@Moh. Makrus Sahlan masuk menu post and delete

13 April 2012 12.57  

nice share

template.y bgus sob, ajrin bwt donx. hhe kunjung balik sob http://aryx-world.blogspot.com

24 April 2012 16.41  

Iya jangan Bingun maen blog..

Menurut saya
"Karena Blog itu membuat kita senanng"

http://pkt-studio.blogspot.com/
Makasih TIPS nyadi coba yaa.

3 Mei 2012 22.15  

Info yang baguz sekali untuk disimak.....
Bermanfaat sekali untuk saya....

Mohon kunjungan baliknya yaa....
Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

( http://zamrudhijau.blogspot.com/ )

13 Mei 2012 13.42  

kalau memberi lebih dari 1 widget caranya bagaimana bos???
soalnya, widget di blog saya banyak makan tempat.
ditunggu jawabannya ya bos?

#LagiKesempatanBukaBloggerNihBos!

15 Mei 2012 19.50  

nice sharing sob

7 Agustus 2012 12.18  

Terimakasih banyak mas sudah share tutorialnya. :)

Terimakasih banyak sudah share. Sangat membantu sekali ;)

7 November 2012 07.04  

thanks gan untuk infonya, sangat membantu tentunya untuk perkembangan blog saya, bila agan berkenan silahkan kunjungi blog saya di d-ungu.blogspot.com
tetapi maaf apabila blog saya acak-acakan, maklum lah, saya adalah blogger awam . . .

21 Desember 2012 17.02  

Info yang baguz sekali untuk disimak.....
Bermanfaat sekali untuk saya....

Mohon kunjungan baliknya yaa....
Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

Title: Zamrud News
( www.zamrudnews.com )

13 Februari 2013 10.55  

Wah keren.. thnks ya infonya..

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top