Tutorial : Navigation ala-ala blogskin

 

Nampak gambar di atas ? Simple kan ? Nak yang macam ni tak? 

Kalau nak jom buat. Click here first !

Template Designer.

1. Log in > Dashboard > Add a Gadget > HTML/JavaScript

<style>
@font-face {font-family:tt;src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');}
.mhz {width:200px;padding:5;border:1px solid #f2f2f2;}
.peace{ width:200px;-webkit-transition:900ms;}
#yes{ position:absolute;margin-top:-60;margin-left:5px;-webkit-transition:All 0.4s ease;-moz-transition:All 0.4s ease;-o-transition:All 0.4s ease;background:white;width:201px;text-align:center;color:#000;text-transform:uppercase;font-size:8px;font-family:tt;padding-top:2px;padding-bottom:2px;letter-spacing:1px;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;-webkit-transition:500ms;}
.icon2:hover #bias{opacity:1;-moz-transition: 0.5s;-webkit-transition: 0.5s;}
.nav { display:inline-block; width:35px; text-align:center; background:#f2f2f2;padding-top:2px;border:1px solid #e6e6e6;margin:2px;}
</style>

<center><div class="peace">
<img class="mhz" src="URL IMAGE KAUORANG" /><div id="yes">
<a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a></div>
</div>

2. Dah copy ? Pastelah dekat HTML/JavaScript.

Yang bold tu, ikut keselesaan kauorang. Kod Warna


Classic Template.

1. Dashboard > Template > Edit HTML/JavaScript

Tekan CTRL + F serentak. Search perkataan di bawah.

</style>

Dah jumpa? Copy code di bawah..

@font-face {font-family:tt;src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');}
.mhz {width:200px;padding:5;border:1px solid #f2f2f2;}
.peace{ width:200px;-webkit-transition:900ms;}
#yes{ position:absolute;margin-top:-60;margin-left:5px;-webkit-transition:All 0.4s ease;-moz-transition:All 0.4s ease;-o-transition:All 0.4s ease;background:white;width:201px;text-align:center;color:#000;text-transform:uppercase;font-size:8px;font-family:tt;padding-top:2px;padding-bottom:2px;letter-spacing:1px;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;-webkit-transition:500ms;}
.icon2:hover #bias{opacity:1;-moz-transition: 0.5s;-webkit-transition: 0.5s;}
.nav { display:inline-block; width:35px; text-align:center; background:#f2f2f2;padding-top:2px;border:1px solid #e6e6e6;margin:2px;}
<center><div class="peace">
<img class="mhz" src="URL IMAGE KAUORANG" /><div id="yes">
<a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a> <a class="nav" href="LINK">LINK</a></div>
</div>

Dah siap :) Save . Jangan lupa preview.

Back to Tutorial