Monday, 17 December 2012

Four navigation style

Yummm….

Assalamualikum dan hai semua....setelah bereksperiment dengan kod akhirnya terhasilah empat style navigation ini... (over pulak)

boleh guna code ni tapi credit taw... penat saya ubah suai code...

This is an updated style on 11 October 2013
For blogskin / classic tempate paste the navigation code  anywhere you want it to appear...for template designer Layout --> Add gadget --> HTML/Javascript 
Live preview Here

Style  number one


<style>
.tablo{
font-size:12px;
color:black;
text-transform:uppercase;
background:#FFF9FA;
font-family:century gothic;
text-decoration:none;
padding:3px;
width: 50px;
display:inline-block;
border:1px solid #FFE3E6;
margin-top: 5px;margin-bottom: 5px;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tablo:hover {
background:#FFC6CF;
color:white;
}
</style>
<center>
<div style="background: #FFEBED;width:260px;border: 2px solid #FFEEEE;margin-bottom:7px; margin-top:7px;box-shadow:0px 2px 2px 2px #ffeeee;border:3px solid #ffffff;">
<a class="tablo" href="http://kawaiilady.blogspot.com/">Home</a>
<a class="tablo" href="http://kawaiilady.blogspot.com/">About</a>
<a class="tablo" href="http://kawaiilady.blogspot.com/">Stuff</a>
<a class="tablo" href="http://kawaiilady.blogspot.com/">Linky</a>
</div>
</center>

Style number two :


<style>
.haha{
width:60px;height:40px;
box-shadow:0px 0px 2px 3px #FFE9C6;
background:#FFF9E1;
font:12px century gothic;
text-align:center;
Text-decoration:none;
color:#888888;
display:inline-block;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
padding-bottom:5px;
padding-top:20px;padding-left:0px;padding-right:0px;
display:inline-block;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
}

.haha:hover{
background:#FFFFFF;
color:#777;
border-top-right-radius: 35px;
-webkit-transform: rotate(-50deg) ;
-moz-transform: rotate(-50deg) ;
-o-transform: rotate(-50deg) ;
-ms-transform: rotate(-50deg) ;
}
</style>
<center>
<a class="haha" href="http://kawaiilady.blogspot.com/">Home</a>
<a class="haha" href="http://kawaiilady.blogspot.com/">About</a>
<a class="haha" href="http://kawaiilady.blogspot.com/">Stuff</a>
<a class="haha" href="http://kawaiilady.blogspot.com/">Linky</a>
</center>

Style number three :


<style>
.lola{
width:51px;height:35px;
padding-top:17px;
text-transform:uppercase;
border: 1px solid #E7F4FF;
background:#EFF8FF;
font:12px century gothic;
text-align:center;
Text-decoration:none;
color:#333333;
display:inline-block;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin:5px;margin-bottom:20px;
display:inline-block;
border-radius: 100%;
}
.lola:hover{
background:#FFFFFF;
color:#FFFFFF;text-shadow:0px 37px 0px #333333;
-webkit-transform: rotate(-360deg) ;
-moz-transform: rotate(-360deg) ;
-o-transform: rotate(-360deg) ;
-ms-transform: rotate(-360deg) ;
}
</style>
<center>
<a class="lola" href="http://kawaiilady.blogspot.com/">Home</a>
<a class="lola" href="http://kawaiilady.blogspot.com/">About</a>
<a class="lola" href="http://kawaiilady.blogspot.com/">Stuff</a>
<a class="lola" href="http://kawaiilady.blogspot.com/">Linky</a>
</center>


Style number 4 :


<style>
.leaf {
width:45px;height:30px;
padding-top:15px;
text-transform:uppercase;
border: 3px solid #E2FFD5;
background:#E8FFE1;
font:11px century gothic;
text-align:center;
Text-decoration:none;
color:#333333;
display:inline-block;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin:3px;
display:inline-block;
border-radius: 100%;
border-top-right-radius:0px;
}
.leaf:hover{
background:#FFFFFF;
color:#000000;
border: 3px solid #E8FFE1;
background:#E2FFD5;
border-top-right-radius:100%;
border-bottom-left-radius:0px;
}
</style>
<center>
<div style="width:240px;padding:5px;background:#FFFCF2;box-shadow:0px 0px 2px 3px #FFF9E7;border:2px solid #ffffff;">
<a class="leaf" href="http://kawaiilady.blogspot.com/">Home</a>
<a class="leaf" href="http://kawaiilady.blogspot.com/">About</a>
<a class="leaf" href="http://kawaiilady.blogspot.com/">Stuff</a>
<a class="leaf" href="http://kawaiilady.blogspot.com/">Linky</a>
</div>
</center>


Kalau dah jadi comment taw... kalau tak jadik pon comment jugak...

23 comments:

  1. Replies
    1. Paste pada code bahagian sidebar...letaklah dimana2 awk nak...kat bawah code cbox pown boleh...

      Delete
  2. tq for sharing..im using it for my blog..really love it..:)

    ReplyDelete
  3. O maygatt!!! Akakk!! AKu ambil satu yee?!!! Kawaii kali!!!

    ReplyDelete
  4. Akak.. Please la.. Aku nak Re-post.. Ye?.. Boleh ye??..
    Pleasee... Ade Credit ..

    ReplyDelete
    Replies
    1. Pandai baca ke tak ni ?! dia cakap HARAM Repost.
      Please appreciate Her work.Dia buat susah-susah.
      Kau main senang copy/Re-post.Walaupun kau letak credit.

      Menyampah tengok golongan macam ni.Kau nak marah ? Looks like I Care ?!
      Aku cakap benda betul.

      Delete
    2. tak pandai baca kau ni -_- hargai lah

      Delete
  5. Wow! Thank you :D I have a question, if i want toput it in the right side how can i do?

    ReplyDelete
    Replies
    1. Add widget (HTML/Javascript) on your blog sidebar section then, copy and paste above code on that section.

      Delete
  6. Thanks kak! Izin ambil tutorial nih ya kak

    ReplyDelete
  7. Saye guna style three ye, Kak. Thanks... ^_^

    ReplyDelete
  8. Comelnye akak buat...nak guna style 2 ye kak..

    ReplyDelete
  9. cara bikin navigasi seperti kamu gimana?

    ReplyDelete
    Replies
    1. http://kawaiilady.blogspot.my/2016/07/navigation-bar-stay-on-top.html

      Delete