How to drop shadow effect around the main wrapper in blogger.

Osama Zia | 6/28/2013 07:10:00 pm | | |

A good blog needs to be clean and easy to follow. Applying different effects, styling the wrappers, designing a beautiful logo and indeed your unique content can boost everything. You can get subscribers, followers and social interaction through your blog, so it needs to be your identity. People related to internet often ask for online portfolio instead of Curriculum Vitae now days. So let’s see how we can help you to improve your blog layout.
For Demo Purpose you can see the shadow dropped around our main layout.

How to drop shadow around the main/central layout.

Follow the easy steps :

  • Open your blogger dashboard.
  • Click on TEMPLATE >> EDIT HTML.
  • Press CTRL+F
  • Now search for MAIN-WRAPPER.
  • The CSS will look like this.
#main-wrapper
{background: #FFFFFF; overflow: hidden; padding: 0px 4px 0px 4px; width: 970px; border: 1px solid #dfdfdf; margin: 0 auto 15px auto;}

  • Now add the following code in between the braces.
 -moz-box-shadow:0px 0px 10px 7px rgba(119, 119, 119, 0.3);
-webkit-box-shadow:0px 0px 10px 7px rgba(119, 119, 119, 0.3);
box-shadow:0px 0px 10px 7px rgba(119, 119, 119, 0.3);

  • After adding the provided CSS the code will look like this. 
#main-wrapper {background: #FFFFFF; overflow: hidden; padding: 0px 4px 0px 4px; width: 970px; border: 1px solid #dfdfdf; margin: 0 auto 15px auto; -moz-box-shadow:0px 0px 10px 7px rgba(119, 119, 119, 0.3);
-webkit-box-shadow:0px 0px 10px 7px rgba(119, 119, 119, 0.3);
box-shadow:0px 0px 10px 7px rgba(119, 119, 119, 0.3);}

  • Save template and you are done. 

What more!


Drop shadow effect has nothing to do with your page loading speed. It is based on CSS. It gives a nice look to your blog. You can further customize the shadow color. If you find any difficulty in adding the easy CSS, bug us, we are here to help you.

About the Author

“My blog is a collection of answers people want to hear to questions they didn’t ask.” Meet Me. I am Osama Zia! An Aviation Student and a part-time blogger. You can find me on Facebook, Follow me on Twitter or circle me on GOOGLE +

If you found this post helpful. Share, Subscribe or Read Related Articles.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

Related posts

0 comments:

Recent Comment

Followers

Blog Archive

Copyright © 2013 Ozy Network. WP Theme-junkie converted by BloggerTheme9
Blogger template. Proudly Powered by Blogger.
back to top