myoose-i-see
home about explore cliques graphics FAQS FOLLOW

CREDITS



[more]

Older Post > | < Newer Post
[Tutorial] How To Make A Background Chooser Using JavaScript (Repost)
Saturday, July 13, 2013 | 5:23 AM | 0 comments


Uh-oh finally I got the chance to post the tutorial of background chooser! I'd be really satisfied if this tutorial helps image  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!!!image) 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~! image

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:


If you want to make your own background, make sure the block will connect to each others when tiled. Otherwise, your background will look odd.

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 sample view, you can decide how do you want it to be shown. For the ones on my blog, I'm using 57x57px of the sample backgrounds and I made it into circle shape with drop shadows.
You can either use online photo editor or Photoshop to edit the samples. I edited my samples on picmonkey.com. It's recommended! ;) To make it like mine, after uploading your sample, you just need to go to Frames → Rounded Corners → make it into circle (corner radius max) or less to remain the square shape. To add drop shadow, go to Drop Shadow section and adjust it by yourself.

The result :


2. UPLOAD your background and the sample view, get the URLs. If your backgrounds are located on any site ont he internet, just simply right-click on the image → Copy Image URL.

3. COPY the codes below.

For Blogger template :

<script> 
$(document).ready(function(){ $("#VAR1").click(function(){ $("body").css({"background":"url(BG1 URL)"}); }); }); 
$(document).ready(function(){ $("#VAR2").click(function(){ $("body").css({"background":"url(BG2 URL)"}); }); });
$(document).ready(function(){ $("#VAR3").click(function(){ $("body").css({"background":"url(BG3 URL)"}); }); }); 
$(document).ready(function(){ $("#VAR4").click(function(){ $("body").css({"background":"url(BG4 URL)"}); }); }); 
$(document).ready(function(){ $("#VAR5").click(function(){ $("body").css({"background":"url(BG5 URL)"}); }); }); 
$(document).ready(function(){ $("#VAR6").click(function(){ $("body").css({"background":"url(BG6 URL)"}); }); }); 
</script>

<a href="javascript:void(O)" id='VAR1' title="BG TITLE1"><img src="BG1 SAMPLE VIEW URL" /></a><br /> 
<a href="javascript:void(O)" id='VAR2' title="BG TITLE2"><img src="BG2 SAMPLE VIEW URL" /></a><br />
<a href="javascript:void(O)" id='VAR3' title="BG TITLE3"><img src="BG3 SAMPLE VIEW URL" /></a><br />
<a href="javascript:void(O)" id='VAR4' title="BG TITLE4"><img src="BG4 SAMPLE VIEW URL" /></a><br />
<a href="javascript:void(O)" id='VAR5' title="BG TITLE5"><img src="BG5 SAMPLE VIEW URL" /></a><br />
<a href="javascript:void(O)" id='VAR6' title="BG TITLE6"><img src="BG6 SAMPLE VIEW URL" /></a><br />

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.
*You can also add more backgrounds, just simply copy the previous code lines and paste below. Don't forget the second part of the codes -- <a href="javascript:void(O)" id='VAR1' title="BG TITLE1"><img src="BG1 SAMPLE VIE......

5. SAVE! If you want a floating bar like mine, put <div style="position: fixed; bottom: 30px; left: 1px;"> in the beginning and  </div> in the end of the codes.

Kindly use your own creativity! Don't just always copy how others' are like, just improvise it!  




FINAL RESULT (only works with blogger template)






Labels: , , , ,