01 December 2011

How to add Sidebar gadgets/widgets in separate boxes

Advertisements

You can easily differentiate two or more gadgets of your blog by adding them on different boxes rather than putting them on same large box.


Look for

.sidebar .widget {

You will get following code. It may little different depending upon your template.

.sidebar .widget {
        width:270px;
    margin:30px 15px 10px 15px;
    list-style:none;
    color:#555;
}
.sidebar .widget-content {
        padding:0;
        margin:0;
}
Replace above code with following

.sidebar .widget {
background:#d3d3d3;
border: 1px solid #cccccc;
margin:0 -5px 1.5em -5px;
padding:5px 7px 5px 7px;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Adjust the background, border and padding as per your needs and save the template.

Related Posts

2 comments

January 29, 2012 at 7:39 PM

in the new blogger style i don't find the .sidebar section. can you please help me?
thank you!

February 1, 2012 at 5:21 AM

@ a dreamer.

In some new templates it is present as follows

.sidebar .widget{margin:0 0 15px 0;padding:10px;border:1px solid #D7D7D7;background:#F3F3F3;}
.main .widget{margin:0 0 5px;padding:0 0 2px}

You can try to search

.main .widget

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More