Lano Blog

Cara Membuat Elemen Halaman Mempunyai Fungsi Scroll

U
ntuk melihat demonya anda bisa melihat dibagian atas blog saya ini.Cara Membuat Elemen Halaman Mempunyai Fungsi Scroll sangatlah mudah.anda tidak harus membuat kode HTML yans sangat banyak,melainkan hanya sedikit kode untuk membuatnya.berikut cara membuat elemen halaman mempunyai fungsi scroll.
1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Elemen Laman > Tambah Gadget.

3. Pilih HTML/JavaScript.

4. Copy dan paste kode di bawah ini di kolom Konten.


<div style="overflow:auto;width:autopx;height:200px;padding:5px;border:1px solid #e6e4e3;">
Isi Halaman / Kode Script Anda.
</div>
  • overflow:auto;  kode ini agar tercipta scrolling atau penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
  • height:200 adalah tinggi halaman elemen.anda bisa ganti dengan ukuran sidbar blog anda.
  • padding:5px; »  adalah kode pembuat jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px;
  • border adalah style dot dengan ketebalan 1 piksel dan berwarna #e6e4e3;. Silakan diubah sesuai keinginan Sobat.
  • solid adalah kode border tersebut anda dapat menggantinya dengan kode border anda bila belum ada border anda bisa pergi ke sini
Contoh:


<div style="overflow:auto;width:autopx;height:200px;padding:5px;border:1px solid #e6e4e3;">
<ol>
<li><span><span style="font-size: 14px; background-color: rgb(255, 255, 255);"><a href="http://lanoblog.blogspot.com/2011/09/cara-memasang-tombol-back-to-top-pada.html">Cara Memasang Tombol 'Back to Top' pada Blog</a></span></span></li><li><span><span style="font-size: 14px; background-color: rgb(255, 255, 255);"><a href="http://lanoblog.blogspot.com/2011/09/cara-memasang-tombol-share-dibawah.html">Cara Memasang Tombol Share DiBawah Postingan</a></span></span></li><li><a href="http://lanoblog.blogspot.com/2011/09/cara-memasang-widget-tombol-follow-me.html" style="font-size: 14px; background-color: rgb(255, 255, 255); ">Cara Memasang Widget Tombol Follow Me Twitter</a></li><span><span style="font-size: 14px; background-color: rgb(255, 255, 255);"><li><span><span style="font-size: 14px; background-color: rgb(255, 255, 255);"><a href="http://lanoblog.blogspot.com/2011/09/cara-menghilangkan-icon-obeng-dan-tang.html">Cara Menghilangkan Icon Obeng dan Tang pada Blogger</a></span></span></li><li><a href="http://lanoblog.blogspot.com/2011/09/menghilangkan-icon-sampah-pada-kotak.html">Cara Menghilangkan Icon Sampah Pada Kotak Komentar</a></li><li><span style="font-size: 14px; background-color: rgb(255, 255, 255); "><a href="http://lanoblog.blogspot.com/2011/09/cara-menghilangkan-diposkan-oleh-waktu.html">Cara Menghilangkan Diposkan oleh , Waktu Posting , Serta Label</a></span></li><li><a href="http://lanoblog.blogspot.com/2011/09/cara-menghilangkna-tulisan-lihat-profil.html">Cara Menghilangkan Tulisan 'Lihat Profil Lengkapku'</a></li><span><span style="font-size: 14px; background-color: rgb(255, 255, 255);"><a href="http://lanoblog.blogspot.com/2011/09/cara-menghilangkan-garis-border-gambar.html">Cara Menghilangkan Garis Border Pada Gambar</a><span><span style="font-size: 14px; background-color: rgb(255, 255, 255);"><li><span style="font-size: 14px; background-color: rgb(255, 255, 255); "><a href="http://lanoblog.blogspot.com/2011/09/cara-menghilangkan-garis-bawah-link.html">Cara Menghilangkan Garis Bawah Pada Link</a></span></li><li><a href="http://lanoblog.blogspot.com/2011/09/cara-mengetengahkan-widget.html">Cara Mengetengahkan Widget</a></li><span><span style="font-size: 14px; background-color: rgb(255, 255, 255);"><li><span style="font-size: 14px;"><a href="http://lanoblog.blogspot.com/2011/09/cara-pasang-meta-tag-goggle-di-blogger.html">Cara Pasang Meta Tag Goggle Di Blogger</a></span></li><li><span><span style="font-size: 14px; background-color: rgb(255, 255, 255);"><a href="http://lanoblog.blogspot.com/2011/09/cara-pasang-meta-tag-bing-di-blog.html">Cara Pasang Meta Tag Bing Di Blogger</a></span></span></li><li><span style="font-size: 14px; background-color: rgb(255, 255, 255); "><a href="http://lanoblog.blogspot.com/2011/09/cara-daftar-dan-pasang-meta-tag-alexa.html">Cara Daftar Dan Pasang Meta Tag Alexa</a></span></li><li><span style="font-size: 14px; background-color: rgb(255, 255, 255); "><a href="http://lanoblog.blogspot.com/2011/09/cara-pasang-meta-tag-yahoo.html">Cara Pasang Meta Tag Yahoo</a></span></li><li><a href="http://lanoblog.blogspot.com/2011/09/cara-pasang-alexa-traffic-rank-button.html">Cara Pasang Alexa Traffic Button</a></li><li><a href="http://lanoblog.blogspot.com/2011/09/cara-memasang-widget-histats-di-blogger.html">Cara Pasang Widget Histats</a></li><span><span style="font-size: 14px; background-color: rgb(255, 255, 255);"><li><span style="font-size: 14px; background-color: rgb(255, 255, 255); "><a href="http://lanoblog.blogspot.com/2011/09/cara-mendaftarkan-blog-ke-mesin-pencari.html">Cara Mendaftarkan Blog Ke Mesin Pencari ( Goggle , Yahoo , Bing , Baidu )</a></span></li><li><span style="font-size: 14px; background-color: rgb(255, 255, 255); "><a href="http://lanoblog.blogspot.com/2011/09/cara-membuat-artikel-terkait-dibawah.html">Cara Membuat Artikel Terkait Dibawah Postingan</a></span></li><li><span style="font-size: 14px; background-color: rgb(255, 255, 255); "><a href="http://lanoblog.blogspot.com/2011/09/cara-membuat-border.html">Cara Membuat Border</a></span></li><li><a href="http://lanoblog.blogspot.com/2011/09/cara-membuat-link-berkedip-kedip.html">Cara Membuat Link Berkedip-kedip</a></li><li><a href="http://lanoblog.blogspot.com/2011/09/cara-membuat-link-warna-warni-saat.html">Cara Membuat Link Warna-Warni Saat Disentuh Cursor</a></li><span><span style="font-size: 14px; background-color: rgb(255, 255, 255);"><li><a href="http://lanoblog.blogspot.com/2011/09/cara-membuat-huruf-awal-postingan.html">Cara Membuat Huruf Besar Diawal Postingan</a></li><li><a href="http://lanoblog.blogspot.com/2011/09/cara-membuat-buku-tamu.html">Cara Membuat Buku Tamu</a></li><li><a href="http://lanoblog.blogspot.com/2011/09/cara-membuat-read-more-otomatis.html">Cara Membuat Read More Otomatis</a></li><li><a href="http://lanoblog.blogspot.com/2011/09/cara-membuat-3-kolom-dibawah-header.html">Cara Membuat 3 Kolom Dibawah Header</a></li><li><a href="http://lanoblog.blogspot.com/2011/09/cara-membuat-kotak-komentar-admin.html">Cara Membuat Kotak Komentar Admin Berbeda Dengan Pengunjung</a></li><li><a href="http://lanoblog.blogspot.com/2011/09/cara-membuat-kotak-komentar-admin_28.html">Cara Membuat Kotak Komentar Admin Berbeda Dengan Pegunjung Dengan Background Gambar</a></li><li><a href="http://lanoblog.blogspot.com/2011/09/cara-membuat-link-saat-berkomentar.html">Cara Membuat Link Saat Berkomentar</a></li><li><a href="http://lanoblog.blogspot.com/2011/09/membuat-menu-navigasi-breadcrumb.html">Cara Membuat Menu Navigasi Breadrumb</a></li><li><a href="http://lanoblog.blogspot.com/2011/09/cara-mengganti-favicon-blog.html">Cara Mengganti Favicon Blog</a></li></span></span></span></span></span></span></span></span></span></span></span></span></ol></div>


