Uh-oh finally I got the chance to post the tutorial of background chooser! I'd be really satisfied if this tutorial helps   Because I've been so sick with those tutorials who don't actually explain about this thing clearly (probably because I was one of them confused readers!!!) hahaha, okay now let me start this step-by-step tutorial~

Firstly, I never learned about JavaScript tbh but I "coincidentally" got the script for this thing! YAHOOOO~! 

Like what I've told yall on this post I like to look up on source codes of all blogs that have sweet and creative appearances when I'm being so frustrated *how the hell is this thing made?!* lol, eventhough some of them (mostly those from Japan and Korea) lock their source codes so I'm not able to see the codes hehehe...

I'm not a type(?) of blogger who'll give away my tutorials without considering if my readers understand its context/system or not. I'm going to make my readers understand how this/that is actually constructed, therefore they can improvise the codes based on the patterns by themselves!

---

Now, sit back, relax, and begin the tutorial 

Firstly, only patterned/tiled backgrounds are needed in this feature. You're not recommended to use a big-sized wallpaper like 1024x628px, which usually has only at least one focused picture in the corner, etc.
Because we're going to show the pattern views of our favorable backgrounds like shown below:


1. PREPARE your favorite backgrounds (sample pattern + sample view). I have some petterned-background samples (i prefer to use the pastel/light coloured ones ) I'm going to use this one for example:
For Blogskin :

<div id="bagie">
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>
<div style="position: fixed; bottom: 155px; left: 25px;">
<script>
$(document).ready(function(){
            $("#bgcolor1").click(function(){
                        $("body").css({"background":"url(BG1URL)"});
            });
});
$(document).ready(function(){
            $("#bgcolor2").click(function(){
                        $("body").css({"background":"url(BG2URL)"});
            });
});
$(document).ready(function(){
            $("#bgcolor3").click(function(){
                        $("body").css({"background":"url(BG3URL)"});
            });
});
$(document).ready(function(){
            $("#bgcolor4").click(function(){
                        $("body").css({"background":"url(BG4URL)"});
            });
});
</script>
<center>
<a href="javascript:void(O)" id='bgcolor1' title="1"><img src="BG1 SAMPLE VIEW URL" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="2"><img src="BG2 SAMPLE VIEW URL" /></a>
<a href="javascript:void(O)" id='bgcolor3' title="3"><img src="BG3 SAMPLE VIEW URL" /></a>
<a href="javascript:void(O)" id='bgcolor4' title="3"><img src="BG4 SAMPLE VIEW URL" /></a>
</center></div>

</div>

4. PASTE the codes above anywhere you want. For blogger template, I suggest you to add a new widget of HTML/Javascript and paste the codes down there.

  Replace:

• VAR with your variable, can be anything as you want. ex. id='polkadot'
• BG URL with your background's URL.
• BG TITLE with the title of the background, it will be shown when you hover the sample view. ex. title="Polkadots!"
• BG SAMPLE VIEW URL with your sample view's URL.

Labels: Backgrounds, Cute, Fun, Tutorial, Web Designing