change sidebar title background color

Well, that is not too difficult. Sign into Blogger (Dashboard), click LAYOUT > EDIT HTML to open the template editor and search for this:


.sidebar h2 {
etc. etc.
}
etc. etc. means whatever may be in between { and } but which is not relevant to this post

Edit it (add a line) to read
-----------------------------
.sidebar h2 {
background-color:blue;
etc. etc.
}


If you cannot find
-------------------------
.sidebar h2 {
etc. etc.
}

Then just add this:
--------------------------
.sidebar h2 {
background-color:red;
}

to anywhere before
-----------------------------
]]<>/b:skin<


but preferably just after:
/* Sidebar Content
----------------------------------------------- */


so that it is together with others in the template which is related to the sidebar. That section of the template will then look like this:
/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
background-color:red;
}



Note: My aim is to make this blog easy to understand, so if the above is difficult for you to follow, do make a comment and let me know what is the source of your difficulty.

Read More

sidebar pushed to the bottom of the pafe

A frequent complaint of bloggers is that the sidebar (profile, links, etc.) is pushed to the bottom of the page. This is a very common problem and may occur when viewed with both Firefox and Internet Explorer, or it may be OK with Firefox but not OK with Internet Explorer. This is usually caused by some content such as photo, table or long link exceeding the width of the content or sidebar column. Sometimes it is caused by incorrect coding such as missing or mismatched tags. Rat reported that once it was caused by a closing comment tag --> that had no opening comment tag <-- (HTML tags come in pairs, opening tag and closing tag). Look for these and correct it, and the problem should go away. (If you want to familiarise yourself with HTML, a good place to learn is online at W3schools.)

Other things you can try is to do some detective work. Think back to what you did before it happened. Undo that and see if that helped.

Another way to try to solve the problem is to change the width of the content and sidebar (the total width must not be less than the sum of the two). Look for these block of codes

/* Header
----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}

and

/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}

For the minima template, change width:660px; to for example width:800px;

Then look for

#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}

and change the widths to, for example, width:500; and width:270; respectively (note that they total up to less than 800).

Preview and see if the changes are what you want. If so, save the template.

Always remember to backup your template before you fiddle with it.

Read More