Home » , » 2 Menu Floating keren Untuk blog

2 Menu Floating keren Untuk blog

2 Menu Floating keren Untuk blog - kali ini haris715 akan posting mengenai menu floating atau menu mengambang keren untuk blogger

Konsep CSS dasar dari Floating Menu ini sebenarnya sangat simpel, sebagai contoh :
 
#floati
ng_menu{
width:100%;
position:fixed;
top:0;
}
 
Tinggal dimasukan tambahan-tambahan lain yang diperlukan, seperti background, height, z-index, a, color, dll.

Oke kita langsung saja ke tutorialnya :
1. Log in ke blogger kalian
2. Pilih Template
3. Kemudian Pilih Edit HTML
4. Pilih salah satu STYLE MENU di bawah ini dan ikuti langkah selanjutnya

Floating Menu Blue Style


Simpan kode dibawah  ini di atas kode ]]></b:skin>


/* Floating Menu */
#ki_floating_menu{background-color: #1484CE;background: #1484ce;background: 
-moz-linear-gradient(top,  #1484ce 0%, #1274b5 100%);background: 
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#1484ce)
color-stop(100%,#1274b5));background: -webkit-linear-gradient
(top,  #1484ce 0%,#1274b5 100%);background: -o-linear-gradient
(top,  #1484ce 0%,#1274b5 100%);background: -ms-linear-gradient
(top,  #1484ce 0%,#1274b5 100%);background: linear-gradient
(to bottom,  #1484ce 0%,#1274b5 100%);filter: progid:DXImageTransform.
Microsoft.gradient( startColorstr='#1484ce', endColorstr='#1274b5',
GradientType=0 );border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
box-shadow: 0 2px 0 #0E5A8C;box-shadow: 0px 2px 0px #0e5a8c;height:34px; 
width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999; 
overflow:hidden;border-bottom:1px solid #2a8fd2;}
#ki_floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu ul li{float:left}
#ki_floating_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5; 
font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f; 
display:block;text-decoration:none;border-right: 1px solid #1470ad; 
border-left:1px solid #2a88c6;}
#ki_floating_menu ul li a:hover{background-color:rgba(255,255,255,0.125); 
color:white;}

Ganti 970px dengan ukuran blog sobat. Untuk mendeklarasikannya, simpan kode ini di bawah </head>

 
<!-- Floating Menu-->
<div id='ki_floating_menu'>
<ul>
  <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'> 
<a href='/'><img alt='Home' border='0' src='http://4.bp.blogspot.com
/-EjgIhPH-_8k/T2X5jYfOJZI/AAAAAAAABmw/yA1YFlwMqRU/s1600/home.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>

Edit Menu 1- 5 dan Home tidak usah di edit.


Floating Menu Minimalist Style


Simpan kode dibawah 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;}

Ganti 970px dengan ukuran blog sobat. Untuk mendeklarasikannya, simpan kode ini di bawah </head>
 
<!-- Floating Menu-->
<div id='ki_floating_menu_black'>
<ul>
  <li style='border-left:1px solid #555'><a href='/'> 
<img alt='Home' border='0' src='http://2.bp.blogspot.com/-
kodysCW2shE/UXjGba74koI/AAAAAAAAD7I/wm2vEcaWIxo/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>

Demikian tutorial memasang Menu Floating keren Untuk blog Semoga bermanfaat, jika sobat kesulitan silahkan sampaikan lewat kolom komentar di bawah ini, Salam haris715 jangan lupa berkunjung lagi lain waktu ya :)
Description: 2 Menu Floating keren Untuk blog
Rating: 4.5
Reviewer: haris rati
ItemReviewed: 2 Menu Floating keren Untuk blog

0 komentar:

Post a Comment

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Mohon Berkomentarlan dengan baik sesuai dengan tema / isi posting di atas
Serta tidak mengandung PORNO,SARA,KATA2 KASAR DAN JOROK
Terima kasih atas perhatianya :)