Beautiful Aurthor Info Box Widget For Blogger

How to add beautiful aurthor info box widget on blogger. If you want to add this widget on your blogger blog just follow the simple steps.......

• Step-1   Goto your blog overview
• Step-2   Click the template button
• Step-3   Click the edit template button
• Step-4   Press Ctrl+F and search the code

<div class='post-footer-line post-footer-line-1'>

• Step-5   And paste the below code

<div class="beh-entry-author">
<div class="author-header main-color-bg">
<h4 class="title">
<a rel="author" href="#">Author name Here</a>
</h4>
</div>
<div class="author-wrap">
<div class="author-avatar">
<img class="avatar avatar-80 photo" width="80" height="80" src="Author profile image link here" alt="">
</div>
<div class="author-description">
Author bio goes here.
<div class="author-link">
<a rel="author" href="#">
Facebook
<span class="meta-nav">?</span>
</a>
</div>
</div>
</div>
</div>

<div class="entry-social">
<div class="fb">
<a target="_blank" href="Your_Facebok_Page">Facebook</a>
</div>
<div class="twitter">
<a target="_blank" href="Your_twitter_Profile">Twitter</a>
</div>
<div class="gplus">
<a target="_blank" href="Your_Googleplus_Follow">Google+</a>
</div>
<div class="linkedin">
<a target="_blank" href="Your_Linkedin_Profile">Linkedin</a>
</div>
<div class="pinterest">
<a target="_blank" href="You_Pinterest_Page">Pinterest</a>
</div>
<div class="delicious">
<a target="_blank" href="Your_Delicious_Profile">Delicious</a>
</div>
<p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="http://www.bloggingehow.com">blogger widgets</a></p> 
</div>

<style>

