Create Each Of Widget Box Separately

If we are visiting one Blog or website into another one, we may notice that some of Blog appearance looks nice by creating box separately both main post and widget. Some of webmaster will do it to get more professional compare with just a normal blog. Mostly, when visitor is coming into your Blog, the first impression is how to design your Blog, this can interact visitor to stay along time to your Blog. That is why, i recommend you to apply this way in order to optimize your Blog appearance. The example like showing below screenshot:

The question is how we do that, of course we must to add CSS code inside our template. Normally, there have two parts which are sidebar widget ( All widgets that you have will be customized into box separately from another widget ) and main widget (this is where the area you usually post the article ), but don’t worry that all are easy as long as you follow some simple steps below:

1. first in first, Log in to your blogger account
2. Choose Design> Edit HTML element (important: always backup your template before add code inside)
3. Now, you must find the script like below, looks the CSS code combines to become one.

            

            sidebar widget, .main .widget { 

            border-bottom:1px dotted $bordercolor;

            margin:0 0 1.5em;padding:0 0 1.5em;

             }

4. It is better if you divide into two parts like below

.sidebar .widget{

border-bottom:1px dotted $bordercolor; 

margin:0 0 1.5em;

padding:0 0 1.5em; 

}

.main .widget {
  border-bottom:1px dotted $bordercolor;

  margin:0 0 1.5em;
  padding:0 0 1.5em;

}

5. After you divide, then you must add the code for background color (please refer to this site for getting color code), change red color with color code whatever you like

.sidebar .widget {
background:#FFFFFF;
border:1px solid #CCCCCC;
margin:0 0 1.5em;
padding:0.5em;
}

.main .widget {
background:#FFFFFF;
border:1px solid #CCCCCC;
margin:0 0 1.5em;
padding:0.5em;
}

6. Copy and paste above code into your template, if you use new blogger, you can add under widget code. Then “Save” it.
7. The CSS code can be changed. You can change the border, margin, padding to adjust your blog. Furthermore, you also can change background with any picture, or anything with your creativity.
8. In addition, the box on your widget can also be modified to be more bended, just add this below CSS code.

.sidebar .widget {
background:#FFFFFF;
border:1px solid #CCCCCC;
margin:0 0 1.5em;
padding:15px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
}