For adding this feature in your blog i will suggest you to follow the below written procedure which is easy and safe for your blog. kindly follow each step properly and do not make any changes of your own. Almost every one thinks of adding the various widgets in his blog so that it may look attractive for the user. Adding author box is a special feature used by the professional bloggers all over the world. Through this they are sharing a special info related to them. Usually experience in blogging and other types of paragraphs are shared through the Author Box.
Different types of Author Boxes are being used depends on the type of blog you own. here in this post we will share an info regarding the most used and professional type of Author Box.
Procedure for Adding Author Box After Every Blogger Post
Step 1: Go to your blogger dashboard >> Click on Themes >> Then on Edit HTML
Step 2: Press Ctrl+F and find the below CSS Code in your template.
]]></b:skin>
Step 3: After that Add the Below Code above ]]></b:skin>.
/*Author Box CSS Code*/
.about-author {
width : 750px;
overflow : hidden;
margin:10px 0px;
border:0px;
background: #f2f2ef;
margin: 0 0 30px 0;
padding: 10px;
border: 1px solid #EAEDEF;
overflow: hidden;
color: #333333;
font-size: 14px;
font-family: Georgia, Tahoma, Verdana;
line-height: 24px;
}
.about-author img {
display: block;
width: 90px;
height: 90px;
margin: 0 1.2em 0 0;
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 999em;
-moz-border-radius: 999em;
border-radius: 999em;
border: 2px solid #ddd;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.about-author h3{
font-family:georgia !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p {
margin:0px;
text-align:justify;
color:#666;
}
/* Author Box CSS Code*/
.about-author {
width : 750px;
overflow : hidden;
margin:10px 0px;
border:0px;
background: #f2f2ef;
margin: 0 0 30px 0;
padding: 10px;
border: 1px solid #EAEDEF;
overflow: hidden;
color: #333333;
font-size: 14px;
font-family: Georgia, Tahoma, Verdana;
line-height: 24px;
}
.about-author img {
display: block;
width: 90px;
height: 90px;
margin: 0 1.2em 0 0;
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 999em;
-moz-border-radius: 999em;
border-radius: 999em;
border: 2px solid #ddd;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.about-author h3{
font-family:georgia !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p {
margin:0px;
text-align:justify;
color:#666;
}
/* Author Box CSS Code*/
Step 4: Search the Below Css Code in your Template.
<data:post.body/>
Step 5: Just below <data:post.body/> add the following code in your blog.
<div class="about-author">
<h3>About Author:</h3>
<img align="left" src="Paste Your Image URL Here"/><p>Write Something About Yourself</p><br/>
<p>Let's Get Connected: <a href="http://twitter.com/infologger2155" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="http://www.facebook.com/bloggerwebsitetips" rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href="http://plus.google.com/109208666606854207231" rel="nofollow"><font color="#dd4b39">Google Plus</font>
</a></p>
</div>
<h3>About Author:</h3>
<img align="left" src="Paste Your Image URL Here"/><p>Write Something About Yourself</p><br/>
<p>Let's Get Connected: <a href="http://twitter.com/infologger2155" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="http://www.facebook.com/bloggerwebsitetips" rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href="http://plus.google.com/109208666606854207231" rel="nofollow"><font color="#dd4b39">Google Plus</font>
</a></p>
</div>
Changes to be Made
1. Change Paste Your Image URL Here with your Image URL.2. Change Write Something About Yourself with your Bio.
3. Change http://twitter.com/infologger2155 with your Twitter Page URL.
4. Change http://www.facebook.com/bloggerwebsitetips with your Facebook Page URL.
5. Change http://plus.google.com/109208666606854207231 with your Google+ Page URL.
Step 6: finally click on Save Template.
This is it and now you have added this feature on your blog. If you need any help message or comment through the below comment box and share your issue with our team. We will be help to assist you in this matter.
Enjoy and don't forget to share.