Saturday, February 16, 2013

Tutorial : Background change when cursor click

Tumblr_mi4hdqemdl1rjipvko1_500_large

こんにちは, 안녕하세요 , Assalamualaikum. Korang nak try tak tutorial terbaru ni? Mesti ada yang dah tau. tuto ni atin nak ajar korang , ada 3 jenis background and bile korang clcik je pilihan tu , automatik dia akan tukar background tu.. Berminat ? boleh la cuba :D


Blogskin/classic template 
1. Dashboard > Template
2. Tekan Ctrl + F serentak dan cari code </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 di atas code </style> tadi.

5. Copy code bawah ni pulak


<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 kat bahagian sideber korang.
7. Preview and save




Template designer
1. Dashboard > layout > add a gadget > html/javascript
2. Copy 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. Paste dalam html/javascript tadi.
4. Preview and save

all color : URL background
*pastikan 3 jenis lain2 background k.


credit : rara

No comments: