1. Login pada blog sobat
2. Tata Letak
3. Tambah Gadget
4. Html / Javascript
5. Copy kode di bawah ini dan pasang di blog sobat
<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 90px;
height: 25px;
background-color:#eeeeee;
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.96;
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;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIdgRWh1JQRwPk6mtXTO0Hs00XqbqiVx3ia47mnD-Yeuow2pV0JOEPbkXqvASd6TkLqVBz94ugmWgFnLDFeoEOoKRZy3kKbXpx673PFwEmkc9PZAnRwP3Z_ucxhoXQmpD9StAwtCnGNNd/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMgdf6OoIMaCR9DeJBBA4p7zfgqCbFQRF_6obahcx-RCgOi7ewr4R5sHElgrR1Px1cbPZS0mxnTGX9rLQobZBmALnYd64HqgfkZs2H20mK6JJ2V4BMjQ-LbkpjPZ9xHVRF7TBwUR_LoQCg/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjobc6-v4CrbGAy4bzL_ex1PZrPoNpoS3u4X4QBMnZjjqGu9EVgU2Iv6DoCLhJgzxacyImeffSjyB4L-8qvALf5wNvzHHOAU4uY89-jZ2bSHiO8hkWfgxJY4GW5AAmjTF170GTLzZQE5dzG/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZqgK1n74a6KOYUSiSxDpQl8EXPCxuLBfHJe1BtwW-Rou5EfT-RNlWaYenfUg_0Dt97maV4M1viwdiS9qflKehvKHikJBcfyb1VqM81eKq-5dIMeDt_iiUndOSuyYj-29TqL4zSGpoxUIm/s400/google_64x64.png);
}
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
</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>
<br />
<ul id="navigation">
<li class="rss"><a href="http://Blog Kamu.blogspot.com/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="http://Ganti Dengan Url Akun Facebook Kamu">Facebook</a></li>
<li class="twitter"><a href="http://Ganti Dengan Url Akun Twitter Kamu">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
</ul>
Selamat Mencoba!!!
gan pasang widgetnya di bagian mana
ReplyDeletedimana saja boleh sob, tapi jangan pakai judul
DeleteTak cobanya dulu gan...
ReplyDeletegimana cara ngatur posisinya gan???
ReplyDeleteagan mau posisi dimana? tapi gabisa gan. Posisi yang bisa hanya di atas . .
Deletedi kanan atas
Deleteposisinya ga bisa di ubah ya mas,,
ReplyDeletekeren mas :)
ReplyDeletethanks ya , Blogwalking ^^ saktianjrs.blogspot.com
bagus bgt dh sy cara2 diatas brhasil, tp sy mau nanya gan, knp jd g bsa meng-klik "New Entry" dan jg "Design"?mhon bntuanx hrus bgmana!
ReplyDeleteBest to try supaya ga terlalu penuh widget di page hehehe, saya coba mods nya yah bro
ReplyDeleteTHX
Boleh d coba nih, makasih mas infonya.
ReplyDeleteMampir mampir ke http://tipsits.blogspot.com