Cara membuat widget menjadi scroll

Pada kesempatan yang berbahagia ini saya selaku Admin ingin membahas bagaiman cara membuat widget-widget tertentu menjadi scroll vertikal dari atas ke bawah.

Puji syukur kita panjatkan kepada Allah SWT, yang telah memberikan banyak kenikmatan kepada kita hingga muncul lah artikel ini (macam pidato aja hehe).

Kenapa saya membahas scroll vertikal? Karena scroll vertikal sangat penting untuk menghemat tempat di blog. Scroll vertikal ialah scroll yang menggulung dari atas kebawah. Scroll ini bisa digunakan pada label, blog archive atau widget-widget lainnya.

Langsung aja ke TKP.

Langkah-langkah :

1. Seperti biasanya, login ke account blogger anda dulu (JANGAN BLOG SAYA) hehe.

2. Lalu anda akan masuk ke menu Dashboard / Dasbor, kemudian langsung saja menuju ke menu Design / Rancangan. Kemudian, masuklah ke menu Elemen laman.

3. Sebelum anda dapat membuat scroll pada widget, anda harus mencari ID dari widget tersebut. Caranya klik Edit yang berada pada widget

4. Setelah itu akan muncul gambar seperti ini

 dan lihat tulisan pada pojok kanan atas

Gambar ini merupakan contoh widget blog archive, setiap Id pada widget pasti berbeda-beda. Contoh:

A. Widget Label = Label1 ; Label2 ; Label3 ; dan seterusnya

B. Widget Blog Arsip = BlogArchive1 ; BlogArchive2 ; BlogArchive3 ; dan seterusnya 


C. Widget Profil Blogger = Profile1 ; Profile2 ; Profile3 ; dan seterusnya 
d. Widget yang tidak diberi judul = HTML1, HTML2, HTML3 dan seterusnya.

 
5. Sebagai contoh, saya akan membuat scroll pada widget Label.
6.  Masih pada menu Rancangan, lalu klik menu Edit HTML Cari kode
]]></b:skin> dengan menggunakan Ctrl + F
7. Kemudian, letakkan kode dibawah ini dan letakkan di atas kode]]></b:skin>

#Label1 .widget-content{

height:200px;

width:auto;
overflow:auto;
}



 







Yang perlu di perhatikan : 

• Label1 adalah ID dari widget label. Ganti dengan ID widget yang ingin anda buat scroll
• height:200px; adalah tinggi dari widget scroll. Ganti dengan tinggi widget scroll yang anda inginkan

8. Susunan lengkapnya akan menjadi seperti di bawah ini

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

]]></b:skin>

Selesai, sekarang ruang blog Anda menjadi hemat.