Friday, January 4, 2013

About Author Widget for Blogger



Blogger provide a profile widget, contains only a link to Google plus profile. Which is look like ordinary!!! Today I'm presenting an about us widget which having one fixed section for image and second liquid are for description.

This widget can place at the sidebar, bottom of post or in footer of blog. This widget is also SEO friendly. In this added rel="author" attribute for displaying author picture into Google search result. Below given snapshot of widget when your widget resize.
Widget having minimum width up to 300px and minimum height up to 120px.

Installation

Install in Sidebar

  1. Login to Blogger.
  2. Go to Layout > Add a Gadget.
  3. Select HTML/JavaScript Gadget.
  4. Paste Below Code and Save.

<style>
#aboutAuthorGTI {
    width:90%;
    min-width:300px;
    margin-left:auto;
    margin-right:auto;
    min-height:120px;
    padding:3px 3px 10px 3px;
    background-color:#f4f4f4;
    border-radius:3px;
    -webkit-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#aboutAuthorWrapperGTI {
    padding-left:10px;
}
#authorImageGTI {
    float:left;
}
#authorImageGTI img {
    margin:12px 20px 5px 15px;
    border:#fafafa solid 3px;
    -webkit-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#authorFollowGTI {
    float:right;
    margin-top:5px;
    height:15px;
    margin-bottom:9px;
}
#authorFollowGTI ul {
    float:right;
    margin-top:0px;
    margin-right:10px;
}
#authorFollowGTI ul li {
    display:inline;
}
#authorInfoGTI {
    clear:right;
}
#authorName a {
    font-family:"Times New Roman", Times, serif;
    clear:right;
    margin-left:5px;
    text-transform:uppercase;
    color:#990000;
    text-decoration:none;
}
#authorName a:hover {
    color:#333333;
}
#authorFullInfoGTI {
    margin-top:5px;
    padding:0 5px 5px 0;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:13px;
    color:#666666;
}
#authorReadMoreGTI {
    float:right;
    margin-right:10px;
    margin-bottom:10px;
}

#authorReadMoreGTI a{
    color:#FF0000;
}
</style>
<div id="aboutAuthorGTI">
  <div id="authorImageGTI"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDtGYx8eAk8nrbO5mz_475nHIDIOIILykMorXgjpcLi57z1GZsQlH5rJeRADBQ89d7vULOMMHbp3GCWBY2iwq3Z5ydNqTwIk6IGymiwvAMIkYg8Mtb9jfn6gyTz9SqscKEjKoAcyaSbMk/h120/authorImage.png" width="90" height="90" alt="Author Image" /> </div>
  <div id="aboutAuthorWrapperGTI">
    <div id="authorInfoBoxGTI">
      <div id="authorFollowGTI">
        <ul>
          <li><a href="Facebook Address" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSsEwqcA_sLZOlnsLNsa2jbzOLNZJl5QATGRFnZAL21UPK7vSZhItCGS3F_rbwrvj_rNuTMCAYejVPbkx5p8QLpYsxGwN9sc4J4FtcUx3LYg_TwZYHk61tfCBONq59y916dDoMLB4z1gI/h120/facebook.png" width="20" height="20" alt="Facebook" /></a></li>
          <li><a href="Twitter Address" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM8hjeoAC1sMHXImHZdpQlNfpO8bK5mCMA4TGJmf6cnESq2UjFNnlcokfR_3RAqHfXAe0UqpPE-vjbyjUOErf9vyCznIczbHSq9vtXBdJgOKfecJact0hkcf68TT-bJhwUjsx822_MDH8/h120/twitter.png" width="20" height="20" alt="Twitter" /></a></li>
          <li><a href="Google Plus Address" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyTSEBvfy3TGLbOwNfPPJ9zmCQHEb7aCSusHag6eWPBGMMPcUPWdsojI4oPZzs6mdFQDAK-1FmgdyljIC8_i6pLmwCo8Q2srko9ZlUmzo0DtsEE6nsiW89mQiv6k1jQzPQwWyfRnc2jOI/h120/google-plus.png" width="20" height="20" alt="Google Plus" /></a></li>
        </ul>
      </div>
      <div id="authorInfoGTI">
        <div id="authorName"><a href="Google Plus Profile Link" rel="author">Digvijay Todkar</a></div>
        <div id="authorFullInfoGTI">He is owner of GrowTechInfo.com from Pune, INDIA. He is passionate about blogging. He is a Computer Engineer, Professional Blogger &amp; an addicted Web Developer.<span id="authorReadMoreGTI"><a href="About Us Page Link">know more..</a></span></div>
      </div>
    </div>
  </div>
</div>

