Blog sedang dalam perbaikan mohon maaf jika banyak kesalahan ------> Pemesanan Hubungi langsung Owner Kami
Demo image Demo image Demo image Demo image Demo image Demo image Demo image Demo image Demo image Demo image Demo image Demo image

Cara membuat Scroll Box yang dapat di ubah ukuran

  • 3 Mei 2012
  • Armila ( Dins Photography )
  • Label:

  • Pada Tutorial blog kali ini saya akan kasih tips cara membuat Scroll Box. Scroll Box banyak digunakan di web atau blog. Scroll Box sangat berguna sekali untuk menghemat tempat, terutama bila halaman web atau blog sudah penuh dan sementara masih banyak artikel atau apa saja yang ingin tetap ditampilkan pada satu halaman. Scroll Box selain bisa digunakan untuk tempat artikel, banyak juga yang menggunakan Scroll Box sebagai tempat daftar isi.




    Cara membuat Scroll Box sangat mudah, silahkan anda perhatikan contoh dibawah ini berikut kodenya :
    JUDUL ARTIKEL
    Silahkan anda bisa mengisi artikel atau daftar isi atau apa saja disini. Semakin banyak teks yang anda isikan dalam scroll box ini, dengan sendirinya akan membentuk kotak scroll box secara otomatis, sehingga dapat menghemat tempat. Lihat Contoh scroll box dibawah dengan isi teks yang lebih banyak.

    Berikut Kode untuk scroll box diatas :

    JUDUL ARTIKEL
    Silahkan anda bisa mengisi artikel atau daftar isi atau apa saja disini. Semakin banyak teks yang anda isikan dalam scroll box ini, dengan sendirinya akan membentuk kotak scroll box secara otomatis, sehingga dapat menghemat tempat. Lihat Contoh scroll box dibawah dengan isi teks yang lebih banyak.



    <div align="center">
    <table width="250" border="1">
    <tr> <th colspan="100%" scope="col">JUDUL ARTIKEL</th> </tr>
    <tr><td><div style="font-family: arial; font-size: 12px; overflow: scroll; width: 250px; height: 150px;"><div style="text-align: center; width: 100%; padding: 0 px; overflow: hidden;">Silahkan anda bisa mengisi artikel atau daftar isi atau apa saja disini. Semakin banyak teks yang anda isikan dalam scroll box ini, dengan sendirinya akan membentuk kotak scroll box secara otomatis, sehingga dapat menghemat tempat. Lihat Contoh scroll box dibawah dengan isi teks yang lebih banyak.</div></div></td></tr>
    </table>
    </div>


    Anda juga bisa memberi warna sesuka anda, seperti scroll box dibawah ini berikut kodenya :

    CONTOH DAFTAR ISI TUTORIAL
    BLOG
    1. Cara Membuat Tabel
    2. Cara membuat Link Terbuka di halaman Baru
    3. Cara Menambah Gadget diatas Header
    4. Submit Sitemap
    5. Cara Buat Sitemap / Peta Situs
    6. Cara buat tabel kode warna
    7. Membuat Teks Berjalan ( Marquee )
    8. Cara Membuat Rounded Corner
    9. Cara membuat Text-Shadow
    10. Cara Memasang Background Gambar pada postingan
    11. Menambah Widget Jam pada Blog
    12. Cara Membuat Read more
    13. Cara Menghilangkan Navbar Pada blogger
    14. Membuat Navbar Auto-Hide
    15. Cara Membuat Forum Login
    16. Anti Copy Paste
    17. Membuat pesan selamat datang dan selamat tinggal
    18. Cara Membuat Animasi Status Loading
    19. Membuat Text Area blok Otomatis


    Berikut Kode untuk scroll box diatas :


    <div align="center">
    <table width="250" border="1">
    <tr> <th colspan="100%" scope="col"bgcolor="#FFF7DB">CONTOH DAFTAR ISI TUTORIAL BLOG</th> </tr><tr><td>
    <div style="font-family: arial; font-size: 12px; overflow: scroll; background: #FFFFFF; border-color: #CCCCCC; width: 250px; height: 150px;"><div style="text-align:left; width: 100%; padding: 0 px; overflow: hidden; color: #FFFFFF; background: #F6F0FF;">

    <a href="http://htmlnoer.blogspot.com/2011/01/cara-membuat-tabel.html">1. Cara Membuat Tabel</a>
    <a href="http://htmlnoer.blogspot.com/2011/01/cara-membuat-link-terbuka-di-halaman.html">2. Cara membuat Link Terbuka di halaman Baru</a>
    <a href="http://htmlnoer.blogspot.com/2011/01/cara-menambah-gadget-diatas-header.html">3. Cara Menambah Gadget diatas Header</a>
    <a href="http://htmlnoer.blogspot.com/2010/12/submit-sitemap.html">4. Submit Sitemap</a>
    <a href="http://htmlnoer.blogspot.com/2010/12/cara-buat-sitemap-peta-situs.html">5. Cara Buat Sitemap / Peta Situs</a>
    <a href="http://htmlnoer.blogspot.com/2010/12/cara-buat-tabel-kode-warna.html">6. Cara buat   tabel kode warna</a>
    <a href="http://htmlnoer.blogspot.com/2010/12/membuat-teks-berjalan-marquee.html">7. Membuat Teks Berjalan ( Marquee )</a>
    <a href="http://htmlnoer.blogspot.com/2010/11/cara-membuat-rounded-corner.html">8. Cara   Membuat Rounded Corner</a>
    <a href="http://htmlnoer.blogspot.com/2010/11/cara-membuat-text-shadow.html">9. Cara   membuat Text-Shadow</a>
    <a href="http://htmlnoer.blogspot.com/2010/11/cara-memasang-background-gambar-pada.html">10. Cara Memasang Background Gambar pada postingan</a>
    <a href="http://htmlnoer.blogspot.com/2010/10/menambah-widget-jam-pada-blog.html">11. Menambah Widget Jam pada Blog</a>
    <a href="http://htmlnoer.blogspot.com/2010/10/cara-membuat-read-moreselengkapnyabaca.html">12. Cara Membuat Read more</a>
    <a href="http://htmlnoer.blogspot.com/2010/10/cara-menghilangkan-navbar-pada-blogger.html">13. Cara Menghilangkan Navbar Pada blogger</a>
    <a href="http://htmlnoer.blogspot.com/2010/10/membuat-navbar-auto-hide.html">14. Membuat   Navbar Auto-Hide</a>
    <a href="http://htmlnoer.blogspot.com/2010/10/cara-membuat-forum-login.html">15. Cara   Membuat Forum Login</a>
    <a href="http://htmlnoer.blogspot.com/2010/10/anti-copy-paste.html">16. Anti Copy   Paste</a>
    <a href="http://htmlnoer.blogspot.com/2010/10/membuat-pesan-selamat-datang-dan.html">17. Membuat pesan selamat datang dan selamat tinggal</a>
    <a href="http://htmlnoer.blogspot.com/2010/10/cara-membuat-animasi-status-loading.html">18. Cara Membuat Animasi Status Loading</a>
    <a href="http://htmlnoer.blogspot.com/2010/10/membuat-text-area-blok-otomatis.html">19. Membuat Text Area blok Otomatis</a>
    </div>
    </div>
    </td></tr>
    </tbody></table>
    </div></div></div></td></tr>
    </table></div>


    Silahkan anda ganti teks berwarna merah dia atas dengan daftar isi milik anda. Untuk memilih warna beserta kodenya silahkan anda lihat tabel kode warna di : http://www.buatblog-mudah.co.cc/p/kode-warna-color-code.html.
    Dan cara penulisan daftar isi dengan link seperti diatas, silahkan anda lihat tutorialnya di : http://htmlnoer.blogspot.com/2010/12/html-hyperlink-link.html.

    Demikian cara membuat scroll box,
    selamat mencoba dan semoga bermanfaat....

    Jangan lupa luangkan waktu untuk beri komentarmu ya......terima kasih.

    1 komentar:

    sigit hermawan mengatakan...

    makasih mas infonya, sangat bermanfaat sekali..

    Posting Komentar

    Tolong bagi para sahabat harap baca dulu sebelum berkomentar :

    Blog ini tidak menggunakan verifikasi apapun, silahkan tinggalkan komentar yang sopan, tidak menjadi spamer.

    - jangan sertakan link pada komentar
    - jika ada link yang rusak / broken link di blog ini tolong beritahu saya pada komentar
    - jika artikel blog ini bermanfaat silahkan menyebarluaskan-nya dengan tekan button share
    ( google+ , facebook, digg, twitter dll ) salam hangat...
    Owner dsp : [Didin Supriatna (urang sunda+jawa)]

    Copyright (c) 2010 dins photography. Created by dsp