Selasa, 01 Januari 2013

0 CARA MEMBUAT KOTAK SCROLL DI BLOG


Sebelum saya tidur saya ingin share sedikit ilmu basi ini, yang khususkan untuk para Newbie seperti saya ini. Yaitu Cara membuat Kotak Scroll di BlogKotak scroll disini bisa di buat di dalam postingan maupun di widget blog IT Loverz semua.
IT Loverz  pasti sudah tau donk kegunaan dari Kotak Scroll ini ?

Kotak ini bisa di scroll kekanan dan kebawah untuk menemukan teks lain yang tersembunyi sehingga bisa menghemat ruangan pada blog IT Loverz.
Gak usah lama-lama kita mulai saja tutorial sederhana kali ini.


1. Buka BloggerKlik menu Design -> Page Elements
2. Klik Add a Gadget lalu klik HTML/Javascript

3. Masukkan kode yang dibawah ini:
<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Tambahkan teks atau kode script disini</div>
Jika IT Loverz ingin menambahkan teks kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal dengan teks yang ingin IT Loverz tampilkan.

Sebagai contoh, saya memasukkan:
<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog</div>
Maka hasilnya akan seperti ini:
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog


Jika IT Loverz ingin menambahan gambar kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal diatas dengan <img src="alamat url gambar IT Loverz" />

Catatan:
Ganti teks biru yang dicetak tebal dengan alamat alamat gambar IT Loverz contohhttp://4.bp.blogspot.com/-pGTjEx7tDzA/UJn_GMwaq-I/AAAAAAAAAng/PQtcgLiFpoo/s1600/NH+SAYAP.png 


Sebagai contoh saya memasukkan:

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 300px; height: 80px; background-color: rgb(255, 255, 255);"><img src="http://4.bp.blogspot.com/-pGTjEx7tDzA/UJn_GMwaq-I/AAAAAAAAAng/PQtcgLiFpoo/s1600/NH+SAYAP.png " /></div>

Maka hasilnya akan seperti ini:


4. Kalau sudah. Klik Save lalu klik View Blog untuk melihat hasil tampilannya

=========================== 
Semoga bermanfaat

0 Comments

Bagaimana Pendapat Anda ?