Today We're going to see how to add author information box below post for blogger blogs.
Adding Author Information box:
- Step 1: Go to
Blogger Dashboard > Design > Edit HTML
. Click on expand widgets template.
Look for]]></b:skin>
Now, Add following code just above]]></b:skin>
.author_info {
float: right;
width: 573px;
padding: 10px;
border: 1px solid #e0e0e0;
margin-bottom: 15px;
margin-top: 15px;
background: #eee;
}
.author_info h3 {
margin-bottom: 10px;
}
.author_photo {
float: left;
margin: 0 0 0 10px;
}
.author_photo img {
margin-right: 10px;
border: 1px solid #e0e0e0;
} - Step 2: Now look for
footer-line-1
It will get<div class='post-footer-line post-footer-line-1'>
Now add following code BELOW it.<b:if cond='data:blog.pageType == "item"'>
That's it.
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='http://3.bp.blogspot.com/_tbHfaj1A058/TSGc3fOc-NI/AAAAAAAAL7A/GU6dmnqINik/s1600/images.jpeg'/></div>
<h3>About the Author</h3> This article is written by: <b>YourName</b> - who has already written <b>30</b> articles for <a href='YOUR-BLOG-URL'>YOUR-BLOG-NAME</a> YourName is a professional web designer. Catch him on <a href='http://twitter.com/yourtwitterID'>Twitter</a>, <a href='Your Facebook URL'>Facebook</a> or <a href='your e mail ID'>email</a> him <br> </br> <br> </br>
YourName's <a href='your web url'>Website</a><br style='clear:both;'/>
</div>
</b:if> - Just edit the information from Step 2 code with your info.
Hi,
ReplyDeleteHow about if there are multiple authors?
Thanks for your comment crumpylicious blog
ReplyDeleteThis post is for only for single author blog.
If you want to place this in multiple authors blog you should place the 2nd step in ending of every post and edit its author information
Now I published an Article for Multiple author blogs. See this Article
DeleteHow To Add Multiple Author Bio Widget For Blogger Blog
not working!
ReplyDeleteIt's working fine, Just follow the instruction step by step.
Deletedear chandeep author widget not appeared in my blog. i am using your sensational A responsive template.can you help me? my blog url: www.swadarshan-homeopathic-clinic.com
ReplyDeleteHello chandeep,
ReplyDeletenice post and found this helpful.
But I'm facing one problem. Please check www.solvemyhow.com for web version its working fine but for mobile and tablets its showing same web version. So, what to do now ?
Please check it and help me !!!
Hello please its not working. Im using one of your free templates
ReplyDelete