Tuesday, 8 January 2013

Tukar-tukar background


CIK NATASHA_MINHO buat request. Tanya macam mana nak choose your own background macam yang SD buat kat sidebar belah kiri ni. Nampak tak? tu yang tajuk LOVE THIS.. kalau tak nampak jugak tengok gambar bawah ni.. Tutorial ni just for blogskin. Harap korang faham dengan tutor ni :D


Haa, macam ni la. Okay now let see this tutorial. Hamboi, speaking tu. Hahaha.. 

1. Pergi "Dashboad". Lepastu pergi "Template". Dah siap, gud!
2. Copy semua code kat bawah ni

#background a img{
width:30px;
height:50px;
display:inline;
margin-right:10px;
margin-top:4px;
border: 1px solid #333;
}
#background a:hover img{
display:inline;
margin-right:10px;
margin-top:4px;
border: 1px solid #a1daff;
}

3. Korang dah copy then CTRL+F cari code </style>. Dah jumpa? Paste atas code tadi.
4. Dah paste? Korang cari tempat yang korang nak letak ni, Macam SD, SD pilih sidebar.
5. Dah jumpa? Copy code bawah ni dan pastekan kat tempat yang korang nak letak tadi. 


<div id="background">
<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(http://4.bp.blogspot.com/-ToJ2pvMX92Y/T9wa87Gdr1I/AAAAAAAACOY/SPyhqc9DQd8/s1600/pinkk.png)"});
            });
});
$(document).ready(function(){
            $("#bgcolor2").click(function(){
                        $("body").css({"background":"url(http://i.imgur.com/rQQox.png)"});
            });
});
$(document).ready(function(){
            $("#bgcolor3").click(function(){
                        $("body").css({"background":"url(http://i.imgur.com/aFE0R.jpg)"});
            });
});
$(document).ready(function(){
            $("#bgcolor4").click(function(){
                        $("body").css({"background":"url(http://2.bp.blogspot.com/-oF3Rzo6lwPg/T87nf_WFEeI/AAAAAAAAByg/MK1F17ofDec/s1600/pinkk.gif)"});
            });
});
$(document).ready(function(){
            $("#bgcolor5").click(function(){
                        $("body").css({"background":"url(http://i.imgur.com/pwQLk.gif)"});
            });
});

</script>
<center>Choose your own background ;</center>
<center><a href="javascript:void(O)" id='bgcolor1' "><img src="http://4.bp.blogspot.com/-ToJ2pvMX92Y/T9wa87Gdr1I/AAAAAAAACOY/SPyhqc9DQd8/s1600/pinkk.png" /></a>
<a href="javascript:void(O)" id='bgcolor2' "><img src="http://i.imgur.com/rQQox.png" /></a>
<a href="javascript:void(O)" id='bgcolor3' "><img src="http://i.imgur.com/aFE0R.jpg" /></a>
<a href="javascript:void(O)" id='bgcolor4' "><img src="http://2.bp.blogspot.com/-oF3Rzo6lwPg/T87nf_WFEeI/AAAAAAAAByg/MK1F17ofDec/s1600/pinkk.gif" /></a></center>
<center>Back to Original background ;</center>
<center><a href="javascript:void(O)" id='bgcolor5' "><img src="http://i.imgur.com/pwQLk.gif" /></a>
</div><br><br>





6. Apa yang SD BOLD kan tu korang tukarkan sendiri ya.. Kalau nak amik yang SD punya pon boleh tapi takut tak berapa kene ngan tema blog korang.

7. Oke dah siap, preview dulu, if jadi terus save tau ;)

8. Tak faham? boleh tanya. 

Nak copy code tekan Ctrl+C. Selamat mencuba..

Tutorial From : Adie Putra
Request From : CIK NATASHA_MINHO

3 comments:

natasyapink said...

wahh, hehe. thanks. ^0^

Adi Putra said...

Thx kerana credit ;)

Eyqin Asyiqin said...

awesome ! kita guna tau :D