Membuat Kotak Scroll bar Pada Blogspot

Hallo para blogger…….

Postingan Panduan Belajar blog kali ini adalah mengenai Pembuatan Kotak Scrollbar pada Blogspot/Blogger. Saya tergerak untuk membuat artikel ini sambil membagikan ilmu yang saya dapat, terutama saat mengubah kode HTML untuk Banner Exchange di Blog saya (sangat berantakan kelihatannya). Kini saya membuat kotak/bingkai supaya lebih enak dipandang.

Bingkai/Kotak ini bisa anda gulung kekanan atau kebawah untuk menemukan teks lain yang tersembunyi sehingga juga bisa menghemat ruangan pada blog kita.

Untuk membuat kotak ini caranya sangat mudah:

1. Buka Blogger anda, lalu Klik menu Layout -> Page Elements

2. Klik Add a Gadget. Lalu klik tombol + pada HTML/Javascript

3. Masukkan kode dibawah ini:

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Masukkan teks atau kode script disini</div>

Jika Anda ingin menambahkan teks kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal dengan teks yang ingin Anda 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;">Bingkai atau kotak ini adalah sebuah penampilan yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog anda</div>

Maka hasilnya akan seperti ini :

Bingkai atau kotak ini adalah sebuah penampilan yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog anda

Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog

Jika Anda misal ingin menambahkan gambar kedalam kotak scrollbar, maka gantilah tulisan yang dicetak tebal diatas dengan <img src="alamat url gambar Anda" />

Sebagai contoh saya memasukkan kode ini :

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;"><img src="http://i576.photobucket.com/albums/ss209/kwangkxz/tentangkomputerinternet-1.gif" /></div>

Maka hasilnya akan seperti ini :

4. Bila sudah anda lakukan, Klik Save lalu klik View Blog untuk melihat hasil hasilnya.

Selamat Mencoba..!!

Menarik bukan ?

Oke sampai disini dulu pembahasannya mengenai Belajar Blog dengan Kotak scrollbar, bila ada kesulitan jangan sungkan untuk ditanyakan di kolom komentar.

Terimakasih.