Membuat Fungsi Scroll di Blogspot

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

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read Comments