TopBottom

Blog Tutorial

About Me

Add your donation here for a better of our service. Thanks!

Berlangganan

Anda Suka Tips Blogger Zacky?
Temukan Kami Di:
Ingin Dapat Artikel Terbaru?
rss Klik disini untuk berlangganan melalui RSS atau terima artikel di email anda dengan cara mengisi form berikut:

Cara Membuat Kotak Scrollbar

Original by IFX Adrian | 01 Desember 2009 26 Comments

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:

Scrollbar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi.


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…

Label: ,

Bagikan Artikel Ini!

<a href="http://instaforex.com/forexcopy_system.php?x=DVXF">InstaForex</a>
Facebook Delicious Digg! Twitter Linkedin StumbleUpon Lintas Berita
Technorati Google Bookmarks Mixx Yahoo! Newsvine Reddit

Artikel Lain Yang Mungkin Anda Baca

26 komentar:

Alfaruqy 3 Februari 2010 22.06  

mau tanya mas..
kalau mau bikin recent posts tp dalam kotak scrollbar gmn mas caranya?

Zacky Adrishayuni 3 Februari 2010 22.49  

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...

Qmunyti mobile by cup3zz 1 Maret 2010 23.07  

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.

Zacky Adrishayuni 2 Maret 2010 00.22  

@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.

surya suremaker 28 April 2010 08.20  

caranya tampilin kode html di dlm crollbarnya gimana bang??? misal mau buat tukar link?

chaironi 22 Juni 2010 23.54  

nice info hehhehe....soalnya aku lupa

baban 17 September 2010 16.40  

mas klo biar fredjitxa didalem scrolbar gmna? sekalian mw tuker link ya mas, udah nangkring tuh diblog saya

Bagus 12 Desember 2010 23.41  

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

afly_wida 1 Februari 2011 13.41  

thanks gan script'a..bisa bantu saya.. :D

Ary_Putra 12 Maret 2011 11.32  

Bagus infonya gan... Tukeran banner yuk gan. di tunggu informasinya !!

by http://collection27.blogspot.com/

rezaprama 23 April 2011 10.29  

trims inponya sob,, sudah saya praktekkan di

http://www.rezapa.co.cc/2010/11/tukeran-link-link-exchange.html

salam kenal,,

star cyber99 26 April 2011 11.11  

thanks browwwwwwwwwwwwwwwwwwwwwww

♥♥ It's vin ♥♥ 27 April 2011 18.29  

nice info .. :)

thanks..

visit, follow, and comment my blog

http://colourfulvin.blogspot.com/

extraordinary arts here! :)

enjoy!

Anonim 18 September 2011 19.16  

wah makasih gan, sangat berguna scriptnya gan ,, nice share :D

awam 24 September 2011 12.17  

thanks banget tips nya gan... sangat bermanfaat...

Alvin Seville 14 Oktober 2011 11.35  

gan, ini ditulis di Html/Javascript atau langsung di blog post nya aja ?

Josua Fernando 25 Oktober 2011 17.44  

petunjuk nya mana ea. gak ada petunjuk woi . tolong buat tutorial nya ken jelas

star cyber99 27 Oktober 2011 15.21  

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

Bintang Antik Sejahtera 6 Desember 2011 23.27  

Pencerahan yang luar biasa buat saya yang newbie di blogspot...salam kenal bang...terimaksih.........

apw 18 Januari 2012 20.55  

nice infonya :)) tolong mampir di blog saya http://apwsite.blogspot.com ;;)

apw 18 Januari 2012 21.02  

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

Ai Eti 8 Februari 2012 01.51  

Wah bagus infonya,, Thank's om
Nice Info Om

Pendekar Terminal 12 September 2012 04.35  

Terima kasih gan tutorialnya. dengan tutorial ini, blog saya semakin rapi ..

supratikno aji 25 Juni 2013 00.27  

Trims sob. ane ngarti sekarang. alhamdulillah 1 dari seratus masalah di project ane terselesaikan. info ente amat membantu. ^-^

obat nyeri haid 20 Januari 2015 07.09  

mantap dah artikelnya
http://acemaxs31.com/obat-nyeri-haid-herbal/

Posting Komentar