Styled About Us Widget for your blog

By | January 12, 2014
In this post i am writing about a styled hangover “about us” widget which gives your blog a super impressive impression , an attractive design always hooks the eyes of the reader to gets it’s attention.

Below is the Screenshot of about us widget   

CSS

#about_upper {
    background: url(“images/about_top.png”) no-repeat scroll 0% 0% transparent;
    height: 30px;
    width: 286px;
    padding-top: 60px;
    padding-left: 28px;
}

#about_middle {
    background: url(“images/about_middle.png”) repeat-y scroll 0% 0% transparent;
    width: 314px;
}

#about_content {
    padding: 5px 29px;
    line-height: 1.4em;
}

#about #portrait {
    float: right;
    margin-top: -41px;
    width: 58px;
    height: 60px;
    padding: 3px;
 
}

#about_lower {
    background: url(“images/about_bottom.png”) no-repeat scroll 0% 0% transparent;
    width: 314px;
    height: 29px;
}

#tape {
    background: url(“images/tape.png”) no-repeat scroll 0% 0% transparent;
    width: 38px;
    height: 32px;
    position: absolute;
    top: 58px;
    right: 13px;
}

HTML

<html>
<head>
<link rel=”stylesheet” href=”style.css” >
</head>
<body>
<div id=”about”>
 <div id=”about_upper” ><b>About Me</b></div>
   <div id=”about_middle” >

   <div id=”about_content” >
   <div id=”tape”></div>
    <img src=”images/gavtar.png” id=”portrait”>
      Hi , i am pavan deshpande a blogger from india bangalore<br/>
      you can find my social presence at <br/>
 
<!– Google Plus  –>  
<a href=”https://plus.google.com/102834777932657005287″ target=”_blank”><img src=”images/facebook.jpg” /></a>
     
<!– Twitter –>
<a href=”https://twitter.com/hdpavan” target=”_blank”><img src=”images/twitter.jpg” /></a>
     
<!– Facebook  –>
<a href=”https://www.facebook.com/pages/Pavan-Blog/344054812350550″ target=”_blank”><img src=”images/google+.jpg” /></a>
  
</div>

 </div>
 <div id=”about_lower” ></div>
</div>
</body>
</html>