.entry-social {
    margin-bottom: 20px;
    overflow: hidden;
}
.entry-social a {
    color: #FFFFFF !important;
    display: block;
    font-family: "Open Sans","Tahoma","Verdana","Arial",sans-serif;
    font-weight: 600;
    padding-left: 20px;
}
.entry-social div {
    float: left;
    margin-right: 10px;
    width: 138px;
}
.entry-social .fb a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7JQ8fkfF6TDBDAVQbVCYL1e6waUnzh9Hz0jE96Y4zAdodFG8aWCuDn56h8OueFEB-pPWpPTTM5ddWs4nD6ne9BruQX7eOTPM1tGvX3exC1WOWHGJsTwQTG__MT65NSd_m8ttQi1XTFei/s1600/fb14.png") no-repeat scroll 10px center #3B5999;
    padding: 7px 10px 7px 26px;
}
.entry-social .fb a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7JQ8fkfF6TDBDAVQbVCYL1e6waUnzh9Hz0jE96Y4zAdodFG8aWCuDn56h8OueFEB-pPWpPTTM5ddWs4nD6ne9BruQX7eOTPM1tGvX3exC1WOWHGJsTwQTG__MT65NSd_m8ttQi1XTFei/s1600/fb14.png") no-repeat scroll 10px center #324B81;
}
.entry-social .twitter a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdz6dnj-as56H2vzObcy1BW5QgV0PmB3QbSISlPQ2I2zjg1dP5IpinTdEeqpi6lMEfJ8hOi82fXX_ABILCpk5tcM9oT8U7S5E4ecW5Y_S8_4fjScjFm19UdzQtUjJszKhjaO41YKGvZcXe/s1600/twitter14.png") no-repeat scroll 8px center #01BBF6;
    padding: 7px 10px 7px 32px;
}
.entry-social .twitter a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdz6dnj-as56H2vzObcy1BW5QgV0PmB3QbSISlPQ2I2zjg1dP5IpinTdEeqpi6lMEfJ8hOi82fXX_ABILCpk5tcM9oT8U7S5E4ecW5Y_S8_4fjScjFm19UdzQtUjJszKhjaO41YKGvZcXe/s1600/twitter14.png") no-repeat scroll 8px center #01A7DE;
}
.entry-social .gplus a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFM-gI57HEZwDeBcM4amB5sfyI24HRnhwJC6QIKIrRJQeCddGYQ3FZK_blZMCqGyFOaee1lQA9BXK8uOgDvCSoTFO5EzkYaqDR0LENZHF7j7yZ5A5ciiGQ0x2F5jUIQix_IEVZOnT9-e8I/s1600/gplus14.png") no-repeat scroll 10px center #D54135;
    padding: 7px 10px 7px 32px;
}
.entry-social .gplus a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFM-gI57HEZwDeBcM4amB5sfyI24HRnhwJC6QIKIrRJQeCddGYQ3FZK_blZMCqGyFOaee1lQA9BXK8uOgDvCSoTFO5EzkYaqDR0LENZHF7j7yZ5A5ciiGQ0x2F5jUIQix_IEVZOnT9-e8I/s1600/gplus14.png") no-repeat scroll 10px center #BA3227;
}
.entry-social .linkedin a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJDaOWdTepl6Rr9kTOeoqz9zgc17ktriyVkYlm02rn2l3RRK30AjwPfISE8M3W70tp6hUAxheLgFUtW8OiDK3oIPiuTXJcq85soNbaUJl7xuvfC1DfJCIJw6uxncZNLepelNV_m_uuRKO/s1600/linkedin14.png") no-repeat scroll 10px center #167FB1;
    padding: 7px 10px 7px 35px;
}
.entry-social .linkedin a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJDaOWdTepl6Rr9kTOeoqz9zgc17ktriyVkYlm02rn2l3RRK30AjwPfISE8M3W70tp6hUAxheLgFUtW8OiDK3oIPiuTXJcq85soNbaUJl7xuvfC1DfJCIJw6uxncZNLepelNV_m_uuRKO/s1600/linkedin14.png") no-repeat scroll 10px center #136F9B;
}
.entry-social .pinterest a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyF4I43O0J_0oMWi5JSSB-kuh3w20YQmMfnMtt1thN-ofLlqD9rSS334K6KAvjmeHMr0sbkFt0TN-a-urUYrnRKQkIZTfnaJfPKAayLrfDk2HHgmR6jL6a02hNX7-IXBLM70igsQPxU5T3/s320/pinterest14.png") no-repeat scroll 10px center #CB2027;
    padding: 7px 10px 7px 32px;
}
.entry-social .pinterest a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyF4I43O0J_0oMWi5JSSB-kuh3w20YQmMfnMtt1thN-ofLlqD9rSS334K6KAvjmeHMr0sbkFt0TN-a-urUYrnRKQkIZTfnaJfPKAayLrfDk2HHgmR6jL6a02hNX7-IXBLM70igsQPxU5T3/s320/pinterest14.png") no-repeat scroll 10px center #B01C23;
}
.entry-social .delicious a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNxbSK9jtRGe9IzXghcjDrlfAPF8hU6c3gNyLztkzoFAy4YgUndZN3W4H_XREGm_NLk6aaHLqtlZZHCSoIO7hBOdrYxmHyQhzvjtskHJuKQRmzV7RgVfZCqJr0XonnyURfZiDbYG4hT8E2/s320/delicious14.png") no-repeat scroll 10px center #3173D1;
    padding: 7px 10px 7px 32px;
}
.entry-social .delicious a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNxbSK9jtRGe9IzXghcjDrlfAPF8hU6c3gNyLztkzoFAy4YgUndZN3W4H_XREGm_NLk6aaHLqtlZZHCSoIO7hBOdrYxmHyQhzvjtskHJuKQRmzV7RgVfZCqJr0XonnyURfZiDbYG4hT8E2/s320/delicious14.png") no-repeat scroll 10px center #2963B8;
}
.entry-social .delicious {
    margin-right: 0;
}

.beh-entry-author {
    margin-bottom: 20px;
}
.beh-entry-author .author-header {
    padding: 1px 15px;
}
.beh-entry-author .author-header h4 a:hover {
    color: #000000;
}
.beh-entry-author .author-header h4 a {
    color: #FFFFFF;
}
.beh-entry-author .author-header h4 {
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
}
.beh-entry-author .author-wrap {
    border: 1px solid #EEEEEE;
    overflow: hidden;
    padding: 12px 15px;
}
.beh-entry-author .author-avatar {
    float: left;
    height: 80px;
    margin-right: 30px;
    width: 80px;
}
.beh-entry-author .author-link {
    margin-top: 5px;
}
.main-color-bg {
    background: none repeat scroll 0 0 #2BBFF6;
}
.beh-entry-author a {
    color: #3A3A3A;
    outline: 0 none;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}
.entry-social a {
    color: #3A3A3A;
    outline: 0 none;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}

</style>

• Step-6   Now click save template button

Beautiful Aurthor Info Box Widget For Blogger 2014-06-15T10:00:00-07:00 Rating: 4.5 Diposkan Oleh: Ahmad