Hai korang . Hari ni nak bagi tutorial mini navigation yang mungkin sesuai untuk korang letak dekat sidebar korang (mungkin) sebab size navigation ni tak besar atau panjang mana . Dah nama pon mini kan . HAHA . Macam mana preview dia boleh tengok bawah ni ;
Okay macam tu ya mini navigationnya . Taktau lah sesuai tidak untuk letak dekat sidebar . Haha . ni codenya ;
1. Dashboard > Template > Edit HTML . Copy code bawah ni . Paste dekat BAWAH code <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>
2. Save . Copy and Paste code dibawah ni dekat Layout > Add a Gadget > HTML / JavaScript (Bagi pengguna Template Designer) . Untuk Pengguna Classic Template boleh paste dekat Template > Edit HTML .
<style>
.mini a{
display:inline-block;
width:15px;
background:#fff;
text-align:center;
color:#fe9a9a;
font:15px arial;
padding:3px 5px 5px 5px;
margin:5px 1px 5px 1px;
border-radius:100px;
text-decoration:none;
border:4px double #fe9a9a;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.mini a:hover {
border:4px double #fff;
background:#fc5d70;
color:white;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
#s-m-t-tooltip {
background:#fdabab;
font:9px cambria;
letter-spacing:1px;
text-transform:uppercase;
font-weight:bold;
color: #fff;
border-radius:3px;
text-align: center;
padding: 5px 10px 5px 10px;
display: block;
margin: 20px 14px 7px 12px;
}
</style>
<div class="mini">
<center>
<a href="PASTE YOUR LINK HERE" title="About">★</a>
<a href="PASTE YOUR LINK HERE" title="Tutorial">★</a>
<a href="PASTE YOUR LINK HERE" title="Facebook">★</a>
<a href="PASTE YOUR LINK HERE" title="Twitter">★</a>
<a href="http://www.blogger.com/follow-blog.g?blogID=$blogID$" target="_blank" rel="nofollow" title="Follow">★</a>
</center>
</div>
3. Tukar mana yang patut . Kemudian save and preview .
Kalau ada apa apa error , sila lah bagitahu ye . Kalau tak paham apa apa pon , boleh tanya . Mana yang boleh tolong , aku akan tolong . Okay ? Kbai o/
emm knape saye try buat , tapi tk jadi bulat ~ jadi kotk . hmm
BalasPadamerrmmm , macam mana bole jadi kotak ? awak pakai template apa ?
PadamTyvm !
BalasPadami've looking for so long this kind of navigation. boleh tak nak request awak buat tutorial yang besar nye lak..hiii..anyway thanks so much for the tuto !
BalasPadam