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.
About the Editorial TeamThe Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
26 comments
Nice tutorial and great advice but iif i want to use a curly design border ?
İs this posible and how?
Thanks a lot.
nice tutorial..
www.MoreBlogTools.com
Thankyou !!!!!! It bought a very compact look for my blog !!
Love u for this :D
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
We are Pleased that you are happy with the end results. Peace and Blessings
We will Try our best to design Curly Border. Peace and Blessings
Well! Currently we are't accepting guest posts. However, in the near future we will surely accept them. Peace
great work faizan.keep the flow
Hi Faizan
Is to possible to do with word press?
Thanks a lot for sharing this...it works perfect. Keep it up!
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....
Syed This is simply awesome Thanks !!!
wow...awesome
http://softwaresuneeds.blogspot.in/
I don't have body tag in my html; is there any other word for that
Can You Please Provide the URL Of your Website so we can tell where you can Paste the Coding. Peace
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
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
Yeah, It is possible to in WordPress to but the Dynamics of WP is different. You can try your luck. Peace
Dear Faizan; URL of my website is wwww.pollutionpollution.com
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
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
We checked your site and it is fine. :)
I have an error
The element type "body" must be terminated by the matching end-tag "
Nice post really like it
Visit my blog
PAK Games and Softwares
love this tutor. tnx 4 sharing
Post a Comment
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.