Membuat Fungsi Scroll di Blogspot

Go : Home > Blogger tutorial > Membuat Fungsi Scroll di Blogspot

Membuat Fungsi Scroll di Blogspot

Posted by Abdul Roqib | Saturday, January 30, 2010 24 comments

Pada postingan kali ini saya ingin membahas bagaimana cara membuat fungsi scroll pada elemen halaman. Sederhana saja fungsi scroll ini mempunyai fungsi untuk membatasi lebar dan tinggi sebuah elemen halaman yang telah ditentukan sebelumnya dan juga elemen yang telah di hidden bisa di lihat dengan menggeser scroll barnya. Fungsi scroll pada elemen halaman ini dapat diisi dengan link, ads, blogroll, dsb. Cara pembuatan fungsi scroll pada elemen halaman sendiri ya dibilang cukup mudahlah. Bagaimana cara membuat elemen halaman ber-scroll tersebut?? Yuk langsung saja ke TKP.

Membuat Fungsi Scroll di blogspot ini menggunakan CSS bukan html.
Langkah-langkah membuat sroll di blog:

login di blogger.com
kemudian pilih tata letak
pilih dimana sobat akan meletakkan funsi scroll tersebut
terus klik tambah elemen halaman
copy dan paste kode css di bawah ini
<div style="overflow:auto;width:350px;height:250px;padding:10px;border:1px solid #eee">
Isi elemen halaman
</div>
isi halaman tersebut bisa sobat isi dengan link, ads, blogroll, dsb. Contohnya dengan menggunakan link:
<div style="overflow:auto;width:350px;height:250px;padding:10px;border:1px solid #eee">
<ol>
<li><a href=”http://abdulroqib.blogspot.com”>belajar seo blogspot</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>belajar bisnis online</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>blogger tutorial</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>optimasi seo</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>spesifikasi hp</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>belajar ngeblog</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>abdul roqib</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>optimasi seo</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>free download games</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>free download full software</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>free download mp3</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>tips dan trik blogging</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>belajar CSS</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>belajar HTML</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>seputar komputer</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>belajar nge-hack</a></li>
<li><a href=”http://abdulroqib.blogspot.com”>free download blogger template</a></li>
</ol>
</div>

Maka akan terlihat seperti di bawah ini:
Sedikit penjelasan:
Jika sobat ingin mengganti tinggi dan lebarnya tentunya menyesuaikan template yang sobat gunakan maka tinggal mengubah nilai width dan height. Width itu untuk mengubah lebarnya sedangkan height untuk mengubah tinggi dari fungsi scroll itu sendiri. Misalnya width:350; untuk memperbesar tinggal ganti dengan width:400; atau untuk memperkecil ubah menjadi seperti ini width:300;.
langkah terakhir tekan save/simpan

Selamat mencoba....

24 comments: to "Membuat Fungsi Scroll di Blogspot"

spun money said...: wow nice site dud..
i like it...
your blog really informative.. :)
thanks; February 2, 2010 at 2:25 AM
Rizkyzone said...: kalau aq scrool plus tak spoiler biar irit tempat, contohnya tuh d blog aq; February 4, 2010 at 2:08 AM
Facechan said...: Wah2.. Nice share sob...

aku jg pake kyk gini buat link temen2 aku..; February 4, 2010 at 4:35 AM
cara hack facebook said...: sekali lagi maaf pren baru bisa hadir untuk komen.. list has added..
http://apocalytyo.blogspot.com/2010/01/blog-dofollow-lengkap-2010-terbaru-bag2.html

salam dan sukses selalu..; February 4, 2010 at 7:26 AM
Anonymous said...: Makasih gan !; February 4, 2010 at 7:58 AM
Blog Bisnis Muklis said...: Terimakasih atas tips dan infonya, salam kenal dari BBM, bisa juga pake sistem ul dan li mas, salam sukses selalu; February 4, 2010 at 5:45 PM
akhatam said...: Wah mantep sob..!! btw, link U dah nagkring sob di blogku.. link balik yaw.. Tx; February 4, 2010 at 11:34 PM
akhatam said...: Aku juga follow kamu sob..; February 4, 2010 at 11:35 PM
Dari google untuk anda said...: Waw keren ni infonya thanks uda bagi2 ilmunya.; February 5, 2010 at 12:46 AM
tempat berbagi pengalaman said...: anjrit jago jga yah mas tutorialnya salut deh; February 5, 2010 at 1:52 AM
Ngeposting ni yee said...: tHanks iNfonya sOb,,
lInk kAmu udh nOngKrong dI bLog aq sOb,,
dI tUnGGu bAckLinkNYa ya sOb,,; February 5, 2010 at 2:42 AM
buy colloidal silver said...: This post is interesting and motivated me a lot!! thanks; February 5, 2010 at 2:06 PM
Gildo Kaldorana said...: Halo, terimakasih banyak.
Saya belajar banyak dari blog-blog indonesia.
Salam kenal.; February 6, 2010 at 8:39 AM
dictionary indonesia-english said...: sangat bermanfaat posting di atas. Scroll di atas akan saya implemntasikan untuk link blogroll di blog saya.; February 6, 2010 at 5:42 PM
fakhri said...: Wah boleh juga itu juragan entar tak coba di pasang di web atau blog saya sekali lagi trims buat informasinya; February 11, 2010 at 1:01 AM
jets swimwear said...: I love your blog, just added it to my bookmarks list and subscribed in a reader.; February 15, 2010 at 3:12 AM
Festival Museum Nusantara said...: mantabs, makasih tipsnya; March 10, 2010 at 11:00 PM
blogger dan bisnis internet said...: Makasih gan, kebetulan lg cari2x nih yang kayak gini, mampir di blog aku jg kebetulan blogku baru aku bongkar habis2x nih jd ilang dari serp, itung nambah trafick, oh ia commen juga yah.!; March 26, 2010 at 11:08 AM
sulap said...: nice info nh.
thanks ya bos..; November 22, 2010 at 6:00 PM
serverb said...: thanks yaw gan
keren banged
sudah saya coba dan hasilnya sangat membantu
bkin blog saya lebih rapi dan ringkas; January 3, 2011 at 8:48 PM
Unknown said...: wah... bagus bro, saya pakai di blog saya ya...
membantu banget...; January 12, 2011 at 11:30 PM
bung said...: terima kasih sahabat,,info yang sangat bermanfaat :D; March 23, 2011 at 8:04 AM
solusi mengobati hiv/aids said...: posting yang keren dan membantu,,,,langsung aza dicoba,,,makasih banyak,,,; April 18, 2011 at 8:11 PM
obat tradisional tumor lambung said...: mantap sekali infonya,,,moga bermanfaat buat smuanya,,,,
ditunggu share selanjutnya,,,sukses slalu,,; April 18, 2011 at 8:13 PM