Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Praktis Membuat Scroller Bar Sidebar Widget BloGGeR BloGSPOT

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

  1. Misalnya akan dibuat scroller bar di widget blog archive.
  2. Login to BloGGeR
  3. Dasboard (Dasbor) : KLIK Layout/Tata Letak atau Design/Rancangan).
  4. Layout/Tata Letak (Design/Rancangan) : KLIK Edit HTML.
  5. 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>
  6. 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).
  7. Bentuk Kode CSS :
  8. #BlogArchive1{
    height:220px;
    overflow:auto;
    }
  9. 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.
  10. Letakkan kode CSS yang telajh dibuat di atas kode ]]></b:skin>. Sehingga susunannya akan seperti ini :
  11. BlogArchive1{
    height:220px;
    overflow:auto;
    }

    ]]></b:skin>
  12. KLIK SAVE Template (Simpan Template), kemudian buka blog (open blog) untuk melihat hasil akhir dan bentuk scrollernya.

Keterangan/Catatan :

  1. Tinggi scroller dapat dirubah sesuai kebutuhan dengan merubah nilai height:220px; pada syntax :
  2. BlogArchive1{
    height:220px;
    overflow:auto;
    }
  3. Apabila dikehendaki untuk membuat scroller bar pada sidebar widget yang lain, maka cara yang digunakan seperti di atas.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

Bila tak pegal di tangan
silahkan tulis sebuah komentar!

gubhug reyot

 
GR | Edited by | gubhug reyot