Tutorial : Mini Navigation

Friday, August 02, 2013

Assalamualaikum & Salam Sejahtera

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/

4 comments:

  1. emm knape saye try buat , tapi tk jadi bulat ~ jadi kotk . hmm

    ReplyDelete
    Replies
    1. errmmm , macam mana bole jadi kotak ? awak pakai template apa ?

      Delete
  2. i'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 !

    ReplyDelete

© 2017 HAFIZ ZULKAFLY ALL RIGHTS RESERVED