Tuesday, September 26, 2006

Desk Animation

Animated Desktop Antics

Monday, January 31, 2005

Add either Left or Right Sidebar into the Blogger Template [Re-Written]

There has been some problems with the code. These were my mistake that I made, but I tested it and the new tutorial/code works perfect. Enjoy.


For my first tutorial, I will explain how to add a second side bar to either the left or the right side of your blogger webpage. I haven't found any good tutorials across the web on how to do this, so after some trial and error, I got it working. And now I bring this very easy step by step tutorial to those who want that second sidebar but don't know code it.

The first step would usually be to familiarize yourself with the HTML and CSS code in the template, but it isn't required if you follow these instructions. I would also like to add that I have based this code off the Minima template. I hope that the others are coded somewhat the same, so this tutorial can be more relevant then not. This needs to be taken into consideration.

First off, log into your Blogger.com account, click on the sprocket icon to change the setting, then click on "Template" and "Edit Current". You'll then see the CSS and HTML code of your page.

Scroll down until you see the following:

/* Content
----------------------------------------------- */


There should be a couple sub-categories. You'll see #content, #main, and #sidebar.
1) Under the #content css, change "width:660px;" to "width:900px;" - this will widen the usable area of the page.
2) Copy and paste the following before #main (if you're making a left bar) and after #main (if you're making a right bar).


#sidebar1 {
width:220px;
float:left;
padding-left:15px;
padding-right:15px;
}


(you may have to adjust the left and right padding, to fit your page needs)



Next, scroll down past "/* Headings" and it's sub-content. Copy and paste the following after the "}" at the end of the Headings category.


/* Sidebar1
----------------------------------------------- */
#sidebar1 ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}
#sidebar1 li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebar1 p {
color:#666;
line-height:1.5em;
}


(Basically, It's a carbon copy of #sidebar, but with a 1 after it)


Lastly, scroll down past the CSS code until you get to the HTML portion. It should read "<body>" at the beginning. Scroll past the header, which looks like this "<div id="header">", and past the content section, "<div id="content">". After these three section is where you can build your new bar, but there is correct placement and required code that needs to at the beginning and at the end of the new sidebar section. If you are building a left side bar, the code below needs to be placed before the "<div id="main"><div id="main">", and after the "main" section if you're building a right bar.

This is the code to build a the sidebar:
<div id="sidebar1"><div id="sidebar2">
and paste this as the end of the sidebar:
</div></div>

That's it. You're done. If you would like a quick look at your new sidebar with content, copy and paste the following in it's appropriate place.


<div id="sidebar1"><div id="sidebar2">

<!-- Previous Post -->
<h2 class="sidebar-title">Previous Posts</h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a

href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>

</div></div>



Feel free to comment on the re-written code. If there are problems, please let me know. Also, post a link to your blog if you like to share it with others.
Also, if you want to see the code in action visit my primary site, Circuit's Board.


-ROb