Sidebar control, Space between Gadgets

http://www.blogbulk.com/2008/11/blogger-sidebar-titles-customization.html

Blogger Sidebar Titles - Customization

November 27, 2008

In this tutorial, I'll explain how to customize Sidebar Titles in Blogger. How to change their clothes. By default, they are kind of "naked" and empty.
But there's a lot that can be done. We can give them some background color, even a picture, an icon beside them, borders, lines......

WHAT CAN WE DO IN BLOGGER OPTIONS?
Well, not much. You can change the Font Color of the title, Size, weight and Font family.
But in some templates (like Minima), the Date Title (above posts) has the same style likeSidebar title.
That means - the same changes you make in sidebar titles, also applies on Date title. Which ain't nice.
But if this works for you, and you don't need more, go to LAYOUT --> FONTS AND COLORS, and adjust these settings as you like....

!! Before doing anything from the options below, back up your template !! (it takes a minute...)

Now, here's the part of code we will modify (it may look a bit different in your template, but it's important that you find the line ".sidebar h2 {"):

.sidebar h2 {
margin:0;
padding:0 0.2em;
line-height:1.5em;
}

Some templates don't have separate style for Sidebar Titles (like Minima), so you have to add it into template. To do that, go to:
LAYOUT ► EDIT HTML, and insert the following part of code (in orange), ABOVE theexisting part ( in pink):

.sidebar h2 {
margin:0;
padding:0 0.2em;
line-height:1.5em;
}


]]></b:skin>
</head>

...we are going to use this part of code for customizing our sidebar title in blogger.

BORDERS IN SIDEBAR TITLE
To add some borders around your Sidebar Title, add the line (in green) into the code:

.sidebar h2 {
border:1px solid #000000;
margin:0;
padding:0 0.2em;
line-height:1.5em;
}

...we've added a border all around the Sidebar title:

