Sabtu, 29 Januari 2011

Tutorial : Macam Mana Nak Buat Link/Gambar Bergerak-Gerak

salam. ini merupakan tutorial yang senang dan mudah tapi kena rajin. hehe. kalau malas semua benda tak jadi, sebab itulah tesis aku tak gerak-gerak lagi. hakhak.

- arnab comel -



ok. tutorial kali nie nak ajar buat gambar/link bergerak-gerak macam kat atas nie. kacang aje tutorial nie, lagi mudah dari tanam kacang tue sendiri. wakaka.

  • mula-mula pergi ke design > edit html > klik expand widget template

  • masukkan link kat bawah nie sebelum kod </head>



<!--DANCING-NUDGE-LINKS-STARTS-->
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.nudge&#39;).hover(function() { //mouse in
$(this).animate({ paddingLeft: &#39;20px&#39; },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>
<!--DANCING-NUDGE-LINKS-STOPS-http://bloggerstop.net-->


  • Preview dan save template korang.
  • seterusnya, Masa korang nak post entri tue buka bahagian Edit HTML.
  • Cari la HTML untuk gambar tersebut, dan masukkan code HTML nie class="nudge" kat dalam HTML gambar tue. tengok contoh bawah, lagi senang nak faham.

Nie contoh HTML gambar korang ( cari la dalam bahagian edit HTML tue ! )




<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a class="nudge" href="http://1.bp.blogspot.com/_aKdrkMZguCU/TUK5FOUpeCI/AAAAAAAAByg/9Zr9dGd6Ii4/s1600/arnab+comel+cute+pic.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="300" src="http://1.bp.blogspot.com/_aKdrkMZguCU/TUK5FOUpeCI/AAAAAAAAByg/9Zr9dGd6Ii4/s400/arnab+comel+cute+pic.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">- arnab comel -</td></tr>
</tbody></table>


nie la tempat yang korang patut masukkan kode HTML tue ( yang color biru ) .

  • korang dah boleh teruskanlah entri korang tue dan preview untuk tengok hasil. 
  • tutorial nie bukan untuk gambar sahaja, link pun boleh dan bukan untuk entri sahaja. asalkan ada gambar dengan link, korang boleh dengan gembiranya applykan tutorial nie. selamat lebih maju dalam dunia blogging. hohoo.

11 ulasan:

FarhanaDr berkata... Reply to comment

Memang rajen tahap terlampau ni.. Bape kali update sehari.. Kalau laa rajen macam ni wat tesis, mesti siap dah kan.. :p

Azuan berkata... Reply to comment

@FarhanaDr

macam x tau plak..update blog bagi hilang tekanan buat tesis...terapi terbaik nie..hahaa

CIK FAFAZ berkata... Reply to comment

nk try nanti. thanksssss !
(:

Taufiq Tiramisu berkata... Reply to comment

Tutorial yang menarik..hehe..keep it up bro!

Azuan berkata... Reply to comment

@CIK FAFAZ

cuba3..

Azuan berkata... Reply to comment

@Taufiq Tiramisu

okies..

julietdeorange berkata... Reply to comment

kalau nak bagi gerak kanan kiri camane pulak? ada cara tak?

Azuan berkata... Reply to comment

@julietdeorange

maksudnya apa..bergerak dari kanan ke kiri ke..huhu

MasyitahHassan berkata... Reply to comment

@Azuan
wahh menjadii

PinQib berkata... Reply to comment

gerak camne eh.. xpahamm le. nk try tp x tauuu le

Erul JanEe berkata... Reply to comment

Mcm mana nak buat? X paham r