Kotak ini bisa di scroll kekanan dan kebawah untuk menemukan teks lain yang tersembunyi sehingga bisa menghemat ruangan pada blog kita.
Untuk membuat kotak ini caranya sangat mudah:
1. Buka Blogger. Klik 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 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;">Febrian tkj Blog sederhana tentang tips | trick | blog | game | IT | hal unik | ada disini</div>
Ukuran kotak scrol bisa klian ubah sesuai keinginan! hanya tinggal mengganti angka yang berwarna merah diatas!
Maka hasilnya akan seperti ini:
jika Anda ingin menambahan gambar kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal diatas dengan <img src="alamat url gambar Anda" />
Catatan: Ganti teks biru yang dicetak tebal dengan alamat alamat gambar anda contoh http://photos3.hi5.com/0024/077/102/xKp.DP077102-01.jpg
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://photos3.hi5.com/0024/077/102/xKp.DP077102-01.jpg" /></div>
Ukuran kotak scrol bisa klian ubah sesuai keinginan! hanya tinggal mengganti angka yang berwarna merah diatas!
Maka hasilnya akan seperti ini:
4. Kalau sudah. Klik Save lalu klik View Blog untuk melihat hasil tampilannya **Atau anda pasang scrif seperti ini.
<div style="border: 1px solid #eee; height: 80px; overflow: auto; padding: 10px; width: 100px;">
<a href="http://febrian-tkj.blogspot.com">Tes 1</a>
<br />
<a href="http://febrian-tkj.blogspot.com">Tes 2</a>
<br />
<a href="http://febrian-tkj.blogspot.com">Tes 3</a>
<br />
<a href="http://febrian-tkj.blogspot.com">Tes 4</a>
<br />
<a href="http://febrian-tkj.blogspot.com">Tes 5</a>
<br />
</div>
Maka Hasilnya Akan Seperti ini
Nah selesai juga deh kotak scrol kita!
gampang bukan??
NB: * Untuk Url warna Merah Muda di isi Link Blog anda * Untuk tek 1 dan seteruzzznya...di isi dengan judul artikel bolg
Terima kasih telah membaca artikel tentang CARA MEMBUAT KOTAK SCROLL PADA BLOG di blog febrian tkj blog jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.
