Hafiz Zulkafly

Tutorial : Navigation With Hover #8

Sunday, August 04, 2013

Assalamualaikum & Salam Sejahtera

Yoo selamat petang . Hari ni nak share dengan korang  satu lagi tutorial navigation yang baru sekejap tadi buat . Biasa biasa je navigation kali ni. tak gempak macam yang lain punya . Sebab aku ni memang tak creative . So tak pandai nak buat gempak gempak punya . HEHE . Meh intai dulu macam mana rupa navigation baru ni ;



Haa . itu macam lah navigation baru yang aku buat . Berminat nak pakai ? Nah codenya ;

a) Template Designer > Layout > Add A Gadget > HTML / JavaScript
b) Classic Template > Template .


<style>
.alone a{
display:inline-block;
width:60px;
margin:2px;
text-align:center;
color:#fff;
font:9px consolas;
letter-spacing:1px;
text-transform:uppercase;
font-weight:bold;
padding:10px 5px 0px 5px;
height:0px;
overflow:hidden;
text-decoration:none;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.alone a:hover {
padding:1px 5px 10px 5px;
height:0px;
}
</style>
<center>
<div class="alone">
<a href="PASTE YOUR LINK HERE" style="background:#efa784;">About</a>
<a href="PASTE YOUR LINK HERE" style="background:#ef848c;">Tutorial</a>
<a href="PASTE YOUR LINK HERE" style="background:#ef84c8;">Affiliate</a>
<a href="PASTE YOUR LINK HERE" style="background:#cd84ef;">Facebook</a>
<a href="PASTE YOUR LINK HERE" style="background:#a17de2;">Twitter</a>
<a href="PASTE YOUR LINK HERE" style="background:#8784ef;">Blogskins</a>
<a href="PASTE YOUR LINK HERE" style="background:#84b9ef;">Tumblr</a>
<a href="http://www.blogger.com/follow-blog.g?blogID=$blogID$" target="_blank" rel="nofollow" style="background:#84efc0;">+Follow</a>
</div>
</center>


Mana mana yang patut atau korang rasa nak ubah , sila lah ubah ye . Btw kalau nak guna , wajib komen dahulu ye . Kemudian pada mana mana yang tak paham atau tutor ni tak menjadi sila inform. Okay ? Kbai o/

12 comments

© 2017 HAFIZ ZULKAFLY ALL RIGHTS RESERVED