Beranda » Widget » Cara Membuat Menu Blog Melayang di Atas Header

Cara Membuat Menu Blog Melayang di Atas Header

Ditulis oleh: -
Cara Membuat Menu Blog Melayang di Atas Header - Adalah menu yang melayang setiap kita scroll ke bawah menu yang di atas akan mengikuti kita terus contoh nya blog saya. Dan ini adalah cara Kang Ismet dan menu ini telah di modifikasi menjadi HTML5.

Cara Memasang Menu Blog Melayang

  • 1. Masuk blog sobat terus ke template
  • 2. Cari kode ]]></b:skin>
  • 3. Copy kode di bawah ini di atas kode ]]></b:skin>
/* Floating Menu Minimalis*/
#ki_floating_menu_black{background-color: #333;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000;}
#ki_floating_menu_black ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu_black ul li{float:left}
#ki_floating_menu_black ul li a{line-height:34px;padding:0 15px;color:#cacaca;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #000;display:block;text-decoration:none;border-right: 1px solid #555;}

#ki_floating_menu_black ul li a:hover{background-color:#666;color:white;}
  • 4. Cari kode <body>
  • 5. Copy kode di bawah ini dan paste sesusah kode <body>

<!-- Floating Menu-->
<div id='ki_floating_menu_black'>
<ul>
  <li style='border-left:1px solid #555'><a href='/'><img alt='Home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUKMbaeUOYGSe6Cos2BKl7HUQZlsNORhfD6xsTchuiS_s_WpdzdleooaogfTpgD6qgnbXjfPxuLT2R566EmDwGBsOaYME9Uk7R2OaPW_dtgwqGNWyso9zZVY-Eo8to8xbryTH-KRH-81U/s1600/home2.png' style='padding:0px;'/></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='#'>Menu 5</a></li>
</ul>
</div>
  • 6. Jika Gagal masukan kodenya di di bawah </header> 
  • 7. Simpan template dan selesai

Cara Mengganti Nama Menu di Blog

<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
Catatan :
Ganti warna Biru Ganti dengan URL / ARTIKEL
Ganti warna merah dengan nama menu yang kalian inginkan
Jika berhasil akan seperti gambar di bawah ini :

Cara Membuat Menu Blog Melayang di Atas Header
Klik untuk memperbesar
Cara Membuat Menu Blog Melayang di Atas Header
Klik untuk memperbesar
Jika kalian mengikutinya dengan benar kalian akan berhasil.
Judul : Cara Membuat Menu Blog Melayang di Atas Header
Deskripsi : Cara Membuat Menu Blog Melayang di Atas Header - Adalah menu yang melayang setiap kita scroll ke bawah menu yang di atas akan mengikuti kit...

Artikel terkait > Klik Auto Backlink Gratis Indonesia : Top Link Indo

8komentar:

  1. abitalita14 September 2013 pukul 06.07

    sip mbak menu seperti ini memang bisa mempermudah pengunjung untuk menjelajahi konten blog tanpa harus kembali ke atas :D

    BalasHapus
    Balasan
    1. Unknown14 September 2013 pukul 06.12

      Iya betul di buat simple aja :D
      Terima kasih kunjunganya ^_^

      Hapus
  2. Unknown14 September 2013 pukul 06.39

    nitip ya http://androitan.blogspot.com/

    BalasHapus
  3. Unknown15 September 2013 pukul 04.10

    terimakasih kang budi :)

    BalasHapus
  4. Tyo15 September 2013 pukul 21.35

    Keren Tutorialnya, ini yg aku cari buat belajar tapi tutorialnya sama seperti yg ada di blog ini ya mbak...Thx banget ya, ijin praktek

    BalasHapus
  5. Unknown18 Oktober 2015 pukul 02.47

    mksh infonya. saya ingin bertanya. bagaimana caranya menu diatas header tersebut responsif terhadap browser di handphone. mksdnya adalah menu tersebut tetapmuncul dibrowser hape

    BalasHapus