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:
   
   
   
   1. belajar seo blogspot
   
   
   2. belajar bisnis online
   
   
   3. blogger tutorial
   
   
   4. optimasi seo
   
   
   5. spesifikasi hp
   
   
   6. belajar ngeblog
   
   
   7. abdul roqib
   
   
   8. optimasi seo
   
   
   9. free download games
   
   
   10. free download full software
   
   
   11. free download mp3
   
   
   12. tips dan trik blogging
   
   
   13. belajar CSS
   
   
   14. belajar HTML
   
   
   15. seputar komputer
   
   
   16. belajar nge-hack
   
   
   17. free download blogger template
   
   

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