Login To Blogger Go To > Design > Edit HTML.
and mark the tick box "Expand Widget Templates"
Then, find (CTRL+F) this code in the template.
]]></b:skin>
And just before it paste This code:.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.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;
}
Then, find (CTRL+F) this code in the template.background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.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;
}
<div class='post-footer-line post-footer-line-1'/>
And after it paste This code:<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='https://sites.google.com/site/everythingaboutblogging/Home/twitterprofile.jpg' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Write About Yourself/Fellow Blogger Here!!!<br/>
Follow Me on Twitter [at] <a href='http://twitter.com/YOURUSERNAME'>YOURUSERNAME</a>
<p style='margin:-8px 0'><br/><center>
<a href='http://www.royaltutor.net/2010/10/add-about-author-box-below-every.html' style='text-decoration:none;font-size:70%;'>Add this widget to your blog</a></center></p></div></p>
</div>
</b:if>
Please write about yourself instead of the following text mentioned in the document, "Write About Yourself/Fellow Blogger Here!!!". Also, add your twitter name instead of the following text "YOURUSERNAME"<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='https://sites.google.com/site/everythingaboutblogging/Home/twitterprofile.jpg' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Write About Yourself/Fellow Blogger Here!!!<br/>
Follow Me on Twitter [at] <a href='http://twitter.com/YOURUSERNAME'>YOURUSERNAME</a>
<p style='margin:-8px 0'><br/><center>
<a href='http://www.royaltutor.net/2010/10/add-about-author-box-below-every.html' style='text-decoration:none;font-size:70%;'>Add this widget to your blog</a></center></p></div></p>
</div>
</b:if>
Now click save the Template.
2 comments so far:
Hi,
How about if there are multiple authors?
Go to "Design->Edit HTML. Make a backup of your template before modifying the HTML code.
then mark the tick box "Expand Widget Templates"
Then, find (CTRL+F) this code in the template.
<b:if cond='data:blog.pageType == "item"'>
Replace the above code with the following
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "AUTHOR NAME"'>
Replace AUTHOR NAME with the administrator of the blog. If multiple administrators, then place any one of the administrator's name.
Once replaced, come to the end of this block of code. Then, you should find the following lines.
</div>
</b:if>
Once found, paste this code below the above lines
<b:if cond='data:post.author == "GUEST BLOGGER NAME"'>
<div class='author-box'>
<p><img alt='Profile-photo' class='avatar avatar-70 photo' height='70' src='GUEST BLOGGER IMAGE' width='70'/>
<b>About the Author</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>GUEST BLOGGER DESCRIPTION<br/>
<p style='margin:-8px 0'><br/><center>
<a href='http://www.royaltutor.net/2010/10/add-about-author-box-below-every.html' style='text-decoration:none;font-size:70%;'>Add this widget to your blog</a></center></p></div></p>
</div>
</b:if>
</b:if>
Replace "GUEST BLOGGER NAME" with the name of your guest blogger.Replace "GUEST BLOGGER DESCRIPTION" with the information about your guest blogger and "GUEST BLOGGER IMAGE" with the image URL of your guest blogger's avatar.
Save your template. That's it. :)
Post a Comment