Let Your Visitors Change Your Blog Theme !!!

Here's another cool hack, that will allow your visitors to change the header/background image of your blog.
The theme will get modified only for that particular reader/visitor and will remain in the default state for all other users.

To quickly understand and try this hack, checkout this on this demo blog: Dynamic Css For Blogger Blogs

Although this hack can be used to change all the css elements of your blog (Header, Background image, links colors, font size and style etc.) but to keep this post short and easy to understand I will only focus on Header and Background images.
In any blogger templates, you will see codes similar to these, to change background images and header.

For Background Image:

body {
color: #fff;
background: url('http://ANY_WEBSITE.com/DzSPJQXgCBw/BackGround_Image.png') repeat;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
...
...
...
...
}

And for Header Image:

#header h1 {
background-image:url(http://i38.tinypic.com/HEADER_IMAGE.jpg);
color: #fff;
font: Trebuchet MS;
text-align: left;
}

But generally these elements ("body" and "header h1") are used only once. So you do not have an option to switch between different background and header images.

But in this hack, we will add more than one background or header elements to the template, although at any moment of time only one background image and/or header image will be shown (of course).
To add different elements, separate .css files will be used.

Now follow these instructions to add similar multiple background and header images to your blog:

STEP #1:
Download these CSS Files:
style_1.css (for background 1)
style_2.css (for background 2)
style_3.css (for background 3)

style_4.css (for header 1)
style_5.css (for header 2)

serversideSwitch.html

As a Zipped File (from Ziddu)

And download StylesheetToggle.js from KelvinLuck.com (Right click and "save target as")

STEP #2:
Edit the css files, to add your own images.
You may use as many CSS files as you want. To create more css files, simply create new text files, and save them as .css instead of .txt

In stylesheets 1-3, change the image url, like this:

body {

background: url(http://DIRECT_LINK_TO_ANY_IMAGE.jpg) repeat;

color: #333;
}

More instructions to change background image here.
And download more background images from here.

In stylesheets 4-5, change the image url and corresponding height and width, like this:

#header-wrapper {

width:800px;

height: 200px;

background: url(http://i38.tinypic.com/ivyhdc.jpg) no-repeat;

margin:0 auto 10px;
border:1px solid $bordercolor;
}

Edit the code lines highlighted in RED. Save the file.

NOTE: It is NOT necessary to use different files for header and background images. You can make combinatinos of those files too. So in stylesheets 1-3 along with background images you can simultaneously use 3 different header images too. Similarly in stylesheets 4-5 along with header images, you can insert code for background images too.

STEP #3:
Upload all the files to your MyDataNest/HotLinkFiles account (registration required).
Copy the DIRECT LINKS to these files.

NOTE: In MyDataNest, make sure that the folder where you have uploaded these files is selected as "hidden" and NOT as "private".

STEP #4:
Log in to Blogger, go to Layout -> Edit HTML
and find (CTRL+F) this code:

</head>

and immediately ABOVE/BEFORE it, paste this code:

<link href='http://mydatanest.com/files/............../Style_1.css' media='screen' rel='alternate stylesheet' title='styles1' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_2.css' media='screen' rel='alternate stylesheet' title='styles2' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_3.css' media='screen' rel='alternate stylesheet' title='styles3' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_4.css' media='screen' rel='alternate stylesheet' title='styles4' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_5.css' media='screen' rel='alternate stylesheet' title='styles5' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://mydatanest.com/files/............../stylesheetToggle.js' type='text/javascript'/>
<script type='text/javascript'>
$(function()
{
// Call stylesheet init so that all stylesheet changing functions
// will work.
$.stylesheetInit();

// This code loops through the stylesheets when you click the link with
// an ID of &quot;toggler&quot; below.
$(&#39;#toggler&#39;).bind(
&#39;click&#39;,
function(e)
{
$.stylesheetToggle();
return false;
}
);

// When one of the styleswitch links is clicked then switch the stylesheet to
// the one matching the value of that links rel attribute.
$(&#39;.styleswitch&#39;).bind(
&#39;click&#39;,
function(e)
{
$.stylesheetSwitch(this.getAttribute(&#39;rel&#39;));
return false;
}
);
}
);
</script>

Replace links in RED above, with the DIRECT LINKS you got in STEP #3.

Once again, you need not use exactly 5 css files, delete or add code to the above code in STEP #4 according to the number of your css files.

Save the template.

STEP #5:
Go to Layout -> Page Elements and click on "Add A Gadget" and select it as "HTML/JavaScript" type.

And paste this in to it:

<h3>Try Changing HEADER of this blog!</h3>
<center>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_4" class="styleswitch" rel="styles4"><img width="200" src="http://i34.tinypic.com/24vmrv8.jpg"/></a>
<br/>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_5" class="styleswitch" rel="styles5"><img width="200" src="http://i38.tinypic.com/ivyhdc.jpg"/></a>
</center>
<h3>Choose a different Background:</h3>
<center>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_1" class="styleswitch" rel="styles1"><img width="100" src="http://i34.tinypic.com/28vsgef.jpg"/></a>
<br/>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_2" class="styleswitch" rel="styles2"><img width="100" src="http://i33.tinypic.com/282j7ts.jpg"/></a>
<br/>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_3" class="styleswitch" rel="styles3"><img width="100" src="http://i35.tinypic.com/2d12u08.jpg"/></a>
</center>

Change the link highlighted in RED with the DIRECT LINK to the file (serversideSwitch.html).
And use the same "rel" tags in the code above as the "title" tags used in STEP #4.

Credits: Based on StyleSwicth-Toggle by Kelvin Luck from KelvinLuck.com. Follow him on Twitter @vitch.

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Google Facebook Twitter More

• Digg
• Linkedin
• Stumbleupon
• Delicious
• Tumblr
• BufferApp
• Pocket
• Evernote

Related Posts

• Add A TweetQuote To Your Blogger BlogIn HTML/CSS, when you quote a piece of text from other websites/web pages, then it is usually done through customized q
• 6 Tips to Get People to Join Your New ForumA guest post by Tom Walker, editor and contributor to the CreativeCloud blog. A Bloggers Community © Baratunde Start
• Compare And Find The Best Affordable Web HostBlogger.com, no doubt provides all the features and benefits to bloggers for completely free, and thus till date, it st
• How To Add Music Files To Blogger BlogsLive demo of the music player is here. There are several occasions when you would like to add music to your blogs.