Cara Membuat Scroll Pada Widget

Cara Membuat Scroll Pada Widget

Cara Membuat Scroll Pada Widget

Cara Membuat Scroll Pada Widget, Sebenarnya postingan ini menjawab atas pertanyaan dari Sahabat yang ingin mengetahui cara membuat scroll pada widget di sidebar . Entah widget dari bawaan blogspot  misal widget Blog Archive, widget Label atau widget dari pihak ketiga misal Feedjit, flagcaounter, dan lain-lain. Dengan cara di scroll pastinya akan lebih menghemat tempat dan widget tidak terlalu memanjang kebawah. Widget Blog  akan tampak tertara lebih rapi. Mari kita simak cara membuatnya :

Cara membuat scroll widget dari  Blogspot :
  • Klik Desain
  • Klik Template
  • Klik Edit HTML
  • Kemudian Pastekan Kode dibawah ini di atas kode ]]>
#BlogArchive1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}
  • Klik Simpan.

Catatan :
height:200px; silahkan atur sesuai dengan selera.
Itu adalah wideget Blog Archive yang akan kita buat scroll , Bagaimana jika widget Blogpspot yang lainnya. Cukup mengganti Kode BlogArchive1, dengan nama widget lain yang akan dibuat scroll, misal : label.

Masuk ke dalam edit HTML template, Cari kode yang akan kita buat scroll, biasanya ada di paling bawah halaman template.
Perhatikan warna yang saya beri tanda merah.
<b:widget id='Followers1' locked='false' title='♥♥ Sahabat ♥♥' type='Followers'/>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
<b:widget id='HTML5' locked='false' title='Statistik Blog Ini' type='HTML'/>
Kode warna merahlah yang kita sematkan atau digunakan.
Jadi jika label yang akan di buat scrol kodenya menjadi :
#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}
Cara Membuat Scroll Widget dari pihak ketiga :

Cara ini sangat  gampang dan mudah sekali ,karena tidak harus masuk ke edit template. Cukup dengan menambahkan kode widget yang akan dibuat scroll.
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #eee;">

Kode yang akan dibuat scroll
</div>
width : ukuran lebar kota 100% akan secara otomatis mengikuti lebar sidebar.
height : ukuran panjang kotak kebawah
solid     #eee :warna garis luarnya

Misal kode widget feedjit :
  • Klik Desain
  • Klik Tata Letak
  • Cari Feedjit
  • Tambahkan atau sisipkan kode diatas, misal nya :
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #eee;">

Kode Feedjit
</div>
  • Klik Simpan dan lihat hasilnya.


Cukup sekian, semoga bisa memahami dan  bermanfaat bagi sahabat 
Post a Comment