Assalamualaikum Warahmatullahi Wabarakatuh...

Setelah sekian lama saya tidak membuat tutorial berkaitan tips-trik blog kerana asyik melayan tutorial photoshop jer kebelakangan ni, jadi pada hari ini saya akan kongsi satu lagi tutorial bagi menghiasi blog anda dengan widgets rollover.

Widget rollover ni macam yg korang dapat lihat pada bahagian sebelah kiri blog wa ni la, ya My Dream tu lah. cuba arahkan kursor kepada gambar My Dream tu anda akan lihat gambarnya akan bertukar kepada My Gear.

Cara nak buatnya tidaklah terlalu susah. Jadi tak perlulah korang nak berhempas pulas nak mencipta code tersebut, korang just copy and paste jer codenya nanti cuma ubah sebahagian kecilnya sahaja.

OK... Kita mualakan.

1. Sediakan 2 gambar yang berbeza. Ikut kreativiti dan idea korang la gambar apa yang nak taruk. Kedua-dua gambar tadi hendaklah di simpankan/diuploadkan ke mana2 hosting yang ada direct URL seperti imageshack, photobucket atau apa-apa ajer la.

2. Login ke blogger.com

2. Klik Layout --> Add a Gadget --> HTML/Javascript

3. Copy code di bawah dan pastekan pada kotak Content.

<center>
<script type="text/javascript">
<!--
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)

{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)

{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</script>

<a onmouseover="rollover('home')" onmouseout="rollout('home')"

href="rollover_target.html"><img border="0" alt="Home Page" width="90%" src="http://img695.imageshack.us/img695/1709/img1w.jpg"
name="home" height="90%"/></a>
<script type="text/javascript">
<!--

setrollover("http://img710.imageshack.us/img710/8638/img2ap.jpg");
//-->
</script>
</center>

4. Anda perlu ubah link yang berwarna biru dan link yang berwarna merah kepada link (direct link) imej anda sendiri.

5. Kemudian Save. Dah selesai.