• colored black (#000000)
• stroke 1px (thickness)
• style SOLID

You can change all of these settings to whatever suits you....Read more about border styles here. Here's a few more examples:
- to "underline" the Sidebar Title, add this line:

border-bottom:1px solid #000000;

- to add a dotted border under the title, and on the right side of it:

border-bottom:1px dotted #000000;
border-right:1px dotted #000000;

....once more, take a look at border styles here.

***

BACKGROUND COLOR BEHIND SIDEBAR TITLE
To add some background color behind your Sidebar Title, add the line (in green) into the code:

.sidebar h2 {
background:#E17820;
margin:0;
padding:0 0.2em;
line-height:1.5em;
}

...change the hex color (#E17820) into one that suits you...

***

BACKGROUND PICTURE (image) BEHIND SIDEBAR TITLE
First you need to make (or find some picture you'd like to appear in title. You have to size it according to your Sidebar width (otherwise, it will get cropped).
For example, the picture I used is 220px wide, and has 53px height. Well, to be honest, you'll have to play with this a bit, until you get it right...

When the pic is ready, you have to upload it to a free web host (like Photobucket, Picasa, TinyPic...) to get the URL. When you've done that, add the line (in green) into the code:

.sidebar h2 {
background:url(URL OF THE PICTURE)no-repeat;
margin:0px;
padding:0px 0.9em;
line-height:53px;
}

...replace URL OF THE PICTURE with the URL address of the hosted picture...
...in orange, you can adjust alignment of the title (I've pushed it to the right a bit)...
...in blue, increase or decrease the line height (so if you have picture 53px of height, set the line height to 53px)...

***

BACKGROUND PICTURE (image) INSTEAD OF SIDEBAR TITLE
Now, this is a cool one. And my favorite. The idea is to remove (hide) the default header of sidebar title, and to place a picture (image) instead of it.

1. you need do make (create) the picture. Or find one that you like. make sure that your pic will fit in the sidebar without being cropped. size it properly. try a few times, and you'll get it....

2. upload it to a free web host (Photobucket, Tinypic....) to get the URL address.

3. go to template LAYOUT ► PAGE ELEMENTS, and click on Add a Gadget in the sidebar. Choose HTML / JavaScript from the list. Place the following code inside the box (leave the title empty):

<img src="URL OF YOUR PIC"/>

...just change the orange part with the URL address of your hosted picture.....Save Settings.

4. now, there it is. only thing left to do is to arrange it ("drag" it), so the Gadget with a picture will be above the "Blog Archive" Gadget. Like so:
...that's it. Do the same for "Labels", "About me" and everything else you want.....


Remember:

• you can combine all of those examples (background color + border, for example)
• there's a million combinations...be creative

=====================================================================================

http://vendyxiao.com/how-to-customize-blogger-sidebar-titles/

Before you modify Blogger Sidebar Titles, make sure you back up your template. First thing you have to do is enter your Blogger Dashboard. Click Template and click Edit HTML and Proceed. Make sure you checked Expand Widget Templates. Some of the code may be different in your template. But the important thing is find “.sidebar {“. My Blogger Template looks like below

 .sidebar .widget h2 {
 line-height:1em;
 }

Some templates don’t have separate style for Sidebar Titles, so you have to add the code manually above the

]]></b:skin>
</head>

Change Blogger Sidebar Title

To change blogger sidebar title, all you will do is modify the sidebar code i mentioned above. If you familiar with CSS, it will be easy to modify this template. Just place a line of code to sidebar code like below (blue color).

.sidebar .widget h2 {
 line-height:1em;
 background:#E17820;
 }

Border

border:1px solid #000000;

• 1px (thickness)
• solid (style)
• #000000 (border color)

Other styles for Borders :

• none: no border at all
• dotted: series of dots.
• dashed: series of short line segments.
• solid: single line segment.
• Double: two solid lines.
• Groove: ‘carved’ into the canvas.
• ridge: like it is coming out of the canvas.
• inset: like it is embedded in the canvas.
• outset: like it is coming out of the canvas.

you can also set different style in each side of the border

border-bottom:1px solid #00000;
border-top:1px dotted #A43232;
border-right:1px double #223421;
border-left:1px ridge #F23551;

Background Color

background: #E81720;

• #E81720 (background color)

Background Picture

background:url(URL OF THE PICTURE)no-repeat;

Replace Sidebar Title With Your Own Image

You can also change your Sidebar Title with your own image. It’s very easy. Just follow the step below

1. Upload the picture (you can upload it at Blogger or free web host like Photobucket,Tinypic, etc) and get the URL address.
2. Enter Blogger Dashboard
3. Click Layout and Add a Gadget
4. Choose HTML/Javascript
5. Leave the title empty and place the following code inside the box

===========================================================================================

http://www.southernspeakers.net/2010/11/remove-spaces-between-gadgets-in.html

Remove Space between Gadgets in Blogger Sidebar

Spoken by Yogaratnam N. 

Here's a popular question: "How do I remove spaces between gadgets on my sidebar?" I have seen this question being asked many times that I think a proper straight-forward tutorial is needed for this matter for future references. One might want to remove spaces between gadgets for various reasons. A common one is to use a picture gadget as a title, so the picture gadget needs to be really close with the next gadget to serve as a title. If you're interested in reducing space between your blog posts, see this tutorial instead.

Step 1:

As you might have already guessed, you have to identify your Gadget's ID. You have lots of elements in a page. CSS allows you to address a particular element or a particular group of elements via its class or ID. Please refer to this post on a brief note about IDs and Classes. Enough with the lecture, check out how you can identify your gadget's ID here. To play safe, identify both top and bottom gadgets' IDs (the space that will be removed lies between these two gadgets)

This is the ID of my gadgets (using my favorite add-on FireBug of course):

So my top gadget's ID is Label1, and my bottom gadget's ID is BlogArchive1.

Step 2:

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog. 

?

1 2 3

#Label1{ margin-bottom: -50px !important; }

Replace 'Label1' with the ID of your top gadget. By doing this, the gap between these two gadgets will be reduced. It goes without saying that you'd have to change the value 50 accordingly. You can use the following code too:

?

1 2 3

#BlogArchive1{ margin-top: -50px !important; }

Where 'BlogArchive1' is the ID of your bottom gadget. You have seen two different ways on how you can reduce the gap between your gadgets. In most cases, just use either one of these methods and it will work like a charm. In some rare cases, you might have to use both these methods combined.

Also, if you want to reduce 2 gaps between 3 gadgets, checkout the screenshot below. It speaks for itself:

Now that you've gotten the idea, it's just a matter of creativity on how you use these useful tools. And yes, you can use 'margin-right' and 'margin-left' CSS attributes as well to move your gadgets/elements horizontally. Have fun!