.jpg)
Ada dua kemungkinan yang mungkin kita lakukan terhadap scroller bar widget. Yang pertama adalah membuat scroller untuk keseluruhan widget dalam sekali kerja, dan yang kedua dengan membuat scroller bar tersendiri di masing-masing widget yang kita gunakan. Kalau dengan cara pertama, bewgitu kode CSS kita simpan dalam template, maka secara semua widget akan terwadahi dalam sebuah box yang diperlengkapi dengan scroller (semua scroller bar akan seragam bentuk dan ukurannya) sedang apabila kita menggunakan cara kedua, maka setiap widget akan bisa diatur seberapa tinggi yang dibutuhkan. Menilik dari bervariasinya widget dan penting tidaknya sebuah widget dipasang scroller, maka menurut saya cara kedua merupakan pilihan yang paling tepat. Meskipun demikian, semua bergantung kepada sampeyan sendiri, karena setiap blogger tentunya mempunyai pertimbangan yang berbeda. Di bawah ini adalah cara paling praktis untuk membuat scroller bar di widget BloGGeR atau BlogSPOT.
Membuat Scroller Bar Langsung di Semua Sidebar Widget (Scrollbar in All Sidebar Widgets)
Kode CSS yang digunakan :
.sidebar .widget{
height:220px;
overflow:auto;
}Letakkan kode CSS ini di atas kode ]]></b:skin>Membuat Scroller Bar per Sidebar Widget (Scrollbar in Widgets of One Sidebar)
Kode CSS yang digunakan :
#Widget-Name (id widget){
height:220px;
overflow:auto;
}Contoh (Example) :
#BlogArchive1{
height:220px;
overflow:auto;
}Simpan kode ini di atas kode ]]></b:skin>.Contoh yang langsung di ambil dari template
- Misalnya akan dibuat scroller bar di widget blog archive.
- Login to BloGGeR
- Dasboard (Dasbor) : KLIK Layout/Tata Letak atau Design/Rancangan).
- Layout/Tata Letak (Design/Rancangan) : KLIK Edit HTML.
- Coba sampeyan Cari (Find) kode HTMl
<b:section class='sidebar' id='sidebar'.
Di bawah kode ini akan ditemukan beberapa kode HTML yang lain seperti di bawah ini :<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='HTML1' locked='false' title='Sobat Ngeblogh' type='HTML'/>
</b:section> - Buat kode CSS berdasarkan kode HTML Blog Archive seperti yang terlihat di atas. Karena yang akan kita buat scroller box untuk blog archive, maka yang kita ambil adalah kode yang berwarna orange (BlogArchive1).
- Bentuk Kode CSS :
- Selanjutnya cari kode ]]></b:skin> (Letaknya di atas kode (tag) <body>. Biar lebih mudah Tekan Ctrl+F (pada keyboard) secara bersamaan, kemudian cari kode di atas.
- Letakkan kode CSS yang telajh dibuat di atas kode ]]></b:skin>. Sehingga susunannya akan seperti ini :
- KLIK SAVE Template (Simpan Template), kemudian buka blog (open blog) untuk melihat hasil akhir dan bentuk scrollernya.
#BlogArchive1{
height:220px;
overflow:auto;
}
BlogArchive1{
height:220px;
overflow:auto;
}
]]></b:skin>Keterangan/Catatan :
- Tinggi scroller dapat dirubah sesuai kebutuhan dengan merubah nilai height:220px; pada syntax :
- Apabila dikehendaki untuk membuat scroller bar pada sidebar widget yang lain, maka cara yang digunakan seperti di atas.
BlogArchive1{
height:220px;
overflow:auto;
}
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
» Happy Blogging - gubhugreyot «
Masih bingung? Kami berikan contoh kepada anda. Apabila bandar memegang kartu 0/6 dan mejaqq and hondaqq player 4/5 maka bandar dianggap sebagai pemenang
BalasHapus