This post will take you through how to add the author box that shows author’s profile below every blog post.
It is one of the most useful widgets for every blogger. To begin the process, follow the process the below;
Also Read: What Search Engine did People Use before Google?
Follow the steps below :
Step 1. Log in to your blogger dashboard and click on Template
Step 2. then click on Edit HTML>>
Step 3. Now find this code ]]></b:skin>
Step 4. press CTRL+F on your pc keyboard then place the code above inside it and hit enter .
Step 5. Now paste the below code just above ]]></b:skin>
Also read: The Complete difference between PayPal FnF and PayPal GnS
/***** www.wapmastazone.blogspot.com author box starts *****/
.tbs-author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.tbs-author-box p {
margin: 0;
padding: 0;
}
.tbs-author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}
/***** www.wapmastazone.blogspot.com author box ends *****/
Step 6. Then search for <div class=’post-footer-line post-footer-line-1′>.now, paste the below code just below <div class=’post-footer-line post-footer-line-1′>
<b:if
cond='data:blog.pageType == "item"'>
<div class='tbs-author-box'>
<p>
<img alt='' class='avatar avatar-70 photo' height='70'
src='https://4.bp.blogspot.com/-n-LHTQuYrxk/UpcJnaiCGXI/AAAAAAAAEQM/10T5P7CwhPs/s200/thesellerfrank+latest.jpg'
width='70'/><b>About Author</b><br/>
Write anything about the author here!<br/></p>
</div>
</b:if>
Step 7. Click “Save” and you are done.
Customization
- Replace http://3.bp.blogspot.com/-dATm4T256Jg/VP5PGEyPWtI/AAAAAAAAAwQ/JibNJUdQ0xE/s1600/IMG-20150205-00279.jpg with your own image link
- Replace this with your details: Write anything about the author here!
- You can change the height and width of your photo <img alt=” class=’avatar avatar-70 photo’ height=’70‘
Also Read: 9 Most Important SEO Guides to Help you Rank First Page on Google
Author Box
