We have been moved to http://www.bloganol.com/

It takes a long time to create this Hack. i started created this blogger hack because i got influenced by the hack in DynamicDrive. It takes me one day to create this hack.Now without wasting our valuable time let's come to the point. this is the hack that helps you to make your sidebar . You can align your sidebar whether in Left or in Right in Just one Click.You can view demo of this hack also.Now lets start creating this hack.

First of all Copy the Following code to the Head section of your Template.


<link href="http://bloganol3.googlepages.com/rsidebar.css"
rel="stylesheet" type="text/css">

<link href="http://bloganol3.googlepages.com/lsidebar.css"
media="screen" rel="alternate stylesheet" title="lsidebar"
type="text/css">

<script src="http://bloganol3.googlepages.com/styleswitch.js"
type="text/javascript">

************************************************

Style Sheet Switcher v1.1- &#169; Dynamic Drive DHTML code
library (www.dynamicdrive.com);* This notice MUST stay
intact for legal use* Visit Dynamic Drive at http://www.dynamicdrive.com/
for this script and 100s more

***********************************************

</script>




In the above code the first line defines the code to place your Sidebar to right and the second Line defines the code to place your sidebar to Left.this hack is created on the basis of original blogger Minima Template . The size of the Main wrapper ,sidebar of this template may not Match with your Template Width . Therefore Download these CSS files and Customize that can be fit for your blog.After that Without changing its name Upload it to your Directory and Replace the default link with your new Link from your Directory.

After you complete the above process you have to perform the next process too. You should need a interface so that others can change the sidebar position . you can use radio buttons,select menu and Regular Links as Interface.

Radio Buttons as an Interface:
<form id="switchform">
<label><input checked="checked" value="rsidebar"
name="choice" onclick="chooseStyle(this.value, 365)"
type="radio"/>Sidebar to Right</label><br/>
<label><input value="lsidebar" name="choice" onclick="chooseStyle(this.value,
365)" type="radio"/>Sidebar to Left</label>
</form>

A select Menu as an Interface:
<form id="switchform">
<select onchange="chooseStyle(this.options[this.selectedIndex].value,
60)" name="switchcontrol" size="1">
<option selected="selected" value="rsidebar"/>Sidebar to
Right <option value="lsidebar"/>Sidebar to Left
</select></form>

Regular links as an Interface:
<a checked="checked" href="javascript:chooseStyle('rsidebar',
60)">Sidebar to Right</a><br/>

<a href="javascript:chooseStyle('lsidebar', 60)">Sidebar to
Left</a>

Goto Blogger Layout page , Add a new page Element and Paste which one of you like.

I hope you will enjoy using this.

comments

1 Responses to "Create Sidebar Position Chooser"
Unknown said...
June 20, 2009 at 12:16 AM

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "link" must be terminated by the matching end-tag "".

got this error while doing first step plz guide in details.
thanks.


Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!