Rounded Corners for Blogger Posts
Happy Easter everybody! There wasn't a post last week, as I was too busy in the forum helping people. So here I am, this week, with a brand new post. Blog reader (dirtycowgirl) asked if "there is a simple way to round off the corners on blog posts". I'll show a way to make your posts have rounded corners in this week's post. Did I mention that it is a one-step tutorial?
If you're using Simple, Ethereal or Travel template, this tutorial will not be any good to you as these templates don't have corners for the post sections at all.
That's all folks. Again, Happy Easter. Cheers!
If you're using Simple, Ethereal or Travel template, this tutorial will not be any good to you as these templates don't have corners for the post sections at all.
If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -
If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -
Find for /* Posts ----------------------------------------------- */ - paste the following code directly below this line:
The code in place:
To adjust the radius of the corner, change the values 10px above to something else (all four of them).
Some of you might be wondering what will happen if you add this code directly in Template Designer (Template Designer - Advanced - Add CSS). You can still do that, but your corners won't be rounded in Internet Explorer. Even with the method that I've shown above, you can only get rounded corner for the top two corners in IE. That's just the way IE works, don't ask me why.
If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -
Find for /* Posts ----------------------------------------------- */ - paste the following code directly below this line:
.date-outer, .post-outer {
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
-goog-ms-border-radius: 10px !important;
border-radius: 10px !important;
}
The code in place:
To adjust the radius of the corner, change the values 10px above to something else (all four of them).
Some of you might be wondering what will happen if you add this code directly in Template Designer (Template Designer - Advanced - Add CSS). You can still do that, but your corners won't be rounded in Internet Explorer. Even with the method that I've shown above, you can only get rounded corner for the top two corners in IE. That's just the way IE works, don't ask me why.
That's all folks. Again, Happy Easter. Cheers!
Category Article Tutorial
