Inilah 3 cara sederhana membuat scroll widget di blogspot

Assalamu’alaikum.Wr.Wb | Scroll sangat dibutuhkan untuk membuat halaman blog menjadi lebih hemat, apalagi jika anda banyak menggunakan Widget di blog anda. Tentunya anda tidak mau, kan? Blog tercinta yang anda miliki, kurang menarik karena penempatan widget yang acak-acakan. Ini akan berpengaruh kepada kredibilitas blog anda dimata pengunjung, ya, walaupun konten tetap menjadi yang utama, tapi penampilan akan selalu menjadi penilaian pertama dimata pengunjung. Untuk itu anda perlu membuat setiap widget yang memakan tempat di blog anda menjadi scroll, contoh widget yang sering makan tempat adalah Artikel terkait, Link Teman, Artikel terbaru, Artikel terpopuler, dan masih banyak lagi.

Kali ini saya akan berbagi 3 cara yang sederhana untuk membuat widget anda menjadi scroll, biar tak panjang lebar, berikut caranya:

 Cara Pertama
      1. Buka Pengaturan blogspot anda, Rancangan, Elemen Laman. Silahkan anda tambahkan  widget baru dengan klik Tambah Gadget, lalu pilih html/javascript.

      2. Berikan judul dan pada pada bagian content letakkan kode seperti ini

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
Masukan Kode Widget Anda Disini
</div>

     3. Letakkan kode anda diantara kode div diatas,


Cara Kedua
      1. Buka Pengaturan, Rancangan, Edit Html. Lalu cari nama widget yang hendak anda jadikan scroll. Misalkan saja disini Archive blog, maka saya akan cari tulisan BlogArchive.

      2. Tambakahan kode CSS berikut ini diatas ]]></b:skin>

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

      3. Usahakan yang berwarna merah harus sama dengan nama widget yang hendak anda jadikan scroll.

Cara Ketiga
      1. Pada Edit html template blogspot, silahkan anda cari widget yang hendak anda berikan scroll. Lalu pada bagian bawah dari kode widget tersebut cari kode div class='widget-content' (agar mudah tekan CTRL+F).

      2. Tambahkan kode style='overflow:auto; height:230px' disamping kode div class='widget-content' Sehingga menjadi

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

Silahkan anda menggunakan cara yang sesuai keinginan anda, kalau saya sendiri pakai yang cara ketiga karena lebih mudah. ok, silahkan coba dan jangan lupa tinggal koment juga.

Posted by Ajang rahmat

Tweet