- Adding css is really easy with the new Template Designer. Simply click on the design tab in you Blogger admin, next go to the Template Designer, once it loads click on the Advanced tab, and at the bottom of the element list you will find the "Add CSS" option.The code below will add roundedness to the main container.
div.content-inner {
-moz-border-radius: 10px; /*Firefox*/
-webkit-border-radius: 10px; /*Safari & Chrome*/
-khtml-border-radius: 10px;
border-radius: 10px; /*Standard CSS3 declarations & IE9*/
}
The class content-inner is how we target the container div and the three declarations will cover all the major browsers as noted in the css comments.
This will create symmetric rounded corners, however if you would like to define each corner individually the standard css parameter short hand structure applies and the other possible options are:
border-radius: TOP-LEFT TOP-RIGHT BOTTOM-RIGHT BOTTOM-LEFT;
If you would like to know more about available rounded corners and borders, as well as browser compatibility for each case there is a good summary here.
Following the code above you can now also round the header's corners:
div.header-outer {
-moz-border-radius: 10px; /*Firefox*/
-webkit-border-radius: 10px; /*Safari & Chrome*/
-khtml-border-radius: 10px;
border-radius: 10px; /*Standard CSS3 declarations & IE9*/
} 
Before and After Screenshots
Dealing With Old Browsers
Now for the tricky part. As mentioned before using CSS3 has the unfortunate downside of not being supported by older browsers (mostly Internet Explorer, all the way up till version 8). Now there are two choices - either provide a fall-back solution or accept the fact that the page will look different in less capable browsers.
For quite a while now there has been a growing trend to actually do the latter. Just like we provide progressive enhancement for JavaScript functionality, same approach can be taken with CSS. Rather than create a pixel perfect, lowest denominator design across all browsers, we us the optimal way for achieving the desired effect, and allow he design to degrade gracefully to a simpler version.
Alternatively if you would like to dazzle your old-browser-fashioned audience you can use JavaScript and/or extra markup and images that would work everywhere. You could try using Curvy Corners or Spiffy Corners.
How to Add Borders to a Blogger Footer Blogspot
04/07/2012 - 0 CommentsIn this Blogger tutorial I going to show you how to add border styling to the new footer. You will learn how…
Blogger Search Description - Meta search description
28/03/2012 - 4 CommentsFinally, Blogger introduces the new "Meta tags description" and "Search description" to individual pages…
10 Advanced Comment Tricks for Better SEO
10/10/2013 - 0 CommentsMany people can come up with some form of advice about SEO, but very few people give you advice about how to…
Over-Optimized Sites will be Penalize from Google's Algorithm Update
24/09/2012 - 0 CommentsDuring a SXSW panel, Matt Cutts, head of Google's search spam team, announced that Google has been working…
How To Replace "Post A Comment" Message In Blogger With Image Or Text
08/10/2013 - 0 CommentsYou can replace post a comment message that appears at your blogger comment box header section with image,…
Newbie Bloggers Tips that Must Follow
23/08/2012 - 0 CommentsWhenever a newbie blogger starts up his own blog, he has to take many decisions and setup his goals. In the…
Add The Most Viewed Post Widget In Blogger
25/06/2012 - 0 CommentsAdding the most popular posts widget in blogger is as easy as drinking a cup of tea. This widget lets you…
How To Automatically Redirect A Blogger Blog To Another URL
16/10/2013 - 0 CommentsThere are a number of reasons you may want to automatically send visitors to your blog to another URL or from…
Random Posts...!!!
Posted in: blogger,Corners,Rounded,Template
If You Enjoyed This Post Please Take 5 Seconds To Share It!
0 comments:
Post a Comment
Please feel free to comment on this topic.