Home
Tukaran Link
Pasang Iklan
Contact Me
Cara Membuat Kotak Scrollbar
Scrollbar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi. Mungkin anda pernah melihat blog yang penuh dengan isinya yang sangat panjang sehingga memperlambat loading blog tersebut. Supaya blog anda tidak seperti itu, di tips kali ini saya akan menjelaskan cara menghilangkan sesak tersebut dengan membuat scrollbar. Dengan begitu kita bisa menghemat pamakaian ruang blog. Mau tau caranya?
Berikut kode untuk membuat scrollbar:
<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 80px; height: 80px; background-color: rgb(255, 255, 255);">Masukkan teks atau kode anda disini</div>
Contoh:
<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 80px; height: 80px; background-color: rgb(255, 255, 255);">Scrollbar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi.</div>
Hasilnya:
Anda dapat mengatur lebar dan tinggi scrollbar tersebut dengan merubah nilai pada width:80px; height:80px;.
Gimana? Sangat mudahkan?
Selamat mencoba…
Jangan lupa kasih komentar ya…
Bagikan Artikel Ini!
:))
:)]
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
x(
=))
26 komentar:
mau tanya mas..
kalau mau bikin recent posts tp dalam kotak scrollbar gmn mas caranya?
Ok, caranya cukup simple karena ini hanya trik dasar ilmu html...
Sebelumnya, jika kamu ingin pakai scrollbar, saya sarankan kamu untuk pakai widget recent posts dengan 10 artikel. Silahkan baca disini.
Kalau sudah, ada sedikit kode yang musti kamu tambahin, yaitu:
<div style="height:250px;overflow:auto">
<!-- GANTI KODE INI DENGAN KODE RECENT POSTS 10 ARTIKEL -->
</div>
height:250px >> tinggi kotak scrollbar
Selamat mencoba...
mau tanya sobat....
kalau mau bikin kotak scrollbar dimana didalamnya ada banyak sekali banner-banner blog sahabat kita supaya tampak rapi dalam satu kotak saja ,gmn mas caranya?punya saya tampak amburadul...maklum pemula sobat..mohon bantuannya.saya tunggu jawabannya sobat.thanx.
@Qmunyti:
Thanks atas pertanyaannya.
Caranya cukup simpel, kamu tinggal memasukkan kode banner ke dalam kode scrollbar, misalnya:
<div align="center" style="width:200; height:100; overflow:auto; padding:10px">
<img src="url-banner-1" border="0"/> <br />
<img src="url-banner-2" border="0"/> <br />
<img src="url-banner-3" border="0"/> <br />
<img src="url-banner-4" border="0"/> <br />
<img src="url-banner-5" border="0"/> <br />
</div>
ket:
- width:200 = lebar kotak adalah 200 pixel
- height:100 = tinggi kotak adalah 100 pixel
- align="center" = perataan isi dibagian tengah
- padding:10px" = garis tepi sebesar 10 pixel
Fungsi dari tag <br /> adalah sebagai pembuat baris baru. Tag tersebut bisa kamu ganti dengan menambahkan style="margin:..." ke dalam tag img, misalnya:
<img style="margin-top:10px" src="url-banner-1" border="0"/>
margin-top = jarak gambar dari atas dalah sejauh 10 pixel. Kamu bisa menggantinya dengan margin-bottom = jarak gambar dari bawah dalah sejauh 10 pixel.
mantap ;)
caranya tampilin kode html di dlm crollbarnya gimana bang??? misal mau buat tukar link?
nice info hehhehe....soalnya aku lupa
mas klo biar fredjitxa didalem scrolbar gmna? sekalian mw tuker link ya mas, udah nangkring tuh diblog saya
makasih tutorialnya gan..sekalian numpang lapak buat blog baru ane yach..
Home | Tips n Trik Blog | Antena Tempel | Kirim SMS Gratis | Foto Bugil | Video Bokep
thanks gan script'a..bisa bantu saya.. :D
Bagus infonya gan... Tukeran banner yuk gan. di tunggu informasinya !!
by http://collection27.blogspot.com/
trims inponya sob,, sudah saya praktekkan di
http://www.rezapa.co.cc/2010/11/tukeran-link-link-exchange.html
salam kenal,,
thanks browwwwwwwwwwwwwwwwwwwwwww
nice info .. :)
thanks..
visit, follow, and comment my blog
http://colourfulvin.blogspot.com/
extraordinary arts here! :)
enjoy!
wah makasih gan, sangat berguna scriptnya gan ,, nice share :D
thanks banget tips nya gan... sangat bermanfaat...
gan, ini ditulis di Html/Javascript atau langsung di blog post nya aja ?
petunjuk nya mana ea. gak ada petunjuk woi . tolong buat tutorial nya ken jelas
Surya
"caranya tampilin kode html di dlm crollbarnya gimana bang??? misal mau buat tukar link?"
Replay"
gampang gan tinggal kita parse htmlnya terus hasil parsenya kita masukkan ke kode dari scrollbar tsb...
alamat parse html disiniParse Html
Pencerahan yang luar biasa buat saya yang newbie di blogspot...salam kenal bang...terimaksih.........
nice infonya :)) tolong mampir di blog saya http://apwsite.blogspot.com ;;)
gan mau tanya sekalian, dari tadi siang saya nyoba2 masukin emoticon smiley di kotak komentar seperti yang ada di kotak komentar agan. terus saya coba berkomentar sendiri di blog saya, tetapi sama saja tetap tidak muncul emote tersebut contohnya saya mengetik seperti ini " :)) "
tetapi tidak muncul emotenya pada komentar yang baru saja saya komentari di atas. tolong pencerahannya
Wah bagus infonya,, Thank's om
Nice Info Om
Terima kasih gan tutorialnya. dengan tutorial ini, blog saya semakin rapi ..
Trims sob. ane ngarti sekarang. alhamdulillah 1 dari seratus masalah di project ane terselesaikan. info ente amat membantu. ^-^
mantap dah artikelnya
http://acemaxs31.com/obat-nyeri-haid-herbal/