Install Below Post 

  1. Login to Blogger.
  2. Go to Template > Edit HTML.
  3. Check Expand Widget Template.
  4. Search for 
    ]]></b:skin>
  5. and Paste below code above it 
    #aboutAuthorGTI {
    width:90%;
    min-width:300px;
    margin-left:auto;
    margin-right:auto;
    min-height:120px;
    padding:3px 3px 10px 3px;
    background-color:#f4f4f4;
    border-radius:3px;
    -webkit-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#aboutAuthorWrapperGTI {
    padding-left:10px;
}
#authorImageGTI {
    float:left;
}
#authorImageGTI img {
    margin:12px 20px 5px 15px;
    border:#fafafa solid 3px;
    -webkit-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#authorFollowGTI {
    float:right;
    margin-top:5px;
    height:15px;
    margin-bottom:9px;
}
#authorFollowGTI ul {
    float:right;
    margin-top:0px;
    margin-right:10px;
}
#authorFollowGTI ul li {
    display:inline;
}
#authorInfoGTI {
    clear:right;
}
#authorName a {
    font-family:"Times New Roman", Times, serif;
    clear:right;
    margin-left:5px;
    text-transform:uppercase;
    color:#990000;
    text-decoration:none;
}
#authorName a:hover {
    color:#333333;
}
#authorFullInfoGTI {
    margin-top:5px;
    padding:0 5px 5px 0;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:13px;
    color:#666666;
}
#authorReadMoreGTI {
    float:right;
    margin-right:10px;
    margin-bottom:10px;
}

#authorReadMoreGTI a{
    color:#FF0000;
}
  6. Search for 
    <div class='post-footer-line post-footer-line-1'>
  7. and paste below code after above code 
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id="aboutAuthorGTI">
    <div id="authorImageGTI"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDtGYx8eAk8nrbO5mz_475nHIDIOIILykMorXgjpcLi57z1GZsQlH5rJeRADBQ89d7vULOMMHbp3GCWBY2iwq3Z5ydNqTwIk6IGymiwvAMIkYg8Mtb9jfn6gyTz9SqscKEjKoAcyaSbMk/h120/authorImage.png" width="90" height="90" alt="Author Image" /> </div>
    <div id="aboutAuthorWrapperGTI">
      <div id="authorInfoBoxGTI">
        <div id="authorFollowGTI">
          <ul>
            <li><a href="Facebook Address" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSsEwqcA_sLZOlnsLNsa2jbzOLNZJl5QATGRFnZAL21UPK7vSZhItCGS3F_rbwrvj_rNuTMCAYejVPbkx5p8QLpYsxGwN9sc4J4FtcUx3LYg_TwZYHk61tfCBONq59y916dDoMLB4z1gI/h120/facebook.png" width="20" height="20" alt="Facebook" /></a></li>
            <li><a href="Twitter Address" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM8hjeoAC1sMHXImHZdpQlNfpO8bK5mCMA4TGJmf6cnESq2UjFNnlcokfR_3RAqHfXAe0UqpPE-vjbyjUOErf9vyCznIczbHSq9vtXBdJgOKfecJact0hkcf68TT-bJhwUjsx822_MDH8/h120/twitter.png" width="20" height="20" alt="Twitter" /></a></li>
            <li><a href="Google Plus Address" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyTSEBvfy3TGLbOwNfPPJ9zmCQHEb7aCSusHag6eWPBGMMPcUPWdsojI4oPZzs6mdFQDAK-1FmgdyljIC8_i6pLmwCo8Q2srko9ZlUmzo0DtsEE6nsiW89mQiv6k1jQzPQwWyfRnc2jOI/h120/google-plus.png" width="20" height="20" alt="Google Plus" /></a></li>
          </ul>
        </div>
        <div id="authorInfoGTI">
          <div id="authorName"><a href="Google Plus Profile Link" rel="author">Digvijay Todkar</a></div>
          <div id="authorFullInfoGTI">He is owner of GrowTechInfo.com from Pune, INDIA. He is passionate about blogging. He is a Computer Engineer, Professional Blogger &amp; an addicted Web Developer.<span id="authorReadMoreGTI"><a href="About Us Page Link">know more..</a></span></div>
        </div>
      </div>
    </div>
  </div>
</b:if>
  8. Save Template

Customization

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDtGYx8eAk8nrbO5mz_475nHIDIOIILykMorXgjpcLi57z1GZsQlH5rJeRADBQ89d7vULOMMHbp3GCWBY2iwq3Z5ydNqTwIk6IGymiwvAMIkYg8Mtb9jfn6gyTz9SqscKEjKoAcyaSbMk/h120/authorImage.png replace with author image URL
  • Facebook Address replace with your Facebook page URL.
  • Twitter Address replace with your twitter URL.
  • Google Plus Address replace with your Google Plus URL.
  • Information replace with your content.
  • About Us Page Link replace with your About Us page link. 
If you get any error during installation, feel free to ask. Happy Blogging.


Tag :
Share this Post :
Author Image
  • Facebook
  • Twitter
He is owner of GrowTechInfo.com from Pune, INDIA. He is passionate about blogging. He is a Computer Engineer, Professional Blogger & an addicted Web Developer.know more..
Subscribe via Email
back to top