Cara Membuat Menu Melayang Di Atas Header ~ Modascomplementos

Sabtu, 27 Juli 2013

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

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>

<div id='yadi_floating_menu_blue'>

<ul>

<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

Cara Membuat Menu Melayang Di Atas Header

Kategori