A blog about technology, Internet, social media, blogging tips, seo tips, computer tips and tricks, earning money online, etc.
How To Add About The Author Box Below Blog Post In Blogger
You have seen About the author box below blog posts in many Wordpress blogs. But in Blogger there is no such feature enabled. Dont worry Blogger guys, you can still include that same feature in blogger by adding some codes. Its a simple process. Read the instructions given below and follow them to get a new professional look in your blog.
Just look at my About the author box given below:
STEPS:-
1--> Login to your Blogger Account.
2--> Go to Blogger Admin Page > Template > Click on Edit HTML.
3--> Click Expand Widgets
4--> Search for codes given below
]]></b:skin>
Just above it paste the following codes given below
.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;
}
This is the CSS part
5--> Search for codes given below
<div class='post-footer-line post-footer-line-1'/>
Just below it paste the codes given below:
<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='Your Photo Link' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Write Something About yourself<br/>
Follow Me on Twitter <a href=' Your Twitter Link '>Your Twitter link Anchor text</a>
<p style='margin:-8px 0'><br/><center>
<a href=' Your Blog link ' style='text-decoration:none;font-size:70%;'>Your Blog Name</a></center>
</p></div></p>
</div>
</b:if>
Change the following things as you wish them to be displayed
Your Photo Link
About the Author text
Write Something About yourself
Your Twitter Link
Your Twitter link Anchor text
Your Blog Link
Your Blog Name
6--> Save template and done :)
Feel the new look of your Blogger blog.
Just look at my About the author box given below:
STEPS:-
1--> Login to your Blogger Account.
2--> Go to Blogger Admin Page > Template > Click on Edit HTML.
3--> Click Expand Widgets
4--> Search for codes given below
]]></b:skin>
Just above it paste the following codes given below
.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;
}
This is the CSS part
5--> Search for codes given below
<div class='post-footer-line post-footer-line-1'/>
Just below it paste the codes given below:
<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='Your Photo Link' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Write Something About yourself<br/>
Follow Me on Twitter <a href=' Your Twitter Link '>Your Twitter link Anchor text</a>
<p style='margin:-8px 0'><br/><center>
<a href=' Your Blog link ' style='text-decoration:none;font-size:70%;'>Your Blog Name</a></center>
</p></div></p>
</div>
</b:if>
Change the following things as you wish them to be displayed
Your Photo Link
About the Author text
Write Something About yourself
Your Twitter Link
Your Twitter link Anchor text
Your Blog Link
Your Blog Name
6--> Save template and done :)
Feel the new look of your Blogger blog.
Subscribe to:
Post Comments (Atom)
-
HeartATech
Copyright©2012 HeartATech. Articles cannot be reproduced without permission from the author.
Powered by Blogger
Good work friend keep it up.
ReplyDeleteFreelancing SEO Services
Thank you friend
DeleteNice post ..i will also add this to my blog.
ReplyDeleteI wonder if it is applicable for blog with multiple authors.
ReplyDelete