Dasboard WebBook Design Operatining System Tutorial Blog

Membuat Drop Down & Scroll

By  at 13.43    1 comment
Setiap usaha pasti ada hasil. Nah... Setiap hasil yang diperoleh pasti emmbutuhkan tempat, Apa hubungannya ya... OK langsung ke TKP.. DropDown dan Scroll dibuat biasanya memiliki tujuan untuk menghemat tempat.
  1. DropDown
    Dengan dropdown menu kita bisa menghemat space/ruang di blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak. Itu bisa diisi dengan arsip, blogroll dll. Gimana? Mau mencobanya? caranya : Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript. Kemudian masukkan script berikut ini :
    Scrip Dasar

    <select onChange="document.location.href=this.options[this.selectedIndex].value;">
    <option value="0" selected>Arsip Blog</option>
    <option value="Links 1">Text 1</option>
    <option value="Links 2">Text 2</option>
    </select>
    Ganti Scrip yang berwarna Biru untuk Link yang akan dituju
    Ganti Scrip yang berwarna Hujau untuk Keterangan yang akan ditampilkan
    Contoh Scrip


    <select onChange="document.location.href=this.options[this.selectedIndex].value;">
    <option value="0" selected>Tutorial Blog</option>
    <option value="http://ariskoerniawan.blogspot.com/2011/04/tutoriallogo.html">Mengganti Logo Blog</option>
    <option value="http://ariskoerniawan.blogspot.com/2011/04/cara.html">Perangkat Penunjang Bloger</option>
    <option value="http://ariskoerniawan.blogspot.com/2011/04/bintang.html">Aksesoris Bintang Pada Link & Kursor</option>
    </select>
    Hasil Tampilan

  2. Scroll
    pada dasarnya pembuatan scroll dan DropDown hampir sama fungsi juga hampir sama
    Srip Dasar


    <div style="overflow:auto;width:200px;height:100px;padding:10px;border:1px solid #eee">
    <u>Silahkan Klik Post Dibawah Ini</u>
    Data 1
    Data 2
    Data 3
    </div>
    ganti ukuran dengan mengganti nilai width & height untuk penyesuaian data yang anda masukan
    Hasil Tampilan
    Silahkan Klik Post Dibawah Ini
    Data 1
    Data 2
    Data 3
    Selain itu kita juga bisa memberi Link pada Keterangan yang diberikan.
    Contoh Scrip

    <div style="overflow:auto;width:200px;height:100px;padding:10px;border:1px solid #eee">
    <u>Silahkan Klik Post Dibawah Ini</u>
    <a href="http://ariskoerniawan.blogspot.com/2011/04/pajak.html">Perpajakan</a>
    <a href="http://ariskoerniawan.blogspot.com/2011/04/dea.html">DacEasy Accounting</a>
    <a href="http://ariskoerniawan.blogspot.com/2011/04/myob_09.html">MYOB Accounting</a>
    </div>
    Hasil Scroll Dengan Link
    Silahkan Klik Post Dibawah Ini
    Perpajakan
    DacEasy Accounting
    MYOB Accounting

1 komentar: