Cara Membuat Scroll Pada Widget Blog

Apakah Anda ingin memasang scroll pada widget, seperti yang saya pasang pada widget Ebook Gratis, Nonton Video dan Arsip Blog di blog ini? Kalau ya, silakan simak penjelasannya di bawah ini.

Scroll adalah bentuk minimalis dari sesuatu widget yang bisa kita tarik ke bawah dan ke atas. Penggunaan efek scroll pada widget ini bertujuan agar lebih rapi, tidak makan tempat banyak dan juga agar lebih terkesan minimalis. Membuat scroll pada widget tidaklah susah. Karena kita hanya menambahkan beberapa kode agar fungsi scroll  muncul. Di dalam dunia blog, ada 2 cara untuk membuat scroll pada widget, yaitu :

1. Widget tanpa kode HTML/Javascript.

Pertama kita harus tahu nama widget yang akan kita beri scroll. Caranya, masuk menu Tata Letak dan sentuhkan cursor di tulisan edit pada widget yang akan diberi scroll. Pada bagian bawah akan terlihat nama widget, lihat pada gambar di bawah ini nama widget-nya adalah PopularPosts1.

Setelah kita mengetahui nama widgetnya, maka sobat masuk ke menu Template dan pilih Edit Html.

Lalu cari kode ]]></b:skin>, agar lebih mudah sobat gunakan tombol ctrl+F.

Masukan kode berikut tepat di atas kode ]]></b:skin>.

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

Nb : 1. Kode Berwarna merah adalah kode widget yang akan diberi scroll.
        2. Kode Berwarna biru adalah kode untuk tinggi widget scroll. 

Terakhir, Save dan lihat hasilnya.

2. Widget dengan kode HTML/Javascript.

Untuk membuat scroll pada widget dengan HTML/Javascript, Anda hanya perlu menambahkan sedikit kode berikut pada widget yang akan diberikan scroll.

<div style="overflow:auto; width:100%px; height:230px; padding:10px; border:1px solid #999999;">
"kode widget"</div>

Nb : 1. Tulisan yang berwarna merah adalah tempat untuk menaruh kode widget yang akan di scroll.

        2. Kode yang berwarna biru adalah lebar untuk widget scroll.

Demikian, semoga bermanfaat.

Categories: Seo