Tutorial : background berubah bila cursor click

 

rasa macam tak percaya pulak aku sendiri yang nak buat tuto . hehe . mana pernah lagi sebelum ni aku buat . Tapi sebab dah ada someone tanya,,

maka ,aku nak cerita lah sikit . tak boleh la kedekut ilmu kan . hehe . okeii . tuto ni dicreditkan to FATIN HALID . aku tahu benda ni dari blog dia . ehh,korang taw tak tuto yang mana ni ?? ha,,pernah tengok tak,,bila kita tekan cursor kat gambar tu,,background terus bertukar ? macam bawah ni ..

berminat ?

 ha,,toksah bebel panjang2,,jom kita mula !

blogskin/classic template 

1 .Dashboard > Template

2 . cari kod </style>

3 . copy code bawah ni .

#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 kat atas code yang korang cari tadi . 
5 . dah siap ? belum lagi . then,,korang copy code bawah ni .

<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>

6 . paste dekat bahagian sidebar korang ye .
7 . then,,preview and save !

Template Designer

1 . dashboard > layout > add a gadget > html/javascript
2 . copy code 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 . paste dalam html/javascript tadi

4 . save !

note :

all colour : URL background 

* pastikan 3 jenis background tu lain-lain tau .

* then,,bila korang dah save,jangan pelik bila korang try tekan tak jadi pulak . sebab benda ni boleh jadi kalau kita tak login blogger . maksudnya benda ni untuk pengunjung2 blog kita lahh . okeii . faham ? boleh la mula sekarang =)

   

 

---

Syukran Jazilan . Semoga ianya bermanfaat . InsyaALLAH

---