Saturday, 27 July 2013

Cara Membuat Menu Melayang Di Atas Header

Cara Membuat Menu Melayang Di Atas Header-Salah satu cara untuk menghias blog adalah membuat menu melayang atau menu floating di atas header , pasti sobat sudah kerap atau sering melihat di blogger lain menu yang melayang di atas header , konsep ini saya ambil dari kang ismet dan saya desain supaya lebih Seo frendly dan Valid HTML 5 , karena pada tutorial kang ismet menurut saya kurang tepat penempatan kodenya , silahkan cek di validator antara turitorial saya dengan kang ismet hasilnya , pada tutorial saya saat sobat sudah menerapkanya  maka ketika di cek di validator akan Valid HTML 5 , sedangkan pada turitorial kang ismet akan ada error 1 dan 1 missing , maaf ya kang ismet , saya hanya akan membenarkan saja

Cara Membuat Menu Melayang Di Atas Header

DEMONYA SEPERTI GAMBAR DI ATAS

Berikut Cara Membuat Menu Melayang Atau Biasa Di Sebut Menu Floating

1. Masuk Ke Akun Blogger
2. Pilih Template
3. Kemudian Cari Kata EDIT TEMPLATE , Kemudian Klik 
5. Cari Kode <body>
6. Letakan kode Di Bawah ini sesudah ( dibawah ) kode <body>

<!-- Floating Menu-->
<div id='yadi_floating_menu_blue'>
<ul>
  <li style='border-left:1px solid #555'><a href='/'><img alt='Home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizTRVRkVPcSuDaoNK_9w6EwrOsQFq-nT_WSc5KxaGAv5LONH5ocKRdD_xVD1WWZ53PvvqzgCLDF35AjaZl5J5ly2I2h3-tKK259Lfqci17rokIcfty-4JTC3gyoeaNz88GmfUF7V_PKEE/s1600/home2.png' style='padding:0px;' title='Beranda'/></a></li>
<li><a href='#' title='Menu1'>Menu 1</a></li>
<li><a href='#' title='Menu1'>Menu 2</a></li>
<li><a href='#' title='Menu1'>Menu 3</a></li>
<li><a href='#' title='Menu1'>Menu 4</a></li>
<li><a href='#' title='Menu1'>Menu 5</a></li>
</ul>
</div>

Keterangan :
Ganti kode # dengan link tujuan anda
Ganti kode Menu 1 dan seterusnya dengan menu yang anda inginkan

7. Langkah berikutnya yaitu cari kode ]]></b:skin>
8. Letakan kode di Bawah ini Diatas kode  ]]></b:skin> 

/* Floating Menu ahmadsuyadi.blogspot.com*/
#yadi_floating_menu_blue{background-color: #1484CE;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:34px;width:100%;min-width:1000px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000;}
#yadi_floating_menu_blue ul{list-style: none;margin:0 auto;width:1000px;}
#yadi_floating_menu_blue ul li{float:left}
#yadi_floating_menu_blue ul li a{line-height:34px;padding:0 15px;color:#cacaca;font-size:15px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #000;display:block;text-decoration:none;border-right: 1px solid #555;}
#yadi_floating_menu_blue ul li a:hover{background-color:#666;color:white;}


keterangan :
Untuk Menyesesuaikan lebar agar sesuai dengan template anda ganti angka 970 
Untuk mengganti warnanya , ganti kode #1484CE; dengan warna selera anda

9. Simpan template dan lihat perubahan yang terjadi

Diposkan oleh di

4 comments:

  1. Alfy Maghfira Sidik2 August 2013 at 14:47

    wah makasih atas tutorialnya ya gan, saya udah lama nyari2 trik begini, tapi gak tau namanya...
    :)

    ReplyDelete
    Replies
    1. ahmad suyadi2 August 2013 at 15:03

      ya sob sama-sama ..
      ini namanya menu melayang diatas header atau juga bisa di sebut menu floating sob.

      Delete
  2. Supriadi saragih6 August 2013 at 04:43

    Mantap nih...sob artikelnya...
    ane dicoba dulu.....

    ReplyDelete
  3. ilham tukang kaos23 December 2013 at 15:51

    wah bagus bisa di terapkan gan di blog ane...

    ReplyDelete

Subscribe to: Post Comments (Atom)