Langkah pertama yang harus dilakukan sudah pasti kita harus masuk dahulu ke dasbor blogger, kemudian:
1. Klik Tata Letak
2.
Klik Tambah Gadget / Add A Gadget
3.
Pilih Gadget Html/JavaScript
4.
Masukkan kode berikut di dalamnya
<style
media='screen' type='text/css'>
/*----- TOP -----*/
#top {background:#eee; color:#666; font-size:11px; line-height:30px; border-bottom:1px solid #ECEDE8;
opacity:.85;
filter:alpha(opacity=85);
-moz-opacity:.85;
position: fixed;
align: center;
top:0;left:0;
width:100%;
}
#top li a:hover{ background-color:#333; color:#fff; }
/*----- TOP NAV -----*/
.topnav ul li{ margin:0;}
.topnav li { float:left; width:auto; }
.topnav li a { padding:6px 11px; font-size:11px; line-height:16px; border-right:1px solid #ddd; text-decoration:none; }
/* search form */
#search { display:inline; float:right; height:14px; margin:3px 15px 0px 0px; }
#search input { float:left; background:#fff; width:160px; padding:2px 5px 3px 5px; font-family:Arial,serif; font-size:12px; font-style:italic; color:#999; line-height:12px; border:1px solid #ECEDE8; }
#search input:focus { background:#fff; border:1px solid #ddd; }
#search input.btn { background:none; border:none; margin:4px 0px 0px -23px; padding:0px; width:auto; }
</style>
<div id='top'>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<input class='field' id='s' name='q' type='text' value=''/>
<input class='submit btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirZ1_L0LrftkEwjA8vFp4UVWXAzl6_gP3t6tOJ3vWIQzzRv8pFlDjgmI7g6Z-TxRKqzgZvJ_NNKFJ7nwX1q1ywgiU26aQ6TpsjMEyVhLVpmiT2Ed8XT2bf4aRRDqpJ1wYRVm9wrzlhJc0/s1600/iconsearchr.gif' type='image' value='Go'/>
</form>
</div><!--end #search -->
<div class='topnav'>
<ul class='topnav' id='page-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
</ul>
</div>
<div class='clear'/>
</div>
/*----- TOP -----*/
#top {background:#eee; color:#666; font-size:11px; line-height:30px; border-bottom:1px solid #ECEDE8;
opacity:.85;
filter:alpha(opacity=85);
-moz-opacity:.85;
position: fixed;
align: center;
top:0;left:0;
width:100%;
}
#top li a:hover{ background-color:#333; color:#fff; }
/*----- TOP NAV -----*/
.topnav ul li{ margin:0;}
.topnav li { float:left; width:auto; }
.topnav li a { padding:6px 11px; font-size:11px; line-height:16px; border-right:1px solid #ddd; text-decoration:none; }
/* search form */
#search { display:inline; float:right; height:14px; margin:3px 15px 0px 0px; }
#search input { float:left; background:#fff; width:160px; padding:2px 5px 3px 5px; font-family:Arial,serif; font-size:12px; font-style:italic; color:#999; line-height:12px; border:1px solid #ECEDE8; }
#search input:focus { background:#fff; border:1px solid #ddd; }
#search input.btn { background:none; border:none; margin:4px 0px 0px -23px; padding:0px; width:auto; }
</style>
<div id='top'>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<input class='field' id='s' name='q' type='text' value=''/>
<input class='submit btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirZ1_L0LrftkEwjA8vFp4UVWXAzl6_gP3t6tOJ3vWIQzzRv8pFlDjgmI7g6Z-TxRKqzgZvJ_NNKFJ7nwX1q1ywgiU26aQ6TpsjMEyVhLVpmiT2Ed8XT2bf4aRRDqpJ1wYRVm9wrzlhJc0/s1600/iconsearchr.gif' type='image' value='Go'/>
</form>
</div><!--end #search -->
<div class='topnav'>
<ul class='topnav' id='page-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
</ul>
</div>
<div class='clear'/>
</div>
5.
Simpan & Selesai.
Keterangan :
Silakan
ganti tanda pagar (#) dengan link / url halaman yang kamu mau.
Dan gantu tulisan Edit Menu Ini dengan nama menu yang kamu mau.
Dan gantu tulisan Edit Menu Ini dengan nama menu yang kamu mau.
Bagaimana
cara mengganti warna latar menu tersebut?
Pada
kode di atas ada kode #top {background:#eee;
Silakan ganti kode #eee dengan kode warna yang kamu mau, untuk
menemukan kode warna silakan lihat di TABEL WARNA DAN KODE WARNANah itulah tutorial cara membuat menu horizontal yang selalu berada di atas yang bisa saya tuliskan. Selamat mencoba dan semoga bermanfaat.
sumber artikel didapat dari tab
===== SETIAP POSTINGAN AKAN SELALU SAYA SERTAI FOTO SEXY SEBAGAI REFRESH =====
Tidak ada komentar:
Posting Komentar
jika anda suka dengan artikel yang ada di blog ini silahkan tinggalkan komentar di bawah postingan...
Salam BLOGGER