Theme Switcher For Blogger

Theme changer or Theme switcher is a really a little complicated thing when comapared to the other hacks here..Here i introduce a theme changer for our blogger beta
.
  • Demo

  • Here is the method to do it
    Goto your Blogger Template>Edit Html and back up your Template by downloading it..
    Now In the Template code find

    <b:skin><![CDATA[



    you will notice some variable defenitions and some style defenitions below it


    copy all the data below the above code till


    ]]></b:skin>



    and save the copied text as a text file on your desktop
    .

    Now in the text file you will see codes like


    <Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color" type="color" default="#ffd595" value="#eed595">



    This means that the variable "sidebarTitleBgColor" by default has the value #ffd595 and now you are using the value #eed595


    To use theme switcher you will have to replace each occurance of this variable by its value in the text file..


    That is you should replace all occurances of $sidebarTitleBgColor with #eed595


    Similarly all the variables(like $borderColor,$Sidebartextcolor $mainBgColoretc..) should be replaced by their values.


    Now consider the declaration of the font variables

    <Variable name="bodyFont" description="Text Font"

    type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;">


    Here the $bodyFont variable should be replaced by normal normal 100% Verdana, Arial, Sans-serif;


    Similarly all variables should be replaced by the text enclosed in its corresponding value="........" declaration..

    Now remove all the variable defenitions from the text file..

    Variable defenitions will look like this

    /* Variable definitions


    ====================

    ========Defenitions here====================

    */


    So delete every thing between /* and */


    Now your default style sheet is ready.Save this test file as default.css


    Now make another style sheet and save it as custom.css.The great thing about this script is that you don't have to make a completely new stylesheet. You only have to define those rules that are different from the default stylesheet (although you can include all the options that are the same too if you want).

    Similarly you can make as many style sheets as you want (say custom2.css,custom3.css etc).


    Now upload all of your stylesheets somewhere(maybe google pages).

    Now in your Blogger Template>Edit Html delete everything below the variable defenitions and above
    ]]></b:skin>



    Now just below find the following code

    </head>


    and replace it with
    <script src='http://bloggerplugins.org/templates/styled-denim/styleswitch.js' type='text/javascript'/>
    </script>
    <link href='url of default.css' rel='stylesheet' type='text/css'/>

    <link href='url of custom.css' media='screen' rel='alternate stylesheet' title='custom-theme-1' type='text/css'/>
    <script type='text/javascript'>

    window.onload=function(){

    var formref=document.getElementById("switchform");

    indicateSelected(formref.choice);

    }


    </script>
    </head>


    (Dont Forget to replace url of default.css and custom.css with its actual urls.)


    Now some where in the sidebar add the Theme switcher Button code below.

    <form id="switchform">

    <input value="none" name="choice" onclick="chooseStyle(this.value, 60)" type="radio"/>Default Theme<br/>

    <input value="custom-theme-1" name="choice" onclick="chooseStyle(this.value, 60)" type="radio"/>Custom Theme 1
    </form>




    To add more themes you should add similar link href= tags for each of your stylesheet and add the button code for each of them..



    The awesome javascript for this hack was developed by Dynamic Drive.

    If you need a template with integrated theme switcher,then you can try out my new template- Styled Denim with Theme Switcher
    If you have any doubts feel free to contact me or comment here..

    Comments

    1. very cool plugin for blogger keep it up buddy :)!!!

      ReplyDelete
    2. nice tips !! keep it up
      keep pink theme for girls :)

      ReplyDelete
    3. This is cool. I'll have to take time to try to install this.


      Is there a way to get the recent comments on the blog to show the person's actually blog instead of the blogger ID?

      If I use the recent comment plugin, it show the recent comment post itself instead of linking to the actual person's blog. Is there a way to fix that?

      ReplyDelete
    4. as of now it is not possible because the Json feeds doesnt include the commentors URL.

      ReplyDelete
    5. I followed the instructions but it doesn't work with my blogger beta. *sighs* I keep trying to get codes like this to work but have no luck

      ReplyDelete
    6. have u made a seperate css file as mentioned?

      ReplyDelete
    7. if u still have doubts u can contact me via gtalk or yahoo messenger..

      ReplyDelete
    8. its a trick using eksternal css combine with java.
      nice...thanks for share

      ReplyDelete
    9. Hi have been trying to get it too work, have external stylesheets all made.
      Did try with a javascript plugin I used on my main site found at http://www.alistapart.com/articles/alternate/
      this works great for main site but on forum only shows default but not the alternate ones. I think its due to me not understanding XML and trying to get to work with HTML ahref link styling


      Anyway back to this plugin. I have removed my links and have 2 external stylesheets that I know work and can load from my host but when I try and upload the code it comes back with saying my head tag is not closed when it is. I do not understand and its driving me nuts!

      ReplyDelete
    10. great tutorial... but, i'm still confused. :'(

      ReplyDelete

    Post a Comment