Chat here,darling.

Tuesday, December 24, 2013

Tutorial : Floating Navigation ver 1



Thanks to unknown for this tutorial.
Click here first !
1. Log in > Dashboard > Layout > Add a Gadget > HTML/JavaScript.

<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>
Merah: URL gambar
Biru : Link
Hijau : Title. Tukar ikut citarasa masing-masing ;)

Dah siap, save. :D
 

No comments: