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.

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

25 comments

Write comments
October 01, 2009 8:56 PM delete

Oh man, this is cool!!! Now i hace to draw alot of picture xD And thx for teaching abput the upload pic

Reply
avatar
October 02, 2009 11:11 AM delete

This is really a good hack.Now you can also change the back ground image like language of your blog.Its cool...

Reply
avatar
October 05, 2009 8:42 AM delete

This is a very creative and attractive hacks I ever seen. Visitor will be more often to visits your blog because you always generate new templates or backgrounds.

Reply
avatar
October 06, 2009 4:10 PM delete

This is way off Topic Mr Sai, as my question is about widgets - and also about using conditional tags so that any given widget will appear on a particular page (rather than all pages).

At the moment, I know how to insert a conditional tag so that a widget will appear only on one page (instead of on all of them).

Do you though, know of a conditional tag which will make a widget appear on all pages EXCEPT one - and to be able to control exactly which page the widget does NOT appear on?

I am sorry to be so random (and off-topic) but I look upon you as something as an expert in these matters, and hope you might be able to advise me?

Many thanks for any help you can give with this...

Martin

Reply
avatar
October 07, 2009 12:20 PM delete

Hi Martin,

This is the code to show a widget in a specific page:

<b:if cond='data:blog.url == "SPECIFIC_BLOG_POST_URL"'>

Now use this one to hide the widget ONLY in that page:

<b:if cond='data:blog.url != "SPECIFIC_BLOG_POST_URL"'>

Reply
avatar
October 07, 2009 12:44 PM delete

Hi... Hey ..I need one help from you please....

I think you can help me...

I checked out the back to top hack for blogger in this website.. But in your website I like the hover effect.... can you please tell the script for creating the hover effect... and I need a cool back to top icon also... where can i find one..

Reply
avatar
October 07, 2009 1:19 PM delete

Hi Shankar
Use two diff size images of a single go-to-top icon.
and use this technique:
http://bloggerstop.net/2009/01/create-html-button-for-your-blog.html

Reply
avatar
October 07, 2009 1:31 PM delete

Hey sai..thanks for prompt reply..and sorry for bothering you again buddy..I am not so good wih these html's. how can we add two images to perform operation of a single button?

Reply
avatar
October 07, 2009 1:37 PM delete

I understood..thanks for the tutorial... it helped me a lot..

Reply
avatar
October 08, 2009 7:41 AM delete

Many thanks for your help, Mr Sai..

I have not had a chance to test it yet, but I think the code you have provided is exactly what I need...

You are a star!

Reply
avatar
Das
October 09, 2009 6:57 AM delete

How do i embed a javascript in blogger comments while commenting on a blog ?

Reply
avatar
October 09, 2009 7:02 AM delete

you cannot do that das,
BTW, why do u want to do that?

Reply
avatar
October 13, 2009 9:54 AM delete

cool post ....blogger going to dynamically.....


http://techtasks.blogspot.com A blog for multi purpose

Reply
avatar
February 19, 2010 10:14 PM delete

Very good and innovative post. thanks :)
Becky

Reply
avatar
February 20, 2010 1:00 AM delete

hi..i used this hack before and it worked perfect...........but now it seems i have to be logged in to MyDatanest for it to function............the css files are set as hidden not private as you instructed so i dont know what the problem is.........i tried removing it completely and re-installing it but the problem persisits....any suggestions?.........thanks a bunch, i love this hack!

Reply
avatar
February 20, 2010 9:07 AM delete

@The Blind Assassin,

Yeah I got to know about this problem from some other bloggers too. Most probably this is a temporary glitch at DataNest. Switch to SigMirror.com in the meantime (almost same user-interface) and if things get normal at MydataNest, then switch back to it.
PS: I do not reccomend any other file-hosting site (except MyDataNest and Sigmirror.com) at this time.

Reply
avatar
February 22, 2010 1:49 AM delete

Thanks for your reply........I found this site called Dropbox and it seems to be working great.......

thanks again for the hack........

Reply
avatar
February 22, 2010 9:23 AM delete

I have heard of dropbox too, but nev tried it!
What's the bandwidth limit/procedure in it?

Reply
avatar
February 22, 2010 4:45 PM delete

honestly i don't know...im using it to only store the.js and .css files...........you'd have to register though and install their software which syncs the files on your computer to their storage....go check it out on their website: https://www.dropbox.com/

Reply
avatar
Anonymous
March 08, 2010 9:56 AM delete

Thank for your trick. Is it possible to make it automaticly? When the page refreshed, can background change automaticly?

Reply
avatar
March 10, 2010 11:00 PM delete

hi, was wondering if it could be made in a drop down menu?.....i've tried using your codes for simple drop-down menu and it worked in firefox but not IE.....thanks......

Reply
avatar
Anonymous
March 31, 2010 8:01 PM delete

Hello Mr Sai,
What Is This...???

Stylesheet switcher using jQuery

This page can be used so that the stylesheet switcher degrades gracefully where Javascript is disabled or the level of Javascript support isn't high enough to support the stylesheet switcher (e.g. jQuery isn't supported).

You can program this page in whatever serverside language you prefer. A cookie called "style" should be set to the value of the querystring parameter "style". The page should then redirect to it's referrer.

Then when serving up any other page on your site you will need to set the "rel" attribute of all not selected stylesheet links (e.g. ones whose title isn't the value of the cookie style) to "alternate stylesheet".

NOTE: this page and process is only necessary if you care about the small percentage of users that the stylesheet switcher won't work for. You could also just display a message on this page informing the user that they need to enable JavaScript in their browser or to download a better broswer from here.

Help Me =(

Reply
avatar
April 21, 2012 8:09 AM delete

Hi

My problem is the bottom scroll bar is completely GONE in Edit Layout. So I can't scroll over to edit my page elements or change different settings for my blog posts.

Everything on the right side of my Edit Layout Page is partially hidden. With my SCROLL BAR gone, I can't get over to the edit buttons.

Is there a code I can put into the layout editor wireframe to get my bottom scroll bar back?

Thanks ahead of time!

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon