Random Blogspot Background Script Tutorial
*This is only for default available blog themes provided by Google.*
Someone secretly asked me about how
to make blogspot background image changes every times when navigating in the
blog. Or in a simpler sentence, how to randomize blogspot background image.
Well.. I'm here to help you, and pretty much everyone who's currently reading
this article.
Anyway.. we need to clear some concepts first.
**Highly recommended for you to backup your blog's theme before trying to modify anything. If something went wrong, you will still have a way to restore your theme back to normal.
**I'm not responsible for any mistakes you did to your blog.
'Classic' Themes
These themes are.. uh, all default themes except Soho and Contempo.
These themes utilizes full background image instead of header image. The
script for these themes were made for quite a time ago. But I fixed it up a
little bit to make sure they work properly.
For Non-'Emporio'-and-'Notable' Themes
0. Go to your Blogger.com page
1. Click 'Theme' > 'Customize' > Remove the background
2. Return to 'Theme' > Click drop down button > 'HTML Editor'
3. CTRL+F (INSIDE HTML EDITOR) > Type in '</b:section>' > Find the topest line that
contains that tag > Create a new line behind it.
After you're done with all steps above. Edit this script, then copy and paste
it in the new line
<body>
<script type='text/javascript'>
function random(){
var image = new Array()
image[0]="imageurlgoeshere"
image[1]="image_url_goes_here"
image[2]="IMAGE_URL_GOES_HERE"
image[3]="eimaglursgoeeher"
var random=Math.round((image.length-1)*Math.random());
return image[random]
}
document.write("<style>body {");
document.write(' background:url("' + random() + '") repeat top center fixed #fff;');
document.write(" }</style>");
</script>
</body>To add more image into the shuffle, just simply add in an element to the 'image' array and vice versa
Example: image[4]="https://fakeimage.fakepicture.io"
Also make sure you don't skip an index. Otherwise your image will not load properly.
For Emporio and Notable
Do the same as above. But change the instructions in Step 3 to:
Scroll to the bottom > Find a HTML tag named '</body>' > Create a new line behind it > Then copy and paste the script above.
'Modern' Themes
These themes are Soho and Contempo. These themes utilizes header image instead
of full background image. I have to say it took me quite while to came up
with a script that works. Trials and errors were made, but eh, it was worth it
to be honest.
For Contempo
0. Go to your Blogger.com page
1. Click 'Theme' > 'Customize' > Remove the background
2. Return to 'Theme' > Click drop down button > 'HTML Editor'
3. Scroll down to the bottom > Find a HTML tag named "</aside>" >
Create a new line behind it
After you're done with all steps above. Edit this script, then copy and paste
in the new line:
<script type='textjavascript'>
function random() {
var image= new Array()
image[0]="NEVER GONNA GIVE YOU UP";
image[1]="NEVER GONNA LET YOU DOWN";
image[2]="NEVER GONNA RUN AROUND AND";
image[3]="HURT YOU";
var random=Math.round((image.length-1)Math.random());;
return image[random];
}
var str = 'url(' + random() + ') scroll bottom center';
var elem = document.querySelector(".bg-photo");
elem.style.background = str;
</script>
To add more image into the shuffle, just simply add in an element to the
'image' array and vice versa
Example: image[4]="https://stockphoto.watermarkareeverywhereomg.com"
Also make sure you don't skip an index. Otherwise your image will not load
properly.
*You also can use " as apostrophe too. Thanks HTML.
For Soho
Same as Contempo. Except do not remove the background.
But instead. I recommended you to go find a solid color image that matches
with your blog 'canvas', then use it as a background instead. I'll tell you
later why.
*For example. This blog background 'canvas' is black. So go ahead and find
black.png
You know the rules, and so do I~:
<script type='textjavascript'>
function random() {
var image= new Array()
image[0]="yourImageURL";
image[1]="anotherImageURL";
image[2]="anotherofanotherImageURL";
image[3]="MonaLisaWithGun.png";
var random=Math.round((image.length-1)Math.random());;
return image[random];
}
var str = 'url(' + random() + ') scroll bottom center';
var elem = document.querySelector("body.homepage-view .hero-image.has-image");
elem.style.background = str;
</script>
*Actually.. the real reason was, somehow the script did not work if I remove the default background image. It just did not load in. Kinda make sense since why would you want a script that does not do anything to load anywhere.
Tips and More Tips
*Warning: Contain opinions and useful tips.. eh, wha?
> Try matching background image color with your web canvas for more A E S T- okay you know the drills.
> For 'Classic' Themes. Try using seamless background images. Sure, you can use 'no-repeat' attribute. But it will not look decent. Unless you are a graphic designer. Then go ahead, do your things.
> Low quality background? Try using query parameters to enhance its quality.
If you have no time for that. Then type in after the URL you acquired, '=wn-hn-rw' (Where n is a maximum dimension value respectively).
For example: "https://legalimage.com/imageurl=w3000-h2200-rw"
> For the love of god. Do not use real life photo as a repeat background. It scares me.
Furthermore
Now.. what about custom themes? Uh.. I can't do that for every themes out
there. But if you have some background knowledge about JavaScript. You'll
quickly notice the method I used to achieve this.
So.. try to modify the codes? Maybe?
Eh. That's all for the tutorial. Thanks for reading. Now do your blog a favor.
Adios.
Comments
Post a Comment