Photobucket
English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Cara membuat Scroll Di Blog


Kata scroll memang sudah tidak asing bagi anda. Yang namanya scroll adalah sesuatu yanh dapat ditarik ke atas dan ke bawah. Sebagai contohnya antara lain lihatlah sebelah kanan layar anda saat ini. Sesuatu yang berbentu persegi panjang dan ada tanda panah di atas dan dibawahnya itulah yang bernama scroll. Scroll memang dibagi menjadi 2, yaitu scroll vertikal dan scroll horizontal.

Kali ini saya akan memanfaatkan scroll vertikal untuk menghemat tempat di blog. scroll vertikal adalah scroll yang menggulung dari atas ke bawah. caranya dengat membuat scroll pada label,blog arsip atau widget lainnya yang mempunyai bentuk memanjang ke bawah. Hal ini pasti akan menghemat tempat di blog kita. Bagi anda yang belum mengetahui caranya, ikuti saja tutorial di bawah ini.

Langkah-langkah :
1.      Seperti biasanya, login ke account blogger anda dulu.

2.      Lalu anda akan masuk ke menu Dashboard / Dasbor, dari situ langsung saja menuju ke menu Design / Rancangan. Kemudian, masuklah ke menu Edit HTML.


3. Sebelum anda dapat membuat scroll pada widget, anda harus mencari ID dari widget tersebut.


4. Di bawah ini hanya contoh ID dasar widget, tapi tidak selalu sama dengan ID widget di blog anda.


A. Widget Label = Label1 ; Label2 ; Label3 ; dan seterusnya
<b:widget id='Label1' locked='false' title='Kategori' type='Label'/>

B. Widget Blog Arsip = BlogArchive1 ; BlogArchive2 ; BlogArchive3 ; dan seterusnya
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>

C. Widget Profil Blogger = Profile1 ; Profile2 ; Profile3 ; dan seterusnya
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>

dan masih banyak lagi . . .

5. Sebagai contoh, saya akan membuat scroll pada widget Label.

6. Cari kode ]]></b:skin> dengan menggunakan Ctrl + F



7. Kemudian, letakkan kode berikut di atas kode ]]></b:skin>
#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

Apa yang perlu diperhatikan :
  • Label1 adalah ID dari widget label. Ganti dengan ID widget yang ingin anda buat scroll


  • height:200px; adalah tinggi dari widget scroll. Ganti dengan tinggi widget scroll yang anda inginkan



8. Susunan lengkapnya akan menjadi seperti di bawah ini

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

]]></b:skin>


 oke jadi deh ^^ Smoga Berhasil ya