How to design sidebar for blogspot site,

Get Started
1

Hello,

I am seeing many blogspot sites they have a very good sidebar design with coloured background post titles, and each label has a coloured background and much more,
here are some blog examples:
<snip/>

smart guys… any technical ideas?
I wil appreciat if any in depth step by step idea to help create something looks like above samples or ever better,
Thanks in advance & best regards

<div class='widget HTML' id='HTML1'>
<h2 class='title'>Random Posts</h2>
<div class='widget-content'>
<script type='text/javascript'>
.....
</script>
<style type='text/css'>
.random-template{
 font-size: 11px;
 margin: 0px 5px;
 padding-top: 5px;
 display: none;
 cursor: pointer;
}
.random-template:hover {
  background-color: #e2e2e2;
  color: #777777;
}
.random-template h4{
 font-weight: normal;
 font-size: 11px;
 padding: 0px 0px;
}
.random-post-thumb img {
 max-height: 50px;
 max-width: 50px;
 height: auto;
}
.random-post-thumb {
 margin: 0px 5px;
 overflow: hidden;
 float: left;
}
.clear {
	clear: both;
}
</style>
<div id='random-posts'></div>
<div id="rand-template" class="random-template">
 <h3><a></a></h3>
 <div class='random-post-thumb'><img/></div>
 <div class='random-post-body'></div>
 <div class='clear'></div>
 <h4></h4>
</div>
<script type='text/javascript'>
.....
</script>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='http://www.blogger.com/rearrange?blogID=5296352711635023039&widgetType=HTML&widgetId=HTML1&action=editWidget&sectionId=sidebar-left-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML1"));' target='configHTML1' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div><div class='widget HTML' id='HTML3'>
<div class='widget-content'>
<style type='text/css'>
.js-posts-container {
margin: 0px;
}
</style>
<script src="http://jsblogstop-blogger-feed-tools.googlecode.com/svn/trunk/jsLabelFeeds.js"></script>
<script type='text/javascript'>
var jsMusicPosts = new jsPostThumbs();
jsMusicPosts.setTitle('A Few Music Videos I Like');
jsMusicPosts.getExtLabelPost('www.hashedmedia.com','Vid:Music','left', 5 , 0);
</script>
</div>
2

Do you have any CSS skills? If you do, first have a look under the hood at how those sidebars were done. Using something like firebug for Firefox you can see how those sidebars were constructed in HTML and styled with CSS.

Then have a go at creating what you want and post back if you need help.

If you have no CSS skills at this point, it might be better to hire someone to do the work for you. :slight_smile:

3

Yes, I have CSS background already…
where I have to insert it?
any technical steps to get started?

4

First We start with Sidebar background :

Step 1 :Login to blogger > Design > Edit HTML and Find

#sidebar-wrapper {

Step 2 :Next to it add the following Code

Background:#000 url( ANY BACKGROUND IMG URL )repeat-x;{

Now You have changed the Background of Sidebar.

Step 3 : Now find

.sidebar {

Step 4 : Add the below Code above it


.sidebar h2 {
font-size:110%;
font-weight:bold;
color:#565c52;
font-family:Arial;
text-transform:uppercase;
margin:0 0 6px;
width:300px;
padding-left:10px;
padding-top:2px;
padding-bottom:2px;
background:#464646 url(YOUR BACKGROUND IMG URL);
border-bottom:10px solid #fff;
}

Step 5 : Click on Preview and Save Template.

Thats it.

5

wptoblogger>> I appreciate your reply, but the wonder and the most headache I was looking for the mentioned: #sidebar-wrapper { and .sidebar { ,
I did not really find any of them… I was scrolling up and down 4 or 5 times… feel so dizzy and did not see it,
how can I find it? is there any tool can search and locate it? or where supposed to be? after or before what section?
I want to post my blogspot URL, but the forum will not allow it to appear as I saw the old links I have posted, so it’s disappointing me really… all my project standby for this part untill i get it solved,
Thanks alot once again, and I do appreciate your effort indeed,

6

Just mention your domain name without extension.


eg : Write as "Wordpresstoblogger"

I will take it as "Wordpresstoblogger.blogspot.xxx".
7

This is the URL gslstore.blogspot.xxx
really making so headache to me to fix this issue
I wanted to set the sidebar like this one:
webtunisia.blogspot.xxx
Also I liked this blog site: jsblogstop.xxx
if any idea I will really appreciate it so much and lot of thanks in advance indeed,
Regards