Background change when cursor click

Post by Adilla Shahirah | 9:42 pm | 7 Nutella |
Assalammualaikum. Eyra minta maaf kalau lambat buat tuto ni. k, jom tengok bawah. tutonya macam bawah ni:)

ok. dah tahu ? mari mulakan.


Classic Template
1) dashboard > template > edit html
2) cari code ini
</style>
3) copy code bawah ni diatas code </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) okeh , korang boleh pastekan code ni di mana2 sahaja yang korang nak asalkan dia berada di bawah </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 > layout > add a gadget > html/javascript
2) copy dan pastekan code bawah ni
<style type="text/css">
#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;
}
</style>
<script type="text/javascript">
<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>
3) preview and save !

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


Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

7 comments:

Hajjatul Darwisyah said...

Thanks Buat Tuto ! Dah lama cari ! :)
Jeyaahhh ., menjadi !

Hajjatul Darwisyah said...

Jemput lah follow blog kami ! Dah tukar tema :) ., Kasi pendapat kayyy ?

http://syafirahecticlife.blogspot.com/

Hajjatul Darwisyah said...

Anda di Tag di dalam entry khas Fira sempena dengan tema baru !

http://syafirahecticlife.blogspot.com/2012/08/im-back-with-new-design.html

Princess Syazliyana said...

yg " ayt anda " tu kene tukar kpd ayt apa ? hrp bls kt cbox saya :) hihi .

FathinAmirahh said...

Dilla . blog Myra tak jadi lah :(