November 2, 2012

Add CSS3 Rounded Border Wrap To Blogger Templates

Do you want to renovate your Blogger Template by adding a Cool CSS3 Round Border to it? Though, Blogger is not famous for its customizing and optimizing but still we can make a masterpiece with it.  Everyone loves simplicity, but it is essential to have a spotless theme that reflects professionalism. By adding Round border to blogger template, a person adds more spice to his blog. Moreover, he can even add multiple backgrounds that will surely amuse his readers. Therefore, after receiving lots of requests from our readers today finally we are sharing our CSS3 Rounded Border Wrap for Blogger enable websites.

Why To Use CSS3 Rounded Border WRAP:

How many people’s brains are unclear that whether their site fits the resolution of some old monitors? By saying that we are living in the modern era, a person is running away from the truth, and that is most people are still using old monitors to browse the whole internet. If a Person has decent traffic, then the probabilities are particularly on a higher side that most of his visitors are browsing his website through their smallish monitors. Since, his site is design for large screen monitors so it would not fit smallish monitors. Therefore, it is essential to add a wrap border to your templates that automatically fits the screen of large and small monitors.

How To Add CSS3 Rounded Border Wrap In Blogger Templates:

The steps mentioned below are extremely straightforward all you need to do is to follow them as it is. It would hardly take 5 minutes to complete the integration. Do as mentioned below.

  • Go to Blogger.com >> Template.
  • Take Backup of Template.
  • Now Press Edit HTML >> Proceed.
  • Then within your template search for ]]></b:skin> and above it paste the following CSS3 Coding.
#mblwrap {
  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 in template search for <body> and just below it paste the following HTML code.
<div id='mblwrap'>
  • Last but certainly not the least search for </body> and above it paste the following HTML code.
</div>
All Done: That’s it save your Template, and CSS3 Rounded border WRAP is set up to your blog. Now go ahead enjoy the picture perfect results. Note: This plugin is made by the MBL Developers, so don’t replicate without the permission of the administrator. . 

From The Editor’s Desk:

Hope you have enjoyed our personalized Wrap Widget. It’s been a while now that we haven’t shared any Blogger Templates. Therefore, our developers are trying their level best to formulate a masterpiece. There are some surprises coming up so stay tuned. Take a lot care of your family till then, Peace, Blessings and happy Wrapping. 

26 comments:

  1. KiremithanemNovember 2, 2012 at 12:17 PM

    Nice tutorial and great advice but iif i want to use a curly design border ?
    İs this posible and how?
    Thanks a lot.

    ReplyDelete
    Replies
    1. Syed Faizan AliNovember 3, 2012 at 1:14 AM

      We will Try our best to design Curly Border. Peace and Blessings

      Delete
  2. UnknownNovember 2, 2012 at 3:35 PM

    nice tutorial..

    www.MoreBlogTools.com

    ReplyDelete
  3. UnknownNovember 2, 2012 at 8:29 PM

    Thankyou !!!!!! It bought a very compact look for my blog !!

    Love u for this :D

    ReplyDelete
    Replies
    1. Syed Faizan AliNovember 3, 2012 at 1:14 AM

      We are Pleased that you are happy with the end results. Peace and Blessings

      Delete
  4. UnknownNovember 2, 2012 at 8:57 PM

    Nice Tute. why you used mozilla prefix -moz-border-radius:10px; ? It is now obsolete.

    And I want to write a Guest Post in your Blog, How can I do that?

    Pure CSS3 Expanding Vertical Navigation Menu for Blogger

    ReplyDelete
    Replies
    1. Syed Faizan AliNovember 3, 2012 at 1:15 AM

      Well! Currently we are't accepting guest posts. However, in the near future we will surely accept them. Peace

      Delete
  5. UnknownNovember 3, 2012 at 10:15 AM

    great work faizan.keep the flow

    ReplyDelete
  6. UnknownNovember 5, 2012 at 4:40 AM

    Hi Faizan

    Is to possible to do with word press?

    ReplyDelete
    Replies
    1. Syed Faizan AliDecember 10, 2012 at 3:43 PM

      Yeah, It is possible to in WordPress to but the Dynamics of WP is different. You can try your luck. Peace

      Delete
  7. Solo November 6, 2012 at 1:22 AM

    Thanks a lot for sharing this...it works perfect. Keep it up!

    ReplyDelete
  8. UnknownNovember 27, 2012 at 4:56 AM

    hey friend....
    can you help me how can i create that rectangular background (saying my bloggerlab in left) in which you have written the codes....

    ReplyDelete
    Replies
    1. Syed Faizan AliDecember 10, 2012 at 3:39 PM

      Yeah, Sure we have already shared an Article on it. We hope it is easy to Apply. Consider the Following URL

      http://www.mybloggerlab.com/2012/04/insert-html-css-javascript-codes-in.html

      Peace and Blessings

      Delete
  9. AnonymousNovember 28, 2012 at 4:02 PM

    This comment has been removed by a blog administrator.

    ReplyDelete
  10. AnonymousNovember 30, 2012 at 1:46 AM

    Syed This is simply awesome Thanks !!!

    ReplyDelete
  11. UnknownDecember 3, 2012 at 8:36 AM

    wow...awesome
    http://softwaresuneeds.blogspot.in/

    ReplyDelete
  12. Mirza Mujtaba BaigDecember 10, 2012 at 12:01 PM

    I don't have body tag in my html; is there any other word for that

    ReplyDelete
    Replies
    1. Syed Faizan AliDecember 10, 2012 at 3:38 PM

      Can You Please Provide the URL Of your Website so we can tell where you can Paste the Coding. Peace

      Delete
  13. Syed Faizan AliDecember 10, 2012 at 3:42 PM

    IF you aren't able to Find Body Tag then Search for

    <body and paste the Coding when it Gets end.

    Alternative: It would be better if you provide the URL of your Blog so we can tell you more properly. Peace

    ReplyDelete
  14. Mirza Mujtaba BaigDecember 11, 2012 at 5:15 AM

    Dear Faizan; URL of my website is wwww.pollutionpollution.com

    ReplyDelete
    Replies
    1. Syed Faizan AliDecember 11, 2012 at 7:18 AM

      In your Template Search For <body class='loading'> and Just Below it Paste The

      <div id='mblwrap'>

      Now Once Again Search For </body> And This Time Above it Paste the Ending DIV

      </div>

      Hope that Answers your Question. Peace

      Delete
  15. Mobile ShopDecember 13, 2012 at 8:01 AM

    I have added this to my blog but i think my menu is somehow distrubed.Can you please check out what may be the problem.
    Regards,Azad hussain laskar.

    My blog:
    Visit Azadfunclub

    ReplyDelete
  16. TeknojestMarch 11, 2013 at 3:04 PM

    I have an error
    The element type "body" must be terminated by the matching end-tag "

    ReplyDelete
  17. UnknownMarch 12, 2013 at 2:10 AM

    Nice post really like it
    Visit my blog
    PAK Games and Softwares

    ReplyDelete
  18. AnonymousJuly 7, 2013 at 2:31 PM

    love this tutor. tnx 4 sharing

    ReplyDelete

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.