Maka Hasilnya Seperti Dibawah Ini :


  1. Cara Memasang Tombol 'Back to Top' pada Blog
  2. Cara Memasang Tombol Share DiBawah Postingan
  3. Cara Memasang Widget Tombol Follow Me Twitter
  4. Cara Menghilangkan Icon Obeng dan Tang pada Blogger
  5. Cara Menghilangkan Icon Sampah Pada Kotak Komentar
  6. Cara Menghilangkan Diposkan oleh , Waktu Posting , Serta Label
  7. Cara Menghilangkan Tulisan 'Lihat Profil Lengkapku'
  8. Cara Menghilangkan Garis Border Pada Gambar
  9. Cara Menghilangkan Garis Bawah Pada Link
  10. Cara Mengetengahkan Widget
  11. Cara Pasang Meta Tag Goggle Di Blogger
  12. Cara Pasang Meta Tag Bing Di Blogger
  13. Cara Daftar Dan Pasang Meta Tag Alexa
  14. Cara Pasang Meta Tag Yahoo
  15. Cara Pasang Alexa Traffic Button
  16. Cara Pasang Widget Histats
  17. Cara Mendaftarkan Blog Ke Mesin Pencari ( Goggle , Yahoo , Bing , Baidu )
  18. Cara Membuat Artikel Terkait Dibawah Postingan
  19. Cara Membuat Border
  20. Cara Membuat Link Berkedip-kedip
  21. Cara Membuat Link Warna-Warni Saat Disentuh Cursor
  22. Cara Membuat Huruf Besar Diawal Postingan
  23. Cara Membuat Buku Tamu
  24. Cara Membuat Read More Otomatis
  25. Cara Membuat 3 Kolom Dibawah Header
  26. Cara Membuat Kotak Komentar Admin Berbeda Dengan Pengunjung
  27. Cara Membuat Kotak Komentar Admin Berbeda Dengan Pegunjung Dengan Background Gambar
  28. Cara Membuat Link Saat Berkomentar
  29. Cara Membuat Menu Navigasi Breadrumb
  30. Cara Mengganti Favicon Blog

5. SIMPAN

HABIS BACA JANGAN LUPA LIKE FANSPAGE KAMI DIBAWAH YA SOB..

Artikel Menarik Lainnya