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:

  1. login di blogger.com
  2. kemudian pilih tata letak
  3. pilih dimana sobat akan meletakkan funsi scroll tersebut
  4. terus klik tambah elemen halaman
  5. 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>
  6. 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;.
  7. 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

Rizkyzone said...

kalau aq scrool plus tak spoiler biar irit tempat, contohnya tuh d blog aq

Facechan said...

Wah2.. Nice share sob...

aku jg pake kyk gini buat link temen2 aku..

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

Anonymous said...

Makasih gan !

Blog Bisnis Muklis said...

Terimakasih atas tips dan infonya, salam kenal dari BBM, bisa juga pake sistem ul dan li mas, salam sukses selalu

akhatam said...

Wah mantep sob..!! btw, link U dah nagkring sob di blogku.. link balik yaw.. Tx

akhatam said...

Aku juga follow kamu sob..

Dari google untuk anda said...

Waw keren ni infonya thanks uda bagi2 ilmunya.

tempat berbagi pengalaman said...

anjrit jago jga yah mas tutorialnya salut deh

Ngeposting ni yee said...

tHanks iNfonya sOb,,
lInk kAmu udh nOngKrong dI bLog aq sOb,,
dI tUnGGu bAckLinkNYa ya sOb,,

buy colloidal silver said...

This post is interesting and motivated me a lot!! thanks

Gildo Kaldorana said...

Halo, terimakasih banyak.
Saya belajar banyak dari blog-blog indonesia.
Salam kenal.

dictionary indonesia-english said...

sangat bermanfaat posting di atas. Scroll di atas akan saya implemntasikan untuk link blogroll di blog saya.

fakhri said...

Wah boleh juga itu juragan entar tak coba di pasang di web atau blog saya sekali lagi trims buat informasinya

jets swimwear said...

I love your blog, just added it to my bookmarks list and subscribed in a reader.

Festival Museum Nusantara said...

mantabs, makasih tipsnya

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

sulap said...

nice info nh.
thanks ya bos..

serverb said...

thanks yaw gan
keren banged
sudah saya coba dan hasilnya sangat membantu
bkin blog saya lebih rapi dan ringkas

Unknown said...

wah... bagus bro, saya pakai di blog saya ya...
membantu banget...

bung said...

terima kasih sahabat,,info yang sangat bermanfaat :D

solusi mengobati hiv/aids said...

posting yang keren dan membantu,,,,langsung aza dicoba,,,makasih banyak,,,

obat tradisional tumor lambung said...

mantap sekali infonya,,,moga bermanfaat buat smuanya,,,,
ditunggu share selanjutnya,,,sukses slalu,,

Post a Comment

What's your comment about Membuat Fungsi Scroll di Blogspot, type in the comment form below. Please Don't Spam.!!!