Tutorial : Navigation on Image

Assalamualaikum & Salam Sejahtera

Yoo . setelah sekian lama tak buat tutor , finally coming back with the new tutorial . haha . ayat poyo . okay , tutorial ni di request oleh Aisha . tak caya ? meh tengok sini ;

Ha percaya tak ? dia request lama dah . tapi sekarang baru ada masa nak buat . thanks sudi request tutor . huhu . actually , aku dah tak pakai navigation tu . so meh tengok live preview dia acano navigation tuh . Okay . tu lah navigation yang aku pernah pakai sebelum ni . perasan tak ? okay . nak cuba . jom nak tolong ajar kan .


Template Designer 

Dashboard > Layout > Add a Gadget > HTML/JavaScript .

Copy and paste code bawah ni .

<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="http://i.imgur.com/lg7Hu.jpg" /><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>

save and preview .


Classic Template

Dashboard > Template > Edit HTML

Copy code bawah ni , paste dekat ATAS </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;}

Kemudian , code bawah ni , korang boleh paste dekat mana mana tempat yang korang nak .

<center><div class="peace">
<img class="mhz" src="http://i.imgur.com/lg7Hu.jpg" /><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>

Save and Preview .

Siap . semudah ABC kan ? hahaha . yang mana BOLD kan tu , ubah ikut cita rasa korang . termasuk lah dengan code warna , okay . selamat mencuba . kalau nak cuba , komen komen lah entry ni . kalau menjadi bagitau , kalau tak menjadi pon , bagila tau . insyaallah , aku akan cuba tolong . kbai o/

P/S ; UNTUK CODE MARGIN-BOTTOM : -60 , KORANG KENA PANDAI ADJUST SEBAB DIA BERUBAH RUBAH MENGIKUT SIZE BACKGROUND GAMBAR YANG KORANG LETAK.