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!
