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- © 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
0 Responses to "Create Sidebar Position Chooser"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!