• Add Making Out Line With CSS3 On Blogger Blog


    Few people kept mailing me regarding the outline 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.

    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.

    Style 1 
     
    .csscode {
    margin : 10px 25px 10px 15px;
    padding : 10px;
    clear : both;
    list-style-type : none;
    background : #F2F7FF;
    border-top : 1px solid #AAAAAA;
    border-right : 1px solid #AAAAAA;
    border-bottom : 1px solid #AAAAAA;
    border-left : 1px solid #AAAAAA;
    }

    Another Style

    .postCode{
    background: none repeat scroll 0 0;
    border:1px solid Silver;
    height:'auto';
    margin:10px;
    overflow:auto;
    padding:6px;
    text-align:left;
    }

    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="csscode">
    PLACE YOUR CONTENT HERE</div>

    5) Now, save your code. That's it!!!

    0 comments:

    Post a Comment