Tutorial / Freebies Navigation with Hover

1. Design > Edit HTML
2. Ctrl + F :

/* Content
----------------------------------------------- */
3. Copy one of the navigation code below and paste after the code in the second step.
4. Save Template.
5. Design > Page Element > Add a gadget > HTML/Javascript
6. Copy code below :
<a id="naviblog" href="LINK" title="TITLE">TITLE</a>
7. Paste in HTML/Javascript space. Change where necessary.
8. Save.
Navigation #1
before
after
#naviblog {
font-size: 10px;
letter-spacing: 1px;
line-height: 150%;
text-align:left;
color: #aaa;
padding-left:18px;
text-decoration: none;
border-bottom: 1pt solid #A9E2F3;
color: #CEECF5;
background:#ffffff;
display: block;text-transform: ;
}
#naviblog:hover {
letter-spacing: 2px;
background: #F6CEF5;
color: #aaa;
}
Navigation #2
before
after
#naviblog {
display:table-cell;
vertical-align: middle;
height:55px;
margin:-1px;
border-left:1px solid #ffffff;
padding:4px 6px 5px 5px;
color: #ffffff;
background: #000;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
transition: all 0.9s ease;
}
#naviblog:hover {
border-left:3px solid #ffffff;
color: #000000;
background: #BDBDBD;
-moz-border-radius: 0px 0px 70px 70px;
-webkit-border-radius: 0px 0px 70px 70px;
border-radius: 0px 0px 70px 70px;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
transition: all 0.9s ease;
}
Navigation #3
#naviblog {

display:table-cell;
vertical-align: middle;
height:55px;
margin:-1px;
border-left:1px solid #ffffff;
padding:4px 6px 5px 5px;
color: #ffffff;
background: #bdbdbd;
border-bottom-left-radius: 70px;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
Navigation #4
#naviblog {

display:table-cell;
vertical-align: middle;
height:55px;
margin:-1px;
border-left:1px solid #ffffff;
padding:4px 6px 5px 5px;
color: #ffffff;
background: #bdbdbd;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 70px;
border-top-right-radius: 0px;
border-top-right-radius: 0px;
Navigation #5
For navigation #5, no need step #1-6. Just go to Design > Add a Gadget > HTML/Javascript > Paste > Save
<a href="LINK" title="Linkies">
<img src="IMAGE URL 1"
onmouseover="this.src=&#39;IMAGE URL FOR HOVER&#39;"
onmouseout="this.src=&#39;IMAGE URL 1&#39;" /></a>
 Navigation #6
before
after
.button2
{height:45px;
font-size:10px;
float:left;
text-align:center;
padding-top:-10px;
moz-border-radius:0px 0px 30px 30px;
border-radius:0px 0px 30px 30px;
-webkit-transition: opacity 0.5s linear;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;
opacity:1;}
.button2:hover
{padding-top:25px;
moz-border-radius:0px 0px 50px 50px;
border-radius:0px 0px 50px 50px;}


#button1
{float:left;
width:30px;
color:#3a3a3a;
background-color:#A9E2F3;}


#button1:hover
{color:#81BEF7;}

S/N : For navigation #6, copy code below and paste at Design > Page Elements > Add a Gadget > HTML/Javascript space
<a href="/p/vvip.html"><div id="button1" title="VVIP" class="button2"></div></a>

22 comments:

  1. Assalamualaikum. Akak Nabila,.. Macane nak buat navigation macam kat blog akak ni ?

    ReplyDelete
  2. nabilah, camne nak tmbah navigation box dkat blog? akak guna blogskin.

    ReplyDelete
    Replies
    1. Try tutorial Qay ;
      http://qsstory.blogspot.com/2011/10/tutorial-navigation-like-meh.html (:

      Delete
  3. kak nabilla... bole gak saya minta di pasangin di blogger saya? hehe
    saya gak tau cara pasangnya ^.^
    hehe

    ReplyDelete
    Replies
    1. kamu mahu saya pasanginnya di blog kamu ? boleh :)

      Delete
  4. Kakak ! Aimi follow kakak :3 Follow balik tau ! ^^

    ReplyDelete
  5. Kak Nabilah, kita guna ok tuto ni. Thanks sudi ajar *bow ^^

    ReplyDelete
  6. guna navi 6# tpi npe warna dye sama je? kenapa xbeza eh? mmg cmtuh yer?

    ReplyDelete
  7. akak,, kenapa sy buat navi yang #5 tak jadilah??

    ReplyDelete

I don't approve harsh comments (: