Sunday, 14 July 2013

Tagged under: , , , ,

How To Add CSS3 Rounded Border Wrap In Blogger Template

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.

33 comments:

  1. That's cool . Easy, Simple and handy :) Keep it up .

    ReplyDelete
    Replies
    1. Thanks adeel to land on css3 rounded corner body wrap for blogger, we want to stay you here all the time. We truly appreciate your words. Thanks buddy.

      Delete
  2. as usual! another nice post. Thanx for the post

    ReplyDelete
    Replies
    1. Thanks Sqib Bro for your lovely words and spider of PBT. Bundles of thanks.

      Delete
  3. That really awesome. can i apply this code in Blogger simple template?

    ReplyDelete
    Replies
    1. Yes, you can apply it on every blogger template. It works like a charm.

      www.BloggerDevelopers.com

      Delete
    2. Yes brother you can definitely apply this beautiful css3 borders effect on your blogger blog.

      Delete
  4. Wonderful Trick Bro !
    Really Creative One !

    Regards
    Rizwan Shajahan

    ReplyDelete
    Replies
    1. Yup bro this such nice trick to make blog sides layouts stylishly and make them attractive. bye buddy.

      Delete
  5. Thanx Hafeez It's working for me,great post.!!!

    ReplyDelete
    Replies
    1. Wow thanks that our post have helped you in applying css3 borders effect on your blogger blog. See you next time here.

      Delete
  6. Thanks For This Trick NiCe it's LoOking Great :-)
    www.locasure.blogspot.com

    ReplyDelete
    Replies
    1. thanks for praising our work...See you soon.

      Delete
  7. Nice Border it's look Attractive Thanks for sharing with us Hafeez bro
    Regards
    R.S

    ReplyDelete
    Replies
    1. Yes My Dear, This is a cool and attractive borders sides layout for blogger template. if someone to have like PBT sides layout then they should easily apply this code on their blogger blog.

      Delete
  8. Hafeez brother i want to ask a of topic question. i want to create subdomain. like my site w3mix.com and i creat blog.w3mix.com. is sub domain a good or bad for seo.

    ReplyDelete
    Replies
    1. Bro, subdomains does not effect SEO..
      It helps you to get your blog alexa rank higher.. The traffic you got on your subdomain will be calculated on your domain name..
      Hope you understand.

      www.BloggerDevelopers.com

      Delete
    2. Bro it will not effected SEO, but will difficult in remembering your blog name. people will not easily to remember it. thanks.

      Delete
  9. This comment has been removed by the author.

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. Your comment is removed due to insert blog url in comment body. Do not spam.

      Delete
  11. Thanks Bro,
    Well Post and informative...
    Keep Blogging
    By Ramees from http://protrickshub.in

    ReplyDelete
    Replies
    1. Thanks Too you...keep visiting us and get latest updates about blogger tricks.

      Delete
  12. This is the cool border wrap dear. First, It beautifies the blog and also adjust the widths. Dear, I need the sharing widget which you're using at the bottom of every post. Please share it's code soon. Take Care.

    ReplyDelete
  13. Wonderful CSS trick brother..

    ReplyDelete
  14. Thanks your help..
    Visit
    www.skewline.in

    ReplyDelete
  15. Thanks good post for newbie bloggers who are looking for new modifications.I have some questions ask from you.You have good alexa rank and i think you might get good traffic too.So why did you not monetorize your blog with adsense or using any advertising method?Have you any reasons for that?

    ReplyDelete
  16. Hi! I am Munna Singh before some days I was very worry with our skin surgery with any one I heared about Skin Specialist in Delhi in Klinikesthetika clinic. Then I used this service and I got a best treatment for skin. Now I am very happy to use this service.

    ReplyDelete
  17. it did not worked for me hafeez bro please help.

    ReplyDelete
  18. Is there anyway to make this border wrap be a transparent style for the color?

    ReplyDelete
    Replies
    1. yes just change the value of color from any other to ffffff then it will look white color.

      Delete
  19. These provided information was really so nice,thanks for giving that post and the more skills to develop after refer that post. Your articles really impressed for me,because of all information so nice.school branding uk

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism