Cara Membuat Menu Scroll


Postingan kali ini saya akan membahas tentang cara pembuatan Scroll Menu yaitu menu yang bisa di roll ke atas atau ke pinggir. Menu ini sangat bermanfa'at terutama untuk menghemat tempat di blog/wesite kita. Di dalam scroll menu ini kita bisa menuliskan judul sangat banyak dengan tempat hanya beberapa cm saja. Kita juga bisa memasukan photo yang banyak pula, scroll menu bisa kita taruh di mana saja di blog/website kita sesuai selera anda. Ok langsung saja kita tulis contoh kode html dari scroll menu ini :


<div style="padding-right: 15px; padding-left: 15px; padding-bottom: 10px; overflow: auto; width: 130px; padding-top: 10px; height: 141px" 1px="1px" solid="solid">
  <ul>

<p><a href="http://online-service-yangkutahu.blogspot.com/2011/07/membuat-menu-di-bawah-header.html" target="_self"> Membuat Menu di Bawah Header  </a> </p>


<p><a href="http://online-service-yangkutahu.blogspot.com/2011/07/cara-agar-posting-tulisan-tampil-selalu.html" target="_self"> Cara Agar Posting Tulisan Tampil Selalu di Depan Halaman Blogspot </a> </p>


<p><a href="http://online-service-yangkutahu.blogspot.com/2011/07/cara-menghilangkan-navbar-navigation.html" target="_self"> Cara Menghilangkan Navbar (Navigation Bar) Blogger .</a> </p>


  </ul>
</div>

 Kode yang berwarna silahkan sobat rubah sekehendak sobat diatur-atur bagaimana bagusnya.
Keterangan :
* width = untuk mengatur lebar menu.
* height = untuk mengatur tinggi menu
* "_self" = ketika diklik judulnya maka akan terbuka linknya masih di tab sama, bisa anda ganti dengan "_blank" = ketika di klik akan terbuka linknya di tab baru.
* http://online-service-yangkutahu.blogspot.com/2011/07/membuat-menu-di-bawah-header.html = url yangdituju
* Membuat Menu di Bawah Header = kata yang mewakili link di atas untuk diklik.


Adapun cara memasukan kode di atas ke blog/website adalah :
1. Masuk ke blogger, pilih dasbor, pilih rancangan blog yang akan kita tambahi menu dengan milih rancangan.
2. Tambah gadget, pilih html/javascript, pastekan kode tadi ke area html.
3. Geserkan gadget tersebut ke mana sobat mau, klik simpan, lihat blog anda.

Tampilan menu scroll di atas, aslinya seperti di bawah ini :


Semoga bermanfaat untuk sobat semua...!!
>
Previous
Next Post »