Bocah Poris Blog's | Hari ini Saya Akan Berbagi Tentang Cara Membuat Menu Navigasi Melayang di Blogger  Setelah Sebelumnya Saya Sudah Membuat Artikel Tentang Cara Cara Memasang Menu Melayang Keren di Blog  Meskipun Sama - Sama Terdapat Fitur Melayang Tapi Kali agak Sedikit Berbeda dan Lebih Keren di Banding Dengan yang Lainnya . Karena ini hasilnya saya membuka Source Code Blog Orang Lain . Semoga Dia tidak Marah .

 Menu Melayang Navigasi ini Mempunyai Fitur Sebagai Berikut :

  • Namanya Juga Melayang Pasti Melayang mengikuti Arah Jalannya Scroll
  • Di Lengkapi Dengan Fitur Search
  • Di Lengkapi Dengan Warna yang Lebih Cerah . Anda Bisa Juga Memodifikasi nya Sesuai Keinginan Anda Sendiri 
  • di Lengkapi dengan Simbol Home
Memasang Menu Navigasi Melayang di Blogger
dan lain - lain Silahkan di Coba Jika Kalian Ingin Berminat.
Ayo Kita Ke Memasang Menu Navigasi Melayang di Blogger Semoga Dengan Artikel ini Blog Kalian Semakin Sukses dan Semakin Keren 

1. Login Seperti Biasa Ke Akun Blogger Anda

2. Masuk Ke Menu Template > Edit HTML > Centang Expand Template Widget 

Template
3. Setelah itu Cari Kode dibawah
]]></s:kin>
4. Setelah Itu Masukkan Kode dibawah Tepat diatas Kode ]]></s:kin>
.bilah-menu-atas{width:100%;min-width:960px;position:fixed;top:0;left:0;right:0;height:27px;font-size:13px;z-index:99;white-space:nowrap;background-color:#369;background-image:0 0 #369 100%;box-shadow:0 2px 0 #0e5a8c;border-bottom:1px solid rgba(255,255,255,0.1)}.kolom-utama{-moz-transition:all .2s linear 0;width:960px;height:auto;margin:0 auto}.kolom-menu{width:521px;height:auto;float:left;display:inline;margin:0 0 0 -41px}.kolom-menu ul{height:auto;margin-top:0}.kolom-menu ul li{float:left;position:relative;list-style:none outside none}.kolom-menu ul li:first-child{border-left:1px solid rgba(30,30,30,0.125)}.kolom-menu ul li a{color:#fff;font-weight:700;text-shadow:-1px -1px rgba(0,0,0,0.2);text-decoration:none;display:inline-block;position:relative;border-right:1px solid rgba(30,30,30,0.125);box-shadow:1px 0 0 rgba(255,255,255,0.1);padding:5px 10px}.kolom-menu ul li a:hover,.kolom-menu ul li a:focus{background-color:rgba(255,255,255,0.125)}.menusearch{width:200px;float:right;margin:0 auto;padding:0}.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#eee;width:200px;height:23px; overflow:hidden;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #021427;box-shadow:0 0 5px 0 #666 inset;}.searchform input {font:italic 12px Arial;color:#222;line-height:23px;height:23px;padding:0;margin:0;}.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 195px;height:23px;border:0px;outline: none;line-height:23px;}.searchform .searchbutton {border:none;margin:0;padding:0;font-size:12px;height:23px;width:23px;}
5. Setelah Langkah diatas Dilaksanakan Lalu Cari Lagi Kode Seperti dibawah
<div id='header-wrapper'>

  • Keterangan Kalau kode diatas tidak cari kode <header> 

6. Setelah itu Massukan kode dibawah Tepat diatas kode  <div id='header-wrapper'>

<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='#'><img alt='Home' src='https://lh6.googleusercontent.com/-GrWWmwsRww4/UFjcGGzlSYI/AAAAAAAAAn0/rP9UFz050sk/s800/Beranda.png' style='height:15px; width:20px' title='Home'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#' target='_blank'>Menu 5</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><div class='menusearch'>
<div style='float:right;padding:2px 8px 0 0;'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;' type='text' value='Search here....'/>
</form>
</div></div></li>
</ul>
</div>
</div>
</div>
Keterangan :

  • Silahkan Ganti Kode # dengan Link yang Anda Ke Hendaki

7. Setelah Melakukan Langkah diatas . Sekarang Tinggal Langkah Terakhir Anda .
yaitu Mengecek Hasilnya Pada Blog Anda 

Semoga Tutorial Cara Memasang Menu Navigasi dengan Efek Keren di Blogger ini Bermanfaat Untuk Kalian. 

Baca Tutorial Berikut yang Berhubungan :


Judul : Membuat Menu Navigasi Melayang di Blogger
Di Tulis Oleh:MRizal Wrc
URL : http://bocahporis.blogspot.com/2013/02/memasang-menu-melayang-di-blog.html
Date Published : 12:40
Desription :Bocah Poris Blog's  | Hari ini Saya Akan Berbagi Tentang Cara Membuat Menu Navigasi Melayang di Blogger   Setelah Sebelumnya Saya Sudah ...
Rating Blog: 5 dari 5