Vertical Navigation Style


PARADISE

Hari ni 2 post dalam sehari. Haha tamak sungguh.
Ok cuba tengok sebelah kiri tu ada navigation yang panjang .

Ok ,navigation ni memang sesuai untuk blog yang ade banyak page. So, letak kat tepi aje . Tak yah nak susah-susah scroll ke atas kan ^^

Ok lets begin!

  • Dashboard > Layout >Add Gadget > HTML/JavaScript 
  • Copy semua code dibawah ye :
<link href="http://fonts.googleapis.com/css?family=Short+Stack" rel="stylesheet" type="text/css"></link>
<style>
#nave { display: inline-block; background-color: #fafafa; text-transform: lowercase; padding: 2px 3px; color: #858382; letter-spacing: 2px;  width: 59px;  margin: 5px; margin-left: 1px; height:15px;text-align: center;font-family: short stack; font-size: 10px; }
#nave a{ display: inline-block;font-family: short stack; font-size: 10px;  padding: 2px 5px; color: #000; letter-spacing: 3px; margin-bottom: 2px;text-decoration:none;}
#nave a:hover{ display: inline-block;font-family: short stack; font-size: 10px;  padding: 2px 5px; color: #fff; letter-spacing: 3px; margin-bottom: 2px;}
#nave:hover {background-color: #BAB8B6; color: #000; -webkit-transition-duration: .90s; -moz-transition-duration: .90s; transition-duration: .90s;-webkit-transform:rotate(360deg);border-radius: 30px;}
</style>
<br />
<div style="background: url(http://static.tumblr.com/bc7znss/XIMm1x07w/tumblr_ls0w5txuft1r3vazto12_r1_100.png); height: 100%; left: 10px; position: fixed; top: 10px; width: 75px;">
</div>
<div style="color: white; left: 15px; position: fixed; text-align: center; top: 60px;">

Ayat Korang</div>

<div style="left: 15px; padding-top: 10px; position: fixed; top: 118px; width: 55px;">
<center>
<div id="nave"><a href="LINK">Home</a></div>
<div id="nave"><a  href="LINK">About</a></div>
<div id="nave"><a href="LINK">Ask</a></div>
<div id="nave"><a href="LINK">tuto</a></div>
<div id="nave"><a   href="LINK">Fb</a></div>
<div id="nave"><a   href="LINK">Twtr</a></div>
<div id="nave"><a   href="LINK">Instg</a></div>
<div id="nave"><a   href="LINK">FS</a></div>
<div id="nave"><a   href="LINK">Follow</a></div>
<div id="nave"><a   href="LINK">Dash</a></div>
</center></div>

  • Warna oren : Warna background
  • Warna hijau : Warna font
  • Warna hitam : Tukar ikut suka anda
  • Warna purple : Background url. Boleh dpt kan di Freebies saye ^^
  • Ok, lepas dah ubah semua. Boleh lah save dan view blog .
  • Jangan lupa komen ye ,kalau jadi. ^^

2 comments

  1. Yura...wat tuto camner nk wat navigation bar mcm kat yura punyer tu...yg kat header tuh...bley??? Trimas yura!

    ReplyDelete

Awak mehla komen? satu komen pun jadilah :')