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>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>

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.