.gif)
Postingan mas nur 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:300px; height:40px; 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:300px; height:40px; 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 dicontohkan nuryantosaja.blogspot.com</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 dicontohkan nuryantosaja.blogspot.com
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:400px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;"><img src="http://img8.imageshack.us/img8/7633/cooltext4355589421.gif" /></div>
Maka hasilnya akan seperti ini :
4. Bila sudah anda lakukan, tinggal edit WIDTH dan HEIGHT sesuai tempat kita kemudian Klik Save lalu klik View Blog untuk melihat hasil hasilnya.
Selamat Mencoba..!!
0 komentar:
Posting Komentar