Inilah Tutorial Membuat Menu Di Blog .
Pertama kali bikin Blog pasti tampilannnya masih sederhana dan sesuai dengan template bawaan yang kita pilih pertama kali tanpa adanya Menu-Menu maupun Sub menu ataupun yang lainnya.
Sekedar berbagi aja bagi kawan-lawan yang memerlukan script untuk membuat Menu dibawah Header berikut saya tampilkan contoh Scriptnya :
Gbr. menu di bawah header
ikuti langkah-langkah di bawah ini :
1. Setelah login masuk ke dasbor blog anda
2. Pilih gadget yang ada di bawah header
3. Kemudian pilih html/java terus masukkan script di bawah ini ( judul di kosongin aja )
<style>
#menunavigasihorisontal {
background: #848484;
width: 100%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px; }
#bb2nav {
margin: 0;
padding: 0;}
#bb2nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;}
#bb2navli {
list-style: none;
margin: 0;
padding: 0;}
#bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
color: #FFF;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;}
#bb2nav li a:hover, #bb2nav li a:active {
background: #2E9AFE;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;}
#bb2nav li {
float: left;
padding: 0;}
#bb2nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;}
#bb2nav li ul a {
width: 140px;}
#bb2nav li ul ul {
margin: -25px 0 0 161px;}
#bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
left: -999em;}
#bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav
li li li.sfhover ul {
left: auto;}
#bb2nav li:hover, #bb2nav li.sfhover {
position: static;}
#bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;}
#bb2nav li li a:hover, #bb2nav li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
#bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;}
#bb2nav li li li a:hover, #bb2nav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
</style>
<div id='menunavigasihorisontal'>
<ul id='bb2nav'>
<li>
<a href='href='#'>Home</a>
</li>
<li>
<a href='#'>download</a>
</li>
<li>
<a href='#'>komik</a>
</li>
<li>
<a href='#'>Software</a>
</li>
<li>
</ul></li></ul></div>
Tulisan dengan warna merah adalah menu hasil yang akan ditampakkan dibawah header. Terserah agan mau membuat berapa menu sesuai kebutuhannya. Selamat mencoba..!!!!!
Tidak ada komentar :
Posting Komentar
Saya hanyalah manusia biasa, yang tidak lepas dari kekurangan, untuk itu, Saya mengharapkan, Kritik dan Saran Anda di form KOMENTAR dibawah ini, untuk memperbaiki kekurangan yang ada.
Sebagai pribadi yang BAIK, kita harus membudayakan kata-kata yang sopan, baik berupa Kritik atau Saran. Terimakasih :)~