Advanced custom Author Box widget in Blogger

There have many author bio box plug-in in WordPress , but , in Blogger you need to add some HTML and CSS code in the template. You can get details about author in Author Bio Box widget which is very cool widget in Blogger and add your Google Authorship verification link in The author box Widget.


How to Install Author Box Widget in Blogger:


Step 1: Go to Blogger Dashboard - > Template - > Edit HTML and Find the code below pressing the Ctrl + F and paste the code above the below code.


The Code:
.author-box {
background: #28282E;
color: #FFFFFF;
margin: 50px 0 30px 0;
padding: 10px;
overflow: auto;
-webkit-border-radius: 4px;
border-radius: 4px;
border-right: #929292 solid 3px;
border-bottom: #929292 solid 4px;
box-shadow:inset 20px 0px 20px 0px #111;
-moz-box-shadow:inset 20px 0px 20px 0px #111;
-webkit-box-shadow:inset 20px 0px 20px 0px #111;
width:100%

}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}


Step 2: Now Find the template code -
<div class='post-footer-line post-footer-line-1'>

Step 3:Now paste the below code below the above cove code.


<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p>
<img alt='YOUR NAME' height='70' src='IMAGE URL' width='70'/><b>About Me</b><br/>AUTHOR DETAILS <br/>Follow : | <a href='https://www.google.com/+HirakRoyPBH?rel=author'><b>Google profile</b></a> | <a href='http://facebook.com/problogginghub' target='blank'><b>Facebook</b></a> | <a href='http://twitter.com/Problogginghub' target='blank'><b>Twitter</b></a><br/></p>
</div>
</b:if>


Now save the Template.
Previous
Next Post »