--> Skip to main content

follow us

DATA COVID-19 INDONESIA

😷 Positif:

😊 Sembuh:

😭 Meninggal:

(Data: kawalcorona.com)

cara pasang menu navigasi slider di blog

Sahabat menu sahabat ingin sedikit nyentik alias menarik dengan latar potto menu transparan
bisa
menu navigasi slider....
ok langsung ajja TKP
sahabat setelah log in
langsung ke tample dan ediet HTML sahabat
pertama sahabat temukan kode <b:skin>..<b:skin> lalu klick
setelah itu sahabat cari kode ]]</b:skin>
untuk mempermudah ya seperti biasa F3 atau CTRL+F
lalu pasang kode di bawah ini tepat di atasnya. kode di atas




ul#navigation {
position: fixed;
margin: 0;
padding: 0;
top: 0;
left: 25%;

list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#E7F2F9;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .home a{
background-image: url(http://cilimoes-file.googlecode.com/files/cilimoes-home.png);
}
ul#navigation .about a {
background-image: url(http://cilimoes-file.googlecode.com/files/cilimoes-about.png);
}
ul#navigation .search a {
background-image: url(http://cilimoes-file.googlecode.com/files/cilimoes-home.png);
}
ul#navigation .podcasts a {
background-image: url(http://cilimoes-file.googlecode.com/files/cilimoes-home.png);
}
ul#navigation .rssfeed a {
background-image: url(http://cilimoes-file.googlecode.com/files/feed.gif);
}
ul#navigation .photos a {
background-image: url(http://cilimoes-file.googlecode.com/files/Photo.gif);
}
ul#navigation .contact a {
background-image: url(http://cilimoes-file.googlecode.com/files/kontak-me.gif);
}

setelah itu sahabat temukan kode </head>
dan pasrekan kode di bawah ini  tepat di atas kode tersebut di atas

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>


setelah itu temukan kode <body>
dan tempelkan kode di bawah ini tepat di bawahnya

<ul id="navigation">
<li class="home"><a href="http://desalinggarjati.blogspot.com"><span>Home</span></a></li>
<li class="about"><a href="#"><span>About</span></a></li>
<li class="search"><a href="#"><span>Search</span></a></li>
<li class="photos"><a href="#"><span>Photos</span></a></li>
<li class="rssfeed"><a href="#"><span>Rss Feed</span></a></li>
<li class="podcasts"><a href="#"><span>Podcasts</span></a></li>
<li class="contact"><a href="#"><span>Contact</span></a></li>
</ul>

dan yang terakhir sahabat, tinjau terlebih dahulu bila g ada yang eror sahabat
langsung save
silahkan sahabat tinggal ganti url sahabat di masukan sesuka sahabat melatakan URLnya

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar