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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm1UPeyL9_ivgViHtcOtRso4HbhPR1xUlpyKSpXC3Yj3eJtVU2S-jOb2U9vnzjUbI5eGr9aZ9exiI7bRVgBQOLU6xfFc9ZuU2wcnyppD5eE6DLCeh7RQ7YgFvg5D7yVrjoMy8e_0vpkMY/s1600/arnab+comel+cute+pic.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm1UPeyL9_ivgViHtcOtRso4HbhPR1xUlpyKSpXC3Yj3eJtVU2S-jOb2U9vnzjUbI5eGr9aZ9exiI7bRVgBQOLU6xfFc9ZuU2wcnyppD5eE6DLCeh7RQ7YgFvg5D7yVrjoMy8e_0vpkMY/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.

Ulasan

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

macam x tau plak..update blog bagi hilang tekanan buat tesis...terapi terbaik nie..hahaa
NFA berkata…
nk try nanti. thanksssss !
(:
Taufiq Tiramisu berkata…
Tutorial yang menarik..hehe..keep it up bro!
julietdeorange berkata…
kalau nak bagi gerak kanan kiri camane pulak? ada cara tak?
Azuan berkata…
@julietdeorange

maksudnya apa..bergerak dari kanan ke kiri ke..huhu
Qib berkata…
gerak camne eh.. xpahamm le. nk try tp x tauuu le
Unknown berkata…
Mcm mana nak buat? X paham r