Cara membuat menu di atas Header

One Trating - Halo para pemirsa, ini One Trating mau share cara bikin menu di atas header, untuk gk lama-lama silahkan ikuti langkahnya perikut ini.
berikut tutorialnya :
1. Login Ke Blogger.... lalu ke Menu Edit Html
2. Copykan Script berikut ini, di atas
]]></b:skin>



/*-- (mta bar) --*/
#mta_bar{background:
#000; border-bottom:2px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:7px; padding-bottom:4px;z-index:10000;opacity: 0.9;filter: alpha(opacity: 90);}
* html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}
#mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:13px; font-weight:bold; font-style:normal; color:
#FFFFFF; width:65%}
#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:13px; font-weight:normal; font-style:normal; color:
#FFFFFF; width:20%}
#mta_bar .right{font-family:verdana,Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap}
#mta_bar .right a{font-size:10px; color:
#FFFFFF; text-decoration:none}
#mta_bar .right a:hover{font-size:10px; color:
#80ff00; text-decoration:none}
#left_bar a{background:url('http://2.bp.blogspot.com/-pr01QT9b2w8/Ti1ef-IO6oI/AAAAAAAAAbo/rGhJNX_bYWE/s1600/FaceBook.png') no-repeat; text-decoration:none; color:#FFFFFF; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:0}
#left_bar a:hover{text-decoration:none; color:
#80ff00}
#left_bar2 a{background:url('http://2.bp.blogspot.com/-pr01QT9b2w8/Ti1ef-IO6oI/AAAAAAAAAbo/rGhJNX_bYWE/s1600/FaceBook.png') no-repeat 2px; text-decoration:none; color:
#FFFFFF; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0}
#left_bar2 a:hover{text-decoration:none; color:
#80ff00}
#to_top{background:transparent url(http://3.bp.blogspot.com/-zUzpsRKiQTQ/Ti1enQhottI/AAAAAAAAAbs/-eK3oHJytbI/s1600/delete.png) no-repeat scroll 0%; position:absolute; /*this replaces float - fixes thanks to blognya anak bone ofhttp://iananakbone.blogspot.com*/height:18px; width:19px; margin:0 0 0 900px; /*this was updated*/padding:9px 5px}
#anima_sudut2 a:link {
color:
#000000;
}
#anima_sudut2 a:visited {
color:
#FFFFFF;
text-decoration:none;
}
#anima_sudut2 a:hover {
color:
#000000;
}
#to_top a{padding:8px}
a.tip {position:relative}
a.tip span {
display:none;
padding:5px;
z-index:100;
background:
#000;
color:
#fff;
text-decoration:none;
width:200px; /* lebar tooltip */
height:auto;
-moz-border-radius:2px;
-webkit-border-radius:2px
}
a:hover.tip {
font-size:99%;
cursor:pointer
}
a:hover.tip span {
display:block;
position:absolute;
-moz-opacity:0.7;
opacity:0.7;
top:-40px;
left:auto;
right:-2px;
bottom:auto;
line-height:14px;
font-size:12px;
font-weight:normal;
}
.menu{
border:none;
border:0px;
margin-left:35px;
padding:0px;
font-size:13px;
}
.menu ul{
background:
#000000;
height:2px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:
#000000;
color:
#80ff00;
display:block;
font-weight:normal;
line-height:30px;
margin:0px;
padding:0px 10px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background:
#212121;
color:
#80ff00;
text-decoration:none;
}
.menu li ul{
background:
#000000;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:180px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:180px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:30px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:
#212121 center left no-repeat;
border:0px;
color:
#80ff00;
text-decoration:none;
}
.menu p{
clear:left;
}



Catatan :
*Kode warna
merah adalah kode warna. Silahkan sesuaikan dengan keinginan anda.
*Kode warna
hijau berfungsi untuk membuat warna kelihatan transparant. Anda bisa menghapusnya atau membiarkannya.
*Sedangkan yang berwarna
kuning adalah alamt url gambar. Silahkan sesuaikan dengan kebutuhan dan keinginan anda.

3. Masukan kode pemanggilan JavaScript atau JS dibawah ini, letakan diatas kode
</head>

<script src="http://strip-ads.googlecode.com/files/strip-ads-versi2.js" type="text/javascript"></script>

atau menggunakan alamat Javascript yang sudah kamu uploud

<script src="
http://alamat file javascript kamu.js" type="text/javascript"></script>


4. Letakan kode dibawah ini dibawah kode
<body>, kalau gak dapat kode head karna keseringan utak atik template agan2 bisa simpan code dibawah tepat dibawah </head> Silahkan sesuaikan setingan dibawah dengan link dan deskripsi kamu sendiri.

<div id='mta_bar'>
<div id='left_bar2'>
<span class='left'>
<a href='
http://www.facebook.com/group.php?gid=122363254474410' target='_blank'>Login to Facebook</a></span></div>
<div id='left_bar'>
<span class='center'><a href='
http://www.facebook.com/pages/PTC/102804353116237' target='_blank;'>Suka dengan bisnis online ?? ayo join dengan PTC facebook sekarang !!!</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;o-om.com.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='
http://lh4.ggpht.com/_QfufFNlfNgs/TEFGnF1yYBI/AAAAAAAAADM/d659lgBAzSI/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>
 
somaga bermanfaat ^^.

0 komentar:

Posting Komentar