Le' tutos

background change when cursor click

Assalamualaikum :)

okeh , tuto hari ni buat benda macam bawah ni,

fara mintak maaf sebab baru nak buat tuto ni , maaf kepada yang telah lama bertanya cara nak buat benda ni sebab fara tak ada masa, hari ni free so boleh la fara buat ^_^v

#bila korang click automatik dia akan tukar background tu

Classic Template

1) dashboard > template > edit html

2) search this code

</style>

3) paste this code before </style>

#bagie a img{
width:50px;
height:50px;
display:inline;
margin-right:10px;
margin-top:15px;
border: 2px solid #EEE;
}
#bagie a:hover img{
border: 2px solid #bdebff;
}

4) paste this code after </style>

<div id="bagie">
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
$("#bgcolor1").click(function(){
$("body").css({"background":"url(URL GAMBAR 1)"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url(URL GAMBAR 2)"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url(URL GAMBAR 3)"});
});
});
</script>

<center><a href="javascript:void(O)" id='bgcolor1' title="AYAT ANDA"><img src="URL GAMBAR 1" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="AYAT ANDA "><img src="URL GAMBAR 2" /></a>
<a href="javascript:void(O)" id='bgcolor3' title=" AYAT ANDA"><img src=" URL GAMBAR 3" /></a></center></div>
</div>

5) preview and save !

Template designer

1) dashboard > template > editHTML

2) find this code

]]></b:skin>

3) paste this code before code ]]></b:skin>

#bagie a img{
width:50px;
height:50px;
display:inline;
margin-right:10px;
margin-top:15px;
border: 2px solid #EEE;
}
#bagie a:hover img{
border: 2px solid #bdebff;
}

4) dashboard > layout > add gadget > HTML/javascript

5) paste this code

<div id="bagie">
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
$("#bgcolor1").click(function(){
$("body").css({"background":"url(URL GAMBAR 1)"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url(URL GAMBAR 2)"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url(URL GAMBAR 3)"});
});
});
</script>
<center><a href="javascript:void(O)" id='bgcolor1' title="AYAT ANDA"><img src="URL GAMBAR 1" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="AYAT ANDA "><img src="URL GAMBAR 2" /></a>
<a href="javascript:void(O)" id='bgcolor3' title=" AYAT ANDA"><img src=" URL GAMBAR 3" /></a></center></div>
</div>

5) preview and save !

note !

color : tukar dengan background anda pastika hanya 3 jenis background saja.

NAK SHARE TUTO NI ? KALAU NAK LETAK TUTO NI DI BLOG ANDA BOLEH TAPI DENGAN KEIZINAN SAYA :)

tak jadi ? cepat2 bagi tahu fara key :)

Aina Zairulnizam said...: thanks fara :D
Nurul fara said...: welcome ^_^
MissDE said...: Nak share. ada orang minta saya buat tuto macam ni :D mohon keizinan ;)
Luna Stianza said...: aku share ini ya... boleh gk?
Atin Tory said...: fara . atin nk share k . thnkx :)