3 Nov 2013

Cara membuat menu blog melayang di atas header

Selamat pagi sahabat blogger, pagi ini ane mau berbabi sedikit tentang bagaimana Cara membuat menu blog melayang di atas header?? 

Desain blog memang sangatlah penting bagi seorang bloger seperti ane gan,, selain itu juga untuk mempercantik blog kita supaya terlihat menarik bagi pengunjung.

Ok langsung saja ke TKP

Steep 1 - Masuk ke akun blog sobat

Steep 2 - Pilih edit HTML

Steep 3 - Cari code ]]></b:skin> untuk mempermudah dalam pencarian silahkan tekan tombol ctrl+F

Steep 4 - Setelah itu copy code di bawah ini di atas code ]]></b:skin>
/* Floating Menu Minimalis*/
#ki_floating_menu_black{background-color: #333;box-shadow: 0px 1px 3px rgba(0,0,0,0.0);height:23px;width:105%;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:8px;padding:0 12px;color:#cacaca;font-size:12px;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;}
Steep 5 - Kemudian cari code <body> dengan cara yang sama, copykan code di bawah ini di bawah code <body>  
<!-- Floating Menu-->
<div id='ki_floating_menu_black'>
<ul>
  <li style='border-left:1px solid #555'><a href='/'><img alt='Home' src='http://2.bp.blogspot.com/-kodysCW2shE/UXjGba74koI/AAAAAAAAD7I/wm2vEcaWIxo/s1600/home2.png' style='padding:0px;'/></a></li>
<li><a href='http://arysandi01.blogspot.com'>About</a></li>
<li><a href='http://arysandi01.blogspot.com'>SiteMap</a></li>
<li><a href='http://arysandi01.blogspot.com'>Privacy Policy</a></li>
<li><a href='http://arysandi01.blogspot.com'>Disclaimer</a></li>
<li><a href='http://arysandi01.blogspot.com'>Contact</a></li>
</ul>
</div>
Steep 6 - Save template yang sudah sobat modifikasi
Ket :
  • Merah = link alamat blog sobat yang ingin di masukkan
  • Biru    = Nama menu, silahkan di edit sendiri sesuai selera sobat
   
http://arysandi01.blogspot.com/2013/11/cara-membuat-menu-blog-melayang-di-atas.html

Demikian tutorial tentang "Cara membuat menu blog melayang di atas header" Semoga bermanfaat

2 komentar

click to leave a comment!

3 Maret 2015 11.49 Delete comments

Terimakasih infonya Gan :-bd
Ini yang sedang saya cari-cari
http://grosirobatjellygmat.com/

Reply
avatar
3 Maret 2015 22.59 Delete comments

Iya sama-sama gan, thanks sudah mau mampir..

Reply
avatar

Tingkat kecerdasan, kebijaksanaan dan kearifan seseorang bisa dinilai dari bobot serta kualitas isi pembicaraannya
EmoticonEmoticon