Hey Friends, Today I will be showing you How to add author box below post in blogger. When you look at most Wordpress blogs, they normally have about the author box below every post and this sure helps in giving traffic to the author and makes it easy for you to connect with the author.
This author box contains author's image, author's byline/introduction and author's social network addresses. The author will have a little introduction about him, and since it also has a link to author's social media profiles, the author stand a chance to have increased number of followers on different social medias and makes it easy for visitors to connect with the author.
This author box contains author's image, author's byline/introduction and author's social network addresses. The author will have a little introduction about him, and since it also has a link to author's social media profiles, the author stand a chance to have increased number of followers on different social medias and makes it easy for visitors to connect with the author.
Adding Author Box below post in Blogger
- Log into your blogger dashboard
- Click on the dropdown menu
- Click on Template
- Click on Edit HTML
- Press CTRL + F and locate the code <div class='post-footer-line post-footer-line-1'>
- Paste the below code just below the above code in your template and save template.
<style>
.wc-aboutauthor{
float:left;
width:500px;
padding:15px;
border:1px solid #ccc;
margin-bottom:15px;
margin-top:15px;
background:url('http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds
.png
');
color:#444444;
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
}
.wc-aboutauthor h2
{
color:#b6e026;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#64665b 0px 1px 1px;font-size:28px;
margin-bottom:-6px;
}
.wc-aboutpic{
float:right;
margin:0 0 0 10px;
}
.wc-aboutpic img{
border:1px solid #999999;
-webkit-transition:-webkit-transform .15s linear;
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;transition:transform .15s linear;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
box-shadow:0 3px 6px rgba(0,0,0,.25);
padding:5px 5px 5px 5px;-webkit-transform:rotate(+5deg);
-moz-transform:rotate(+5deg);-ms-transform:rotate(+5deg);
-o-transform:rotate(+5deg);transform:rotate(+5deg);float:left;
}
.wc-aboutpic img:hover{
background:#FFFFFF;
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-webkit-transform:rotate(-1deg);
-moz-transform:rotate(-1deg);
-ms-transform:rotate(-1deg);
-o-transform:rotate(-1deg);
transform:rotate(-1deg);
}
.wc-aboutsoc img
{
height:35px;
margin-bottom:-13px;
}
.wc-aboutsoc p
{
font:16px georgia;
color:#ffffff;
background:#b6e026;
display:inline;
border-radius:5px;
padding:5px;
margin-right:30px;
}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div class='wc-aboutauthor'>
<div class='wc-aboutpic'>
<img alt='Author image' height='150' src='profile picture address' width='150'/>
</div>
<h2 >About the Author :</h2>
<p>I am a fervid blogger and a tech geek. I am a person who is
fundamentally honest, I am interested in finding the twin flame of my
heart's burning desire. I won't settle for less than that, really. Why
would I? Even if it takes lots of patience, I'm willing to wait. </p>
<div class='wc-aboutsoc'>
<p> Connect with him on : </p><a href='Facebook address'><img src='http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj
_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png' title='Facebook'/></a> <a href='Twitter address'> <img
src='http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png'
title='Twitter'/></a> <a href='Google plus address' >
<img src='http://4.bp.blogspot.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/s1600/google.png'
title='Google plus'/></a></div>
</div>
</b:if>
Note : Replace the text in blue with your profile picture address, the text in yellow with your introduction,
and the texts in red with your social media addresses.
Hey Friends, Today I will be showing you How to add author box below post in blogger. When you look at most Wordpress blogs, they normally have about the author box below every post and this sure helps in giving traffic to the author and makes it easy for you to connect with the author.
This author box contains author's image, author's byline/introduction and author's social network addresses. The author will have a little introduction about him, and since it also has a link to author's social media profiles, the author stand a chance to have increased number of followers on different social medias and makes it easy for visitors to connect with the author.
This author box contains author's image, author's byline/introduction and author's social network addresses. The author will have a little introduction about him, and since it also has a link to author's social media profiles, the author stand a chance to have increased number of followers on different social medias and makes it easy for visitors to connect with the author.
Adding Author Box below post in Blogger
- Log into your blogger dashboard
- Click on the dropdown menu
- Click on Template
- Click on Edit HTML
- Press CTRL + F and locate the code <div class='post-footer-line post-footer-line-1'>
- Paste the below code just below the above code in your template and save template.
<style>
.wc-aboutauthor{
float:left;
width:500px;
padding:15px;
border:1px solid #ccc;
margin-bottom:15px;
margin-top:15px;
background:url('http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds
.png
');
color:#444444;
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
}
.wc-aboutauthor h2
{
color:#b6e026;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#64665b 0px 1px 1px;font-size:28px;
margin-bottom:-6px;
}
.wc-aboutpic{
float:right;
margin:0 0 0 10px;
}
.wc-aboutpic img{
border:1px solid #999999;
-webkit-transition:-webkit-transform .15s linear;
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;transition:transform .15s linear;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
box-shadow:0 3px 6px rgba(0,0,0,.25);
padding:5px 5px 5px 5px;-webkit-transform:rotate(+5deg);
-moz-transform:rotate(+5deg);-ms-transform:rotate(+5deg);
-o-transform:rotate(+5deg);transform:rotate(+5deg);float:left;
}
.wc-aboutpic img:hover{
background:#FFFFFF;
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-webkit-transform:rotate(-1deg);
-moz-transform:rotate(-1deg);
-ms-transform:rotate(-1deg);
-o-transform:rotate(-1deg);
transform:rotate(-1deg);
}
.wc-aboutsoc img
{
height:35px;
margin-bottom:-13px;
}
.wc-aboutsoc p
{
font:16px georgia;
color:#ffffff;
background:#b6e026;
display:inline;
border-radius:5px;
padding:5px;
margin-right:30px;
}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div class='wc-aboutauthor'>
<div class='wc-aboutpic'>
<img alt='Author image' height='150' src='profile picture address' width='150'/>
</div>
<h2 >About the Author :</h2>
<p>I am a fervid blogger and a tech geek. I am a person who is
fundamentally honest, I am interested in finding the twin flame of my
heart's burning desire. I won't settle for less than that, really. Why
would I? Even if it takes lots of patience, I'm willing to wait. </p>
<div class='wc-aboutsoc'>
<p> Connect with him on : </p><a href='Facebook address'><img src='http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj
_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png' title='Facebook'/></a> <a href='Twitter address'> <img
src='http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png'
title='Twitter'/></a> <a href='Google plus address' >
<img src='http://4.bp.blogspot.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/s1600/google.png'
title='Google plus'/></a></div>
</div>
</b:if>
Note : Replace the text in blue with your profile picture address, the text in yellow with your introduction,
and the texts in red with your social media addresses.
Hi Bob,
ReplyDeleteI must say this is a nice post and putting an author box below posts in blogger makes it easy for visitors to connect with you.
i tried this code in my blog but i can't see any profile details......so can you tell me any another tricks......i really need this so please can you please tell me any another process to use this Author Details in post below....
ReplyDeletehttp://www.technotrickies.cm