Cara Membuat Kotak Scrollbar Pada Blogger

Posted by Herman on Monday, November 24, 2008 31 comments

Sebelumnya saya pernah memposting mengenai cara membuat marquee atau teks berjalan untuk menghemat ruangan. Sebenarnya masih ada cara lain untuk melakukannya yaitu dengan cara membuat kotak Scrollbar.

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;">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 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://lh4.ggpht.com/_15FopxVONSo/SSlTogZcU-I/AAAAAAAAA18/EqRgvye_cNU/herman%20blog%20headline%20v6.gif


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://lh4.ggpht.com/_15FopxVONSo/SSlTogZcU-I/AAAAAAAAA18/EqRgvye_cNU/s400/herman%20blog%20headline%20v6.gif" /></div>

Maka hasilnya akan seperti ini:


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

Selamat Mencoba..!!


Recent Posts:

31 comments

yannti-basuki said... 03 July, 2009
tengs masnya uda share inponya... sungguh bermanfaat.... ;)
Program Diklat KKPI said... 06 August, 2009
saya sudah membuat daftar isi, tapi topik daftar isi berada di samping tanpa backron, bagaimana caranya, agar seperti blog bang herman
Download Gratisan said... 10 January, 2010
asli mas, aku nyari2 ini tapi ga tau namanya..eh ktmu dsini, makasih mas..
Diponegoro Adventure said... 14 January, 2010
Terima kasih ilmunya kang,, langsung kucoba
Berita Bekas said... 31 October, 2010
ijin untuk copas buat directory blog saya mas

Berita Bekas
Donny Kurniawan said... 26 November, 2010
Trims mas buat tutorialnya....
kunjungi http://adonia-cell.co.nr
gRandonkz community said... 31 December, 2010
okkkk gan,,,,thanx infonya,,,
maen ke pat ane gan,,trus tinggalin jejak nya ,,hehehe..
danie.ayank said... 23 January, 2011
gan... skrg script di aas udh gag bisa lagi knpa ea
La Tahdzan said... 06 February, 2011
Thanks bro buat infonya.
Nice info..
HESITANCY said... 17 March, 2011
ilmu yang sangat bermanfaat...bs share ilmunya untuk promosi blog dngn mudah...????
Pintar bersama said... 16 May, 2011
thank's ya artikelnya ini, sangat bermanfaat
CENTER EDUCATION said... 27 June, 2011
sangat membantu bagi saya yang full gaptek tararengkyu
Emha kirom said... 11 October, 2011
makasih membantu sangat...
:)] http://faidlulhikmah.wordpress.com/
Akhsa Nant said... 30 November, 2011
nice info kaka..bisa dicoba ini...

:)] http://akhsanant.blogspot.com/
™GASTIVIVES Corp.™ said... 04 January, 2012
nice info gan :D
jangan lupa kunjungi balik ya :D

http://gastivives.blogspot.com/2012/01/diskusi-blogger-pemula.html
Nizwa Ayuni said... 26 January, 2012
nice share^^ salam kenal semuaa :)
gjness said... 04 February, 2012
Kalo pengen ngisi scroll bar sama content website lain, gimana ya?
Andika Priyanto said... 24 May, 2012
makasihnya mas ini dah saya terapkan di blog saya. oya boleh saya simpan link halaman blog anda di komputer, ya agar saya bisa berkunjung kembali kesini
Mitra Penerjemah said... 09 June, 2012
penerjemah bahasa mandarin said: oke sob menu scrollnya, btw low untuk yg 2 kolom atau lebih bagaimana ya sob caranya...???salam sukses selalu.thanks :)]
Mahasiswa Songong said... 30 June, 2012
wahh mantep sekali ini...
makasih..
tik tok said... 30 June, 2012
Bermanfaat sekali sharenya Kang...makasih ya
Riefky Sucahyo said... 03 July, 2012
@Mitra Penerjemah buka aja link ini disana kamu bakal nemui cara yang kamu butuhkan

http://blogriefs.blogspot.com/2012/07/cara-membuat-box-scroll-dengan-beberapa.html b-( b-(
Marisi ButarButar said... 09 July, 2012
nice info gan.. singgah di blog ane juga ya gan..
Blogger Fans Page
A.N.K. said... 21 July, 2012
bagus gan, kunjungi blog ane www.ankurniawan.blogspot.com
azis said... 13 August, 2012
Nice info Gan, sudah diterapkan di web ane http://temanbelajar.net84.net
Mahasiswa Songong said... 29 August, 2012
jempol
Sii Diekaa said... 21 October, 2012
mantappp...

:)] http://corattcorettt.blogspot.com/
edmund tohir said... 06 November, 2012
thanks udh di pasang back link nyA. :D
celana cingkrang said... 09 December, 2012
oke gan
laksanakan
fazaw said... 22 February, 2013
makasih atas infonya, di coba dulu untuk postingan blog !
everyth1ng said... 22 February, 2013
mantap mas infonya, izin nyoba !

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment