Css3 Rounded Border Corner Wrap for Blogger
Rounded body wrapper shows at every corner of the blog. It covers the area of the outer wrapper of a blog designing. By default there is no rounded corners styles in Blogger Templates. These all templates looks guilty and has no professional views. It show as simple floating area in every sides of the template. But now we could easily customize it by adding splendid Css3 rounded body wrap codes inside the blogger templates. By adding such styles your blog will be turned out into professional looks and will becomes more attractive in the eyes of Visitors. Moreover it will also help in resizing your blog screen resolution according to different computers monitors.

So after receiving a lot of requests from our loyal readers finally they compel us to share the PBT rounded body corner with us. So be applying this excellent Css codes you will have get the splendider sides designing for your blog. So in our today post we will show you how to add Css3 Rounded Border Corner Wrap in Blogger Template.
 

Why to Use Rounded Border wrapper in blogger

There are alot of reasons to apply this style on your blog. i have applied the same codes only for Designing to make our blog sides layout more attractive. Some people apply this style to reduce theirs blog width with some awesome designing borders layout. Most of them use it for resizing the blog width automatically on different computers screens. 
You might have observed that your blog will look and generate randomly screen resolution effects if you views it by different types of PC monitors & LCD screen. So to overcome all these problem we have to add some piece of code chunk in the blogger template to have splendid rounded borders body wrap for blog. Lets do some customization to enable this features for blog.

How To Add CSS3 Rounded Border Body Corner In Blogger

You could easily customize and add some piece of code chunk in blogger template to apply rounded body style on your blog. follow the below simple steps carefully to apply this style.

  • Go to Blogger Dashboard:
  • Got to Template >> Edit HTML:
  • Now search for this   ]]></b:skin> tag
  • Now past the below given CSS3 Coding. before ]]></b:skin>

#pbtwrap {
  background: #Ffffff;
  width: 960px;
  margin: 10px auto 5px auto;
  padding: 0;
  position: relative;
  border-right: 15px solid #333;
  border-left: 15px solid #333;
  border-top: 10px solid #333;
  border-bottom: 15px solid #333;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  box-shadow: #333 0px 1px 3px;
}
  • Now once again Search for <body> tag
  • Past the below given code just below the <body> Tag tag

<div id='pbtwrap'>
  • Now search For </body> tag and above it paste the following HTML code.
  •  
</div>
Finally You done Almost Now you save your template and refresh the page:

How Rounded Corner Body For Blogger will Look Like ?

Below are the some real example of applying the same style on your blog. You can see the best illustrative example in the below screenshots.

1:

Rounded Border Corner Body Wrap for Blogger


 2:

Css 3 Rounded Border Corner Wrap for Blogger



Need Customization Help

Guys this Was little bit about the Rounded Body Wrap Style for Blogger blog. We have brought this tutorial by doing great effort. You could easily customize by the sides color by changing this #Ffffff;. So  If are facing any problem in implementation then do not wait just post your query in the comments section and get instant result.

We hope that you all of you guys would like and love our tutorials. Guys you know that we have shared alot of tutorial based on Blogger Tips and Tricks. which were truly appreciated by newbies. Hope To get your instant feedback and your Lovely Support. Thanks Buddies do not forget to join Social community.

0 comments Blogger 0 Facebook

Post a Comment

 
fullupdated © 2013. All Rights Reserved. Share on Themes24x7. Powered by Blogger
Top