Follow | Dashboard
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 :)


5 Comments
Blogger enna zackni said...

thanks fara :D

 
Blogger Nurul fara said...

welcome ^_^

 
Blogger MissDE said...

Nak share. ada orang minta saya buat tuto macam ni :D mohon keizinan ;)

 
Blogger Luna Stianza said...

aku share ini ya... boleh gk?

 
Blogger Atin Tory said...

fara . atin nk share k . thnkx :)

 

Post a Comment