Cara membuat kotak scrollbar blog | Dhita Prianthara Blog Cara membuat kotak scrollbar blog | Dhita Prianthara Blog| software | games | download | PS1 | Free

26 December 2010

Cara membuat kotak scrollbar blog

membuat kotak scroll blogSaya mungkin juga baru belajar ngeblog, jadi apa yang sudah saya tahu akan saya posting juga, disamping buat pengingat mungkin biar kalo otak-atik blog gk usah cari tutorial di rumah tetengga he he he...tapi jika kamu belum tahu juga, ni aku cuma mau share aja tentang cara membuat kotak scrollbar pada blog.
Untuk membuat kotak ini caranya sangat mudah:




1. Buka Blogger.
2. Klik menu Layout -> Page Elements
3. Klik Add a Gadget.
4. Lalu klik tombol + pada HTML/Javascript
5. Masukkan kode yang dibawah ini:

Klik show untuk melihat code.....
<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 Anda ingin menambahkan teks kedalam kotak scrollbar maka ganti tulisan 'Tambahkan teks atau kode script disini' dengan teks yang ingin Anda tampilkan.

Sebagai contoh, saya memasukkan:
Klik show...
<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 Anda ingin menambahan gambar kedalam kotak scrollbar maka ganti tulisan 'Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog' dengan <img src="alamat url gambar Anda" />

Sebagai contoh saya memasukkan:
Klik show,,,,


<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://i415.photobucket.com/albums/pp237/jupmerput/honden5.gif" /></div>
maka hasilnya akan seperti ini:



selamat mencoba!



Artikel Terkait:

1 comments:

Blog 'Jujur', suer..... said...

blognya 'meriah' juga ya,hehe..

Post a Comment

Silahkan beri komentar sobat di bawah ini!
Komentar sobat akan sangat bermanfaat bagi kemajuan blog ini! :D Jangan lupa follow blog ini juga ;)
Mohon untuk tidak menggunakan nama ANONIM!
No SPAM !!!

Template by : dhitaprianthara Copyright@2012