• Add Making Rounded Corners With CSS3 On Blogger Blog


    Few people kept mailing me regarding the rounded corners in blogger/blogspot blogs. They wanted to show rounded corners rather than the straight edges. Since the number of mails kept increasing regarding this tutorial, I thought to make a post about them. Pretty good example to illustrate this would be consider the following boxes. Just look at the corner sections of each box.

    The former looks curved while the latter is flat. That's the trick we are going to learn in this post, that is, to add rounded corners on blogger/blogspot blogs. You may use them in displaying a note(like I do) or may be on the navigation bars or to display HTML codes withing blogger posts and so on. So, you may use them where ever you want. Remember that, this trick will  be visible only in the latest versions of Mozilla Firefox, Chrome, Safari and Opera and not in IE. Check out the browser specific attributes table below.  

    Enough of the stories!!! Let's implement this trick on our blogs now!!! Just, follow these simple steps.


    1) Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template. 
    2) Search for the following code in your blog. You may use "CTRL+F" to fasten your search results.


    ]]></b:skin>
    3) Now, paste the corresponding piece of code just above the line you searched in step 2. Paste according to your choice; not all of them.

    EXAMPLE 1 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.
    .example1 {
    background-color:#F1F1F1;
    border:3px solid #DDD;
    text-align:left;
    width: 525px;
    margin:15px 35px 15px 15px;
    padding:5px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }

    EXAMPLE 2 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.
    .example2 {
    background-color:#F1F1F1;
    border:3px solid #DDD;
    text-align:left;
    width: 525px;
    margin:15px 35px 15px 15px;
    padding:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }

    EXAMPLE 3 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.
    .example3 {
    background-color:#F1F1F1;
    border:3px solid #DDD;
    text-align:left;
    width: 525px;
    margin:15px 35px 15px 15px;
    padding:5px;
    -webkit-border-radius: 36px 12px;
    -moz-border-radius: 36px 12px;
    border-radius: 36px 12px;
    }

    EXAMPLE 4 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.
    .example4 {
    background-color:#F1F1F1;
    border:3px solid #DDD;
    text-align:left;
    width: 525px;
    margin:15px 35px 15px 15px;
    padding:5px;
    -webkit-border-top-left-radius: 30px;
    -webkit-border-top-right-radius: 30px;
    -moz-border-radius-topleft: 30px;
    -moz-border-radius-topright: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    }

    4) Once you have pasted the code. Save the template. Now, your ready to display them in the place you want. Just use a span or div tag to use the CSS3 of your choice. That is, paste the following code any where in the template area or as a HTML/JavaScript using "Add A Gadget" option on blogger design page or within your posts.


    <div class="example1">PLACE YOUR CONTENT HERE</div>
    5) Now, save your code. That's it!!!

    1 comments:

    1. Thanks your blog is awesome.

      Taking the Prime Minister’s ‘Digital India’ vision forward Videocon Telecom announces free data to all its female subscribers coming aboard; makes india.gov.in website free for all subscribers.

      ReplyDelete