Shadow Effect For Content Area And Sidebar Area In Blogger

Blogger's template are simple, clean and they do not have any eye catching features and tweaks. Due to this blogger user apply the external templates, but there is also some disadvantages of using the external templates. External templates need to be customize according to your needs but they are very difficult to customize in respect of widths, widgets and header.
They are difficult to customize the for the better SEO. Therefore, it is always better to use blogger's template and customizing them.

In this tutorial I will explain you about adding shadow effect to blogger Content/Blog area and to sidebar area. Shadow effect can be added to the whole blog also. It is not so difficult to add shadow, you just need to follow below steps.
Before doing this you can look at live preview.

Adding Shadow Effect To Content Area

1) Goto to your blogger dashboard.
2) Now, Go to Template, Click on Edit HTML > Proceed.
3) Before making any changes to your blogger template back up your current template.
4) Now, Press Ctrl + F and search for below code:

 .main-inner .column-center-inner  

5) Now, You need to copy the below code:

 -moz-box-shadow:  3px 3px 5px 6px #ccc;  
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  
  box-shadow:     3px 3px 5px 6px #ccc;  

6) Paste the above code just below this code:

 .main-inner .column-center-inner {  

7) Now, save the template and you can see the shadow effect for your content area in your blog.

Adding Shadow Effect To Sidebar Area

The process of adding shadow to side bar is similar to adding shadow to content area. For this:

1) Goto Template >> Edit HTML >> Proceed.
2) Press Ctrl + F  and search for below code:

 .main-inner .fauxcolumn-right-outer  

3) Now, again you need to copy below code:

 -moz-box-shadow:  3px 3px 5px 6px #ccc;  
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  
  box-shadow:     3px 3px 5px 6px #ccc;  

4) Paste above code below this code:

 .main-inner .fauxcolumn-right-outer {  

5)Now, save your template and check your blog for sidebar shadow.

After following all above steps you cann see the shadow effect for sidebar and content area, but you can say that it is not looking so good because the shadow betwwen sidebar and content area are overlapping on each other.

You can get rid of this by creating space between sidebar column and inner content column. I will explain you to do this in my next post.

Note:- If your are having some problem regarding this you can comment below.