Thursday 1 November 2012

Create A Author Box

Hi friends, I am back with a blogger widget after so many days. Anyway, today I am presenting you a nice about the author box for blogger. The main feature of this widget is that it is not having any additional effects or anything special, its just simple or classic. Its blue and do you want to see its demo ?
Live Demo
AuthorAuthor - My name is Deepak Sah and I am the owner of Ezine Bloggers I am just a techie who likes to share my ideas with you. I am having interests in gaming and exploring new tricks in computer and mobile phones. Now I am working on creating poker tricks. I am interested in doing SEO also.

Have You Liked It ? In this widget, I haven't added the Facebook, twitter links and all. If you want, you can add that and call me if you need any assistance. I had just only added my Google Plus Profile link.
For installing that widget, please follow these steps : 

  • Go to blogger and navigate to the templates tab.
  • Below <head> , please paste the code given below : 
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'/>

  • Find this code in your template :
]]></b:skin> 

  • Below the code given above, please paste this code :

    .nibauthor-box {
    background-image: linear-gradient(bottom, rgb(232,245,250) 0%, rgb(173,229,255) 50%);
    background-image: -o-linear-gradient(bottom, rgb(232,245,250) 0%, rgb(173,229,255) 50%);
    background-image: -moz-linear-gradient(bottom, rgb(232,245,250) 0%, rgb(173,229,255) 50%);
    background-image: -webkit-linear-gradient(bottom, rgb(232,245,250) 0%, rgb(173,229,255) 50%);
    background-image: -ms-linear-gradient(bottom, rgb(232,245,250) 0%, rgb(173,229,255) 50%);
     background-image: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(0, rgb(232,245,250)),
                    color-stop(0.5, rgb(173,229,255))
    );
      border-bottom: 3px solid #D4E2E8;
    font-size: 14px;
    font-family:Ropa Sans;
    font-weight:400;
    line-height: 1.5em;
    margin: 0 0 20px;
    padding: 10px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    min-height: 70px;
    }
     .nibauthor-box img {
    border: 2px solid #9ED0DE;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-transform: rotate(+2deg);
    -moz-transform: rotate(+2deg);
    border-radius: 20px;
    display: inline;
    float: left;
    margin: 0 15px 0 0;
    max-height: 64px;
    resize:auto;
    }
     #backlink {
    font-size:8px;
    text-align:right;} 


  • Now, find this code in your template :
<div class='post-footer'>

  • Below the code given above, paste the code given below :
  • <div class="nibauthor-box"><img alt="Author" border="0" height='64px' src="http://i47.tinypic.com/im780i.jpg" style="float: left; margin-right: 5px;" /><b>Author - </b>My name is <a href='https://www.facebook.com/casinodeepak' rel='nofollow' target='blank'>Deepak Sah</a> and I am the owner of Ezine Bloggers I am just a techie who likes to share my ideas with you. I am having interests in gaming and exploring new tricks in computer and mobile phones. Now I am working on creating poker tricks. I am interested in doing SEO also. <div id='backlink'><a href=' http://www.sahensah.com/2012/11/create-author-box.html '>Get This</a></div></div> 
  • Save the template.
  • Done !!
AuthorAuthor - My name is Deepak Sah and I am the owner of Ezine Bloggers I am just a techie who likes to share my ideas with you. I am having interests in gaming and exploring new tricks in computer and mobile phones. Now I am working on creating poker tricks. I am interested in doing SEO also.

Posted by at
Labels: ,