Tutorial : Float Navigation (ver2)

  Assalamualaikum & Annyeong haseyo readers!! Semalam, cik Adam Faiz request tuto :

Maksudnya, yang ni :

Comel kan? Actually, Nana dapat tutorial ni dari bestie , Riiri. So, i credit to her :)

Jom mulakan sesi pembelajaran!!!

Pergi > Layout > Add a gadget > html/javascript. Then copy kod di bawah :

<div style="position:fixed; top:100px;right:110px;width:100px; color:#aaa;">
<style>
.navis {cursor:Pointer;width:72px; display:inline-block; text-align:center; margin-left:-30px; padding:2px;text-transform: uppercase; font-family:tinytots; font-style:normal; font-size:8px; color: #333; background: #F6E6FF; padding-left:15px; padding-right:15px; border-radius:5px; letter-spacing: 2px; }
.navig {cursor:Pointer;width:72px; display:inline-block; text-align:center; margin-left:-30px; padding:2px;text-transform: uppercase; font-family:tinytots; font-style:normal; font-size:8px; color: #333; background:#F3FFE6; padding-left:15px; padding-right:15px; border-radius:5px; letter-spacing: 2px; }
.navih {cursor:Pointer;width:72px; display:inline-block; text-align:center; margin-left:-30px; padding:2px;text-transform: uppercase; font-family:tinytots; font-style:normal; font-size:8px; color: #333; background:#E6F4FF; padding-left:15px; padding-right:15px; border-radius:5px; letter-spacing: 2px; }
.navil {cursor:Pointer;width:72px; display:inline-block; text-align:center; margin-left:-30px; padding:2px;text-transform: uppercase; font-family:tinytots; font-style:normal; font-size:8px; color: #333; background:#FFE6E6 ; padding-left:15px; padding-right:15px; border-radius:5px;letter-spacing: 2px;  }
@font-face{font-family:tinytots;src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf')}
</style>
<div style="width:250px;  top:70px; left:70px;">
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img src="link gambar" style="border-bottom-left-radius: 99px; border-bottom-right-radius: 99px; border-top-left-radius: 99px; border-top-right-radius: 0px; border: 1px dashed #aaa ;!important; height: 100px !important; opacity: 0.9; padding: 4px !important; width: 100px !important;" /></div>
<a class="navis" href="link page" title="About me">Owner</a>
<a class="navig" href="link page" title="for you">Freebies</a>
<a class="navih" href="link page" title="Tuto">Tutorial</a>
<a class="navil" href="link page" title="exchange">Link</a>
<br /><img src="http://applepine.chu.jp/icon/sen/tenki10.gif" /> <img src="http://applepine.chu.jp/icon/sen/tenki11.gif" /> <img src="http://applepine.chu.jp/icon/sen/tenki12.gif" /></div>
<br /></div>

Pink - Boleh tukar kod warna pilihan korang

Merah - Letak link gambar pilihan korang

Biru - Link page korang

Hijau - Boleh tukar ikut selera sendiri jika nak

SIAP SEMUA?? SAVE KALAU TAK ADA ERROR ^_^

NOTE: NO RE-TUTO!! KALAU NAK CREDIT ME OR RIIRI !!! & kalau dah guna & berhasil tu jangan berat tangan untuk komen ye ... :')

*Oh ye, korang nak blog yang comel, cantik & kemas tapi malas tak tahu cara nak edit blog? Nana ada sediakan tempahan edit blog, header & footer. Berminat? Boleh pm Nana kat SINI

Tag: Tutorial