How To Add Professional Author Box In Blogger Below Every post

professional about the author box for blogger

Does your blog have a Professional Author Box? In addition to having the great blog design, you should have "about the author" box on your blog. it contains descriptive information about the author. even professional bloggers always prefer to add about author box at the end of the post on their blog, because they know peoples wants to know little about author who has written the post.

Must Read: How To Add Multiple Author Info Box Widget In Blogger Posts

Everyone wants to make his Blog or Website more attractive and professional. Therefore, I thought to share professional author box for blogger platform users who want to change the look of his blog.

In the following tutorial you are going to learn exactly how to add professional author box below every blog post in blogger. You can add an author box to the post footer in your Blogger blog by adding CSS + HTML code in your blogger template.

Professional Author Box Features :

 

  • Professional look
  • Fully responsive design 
  • Simple CSS Design
  • Very easy to use and customizable
  • Short code (doesn't affect on your blog loading speed)
  • Suits to your template

 

Adding Professional Author Box In Blogger :

 

 Note: To be on the safe side, I highly recommend you to back up your Blogger template before making changes.

Step 1
Go to your blogger dashboard >> Template >> Edit HTML:

Step 2
Search for the following code by pressing Ctrl+F
]]></b:skin> 

Step 3
Now just before/above this code add the following piece of CSS code.

 /*Professional 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;
}
/*Professional Author Box CSS Code*/

Step 4
Next search for 

 <data:post.body/>

Step 5
Now just after/below this code add the following piece of HTML code.


<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/shoutersclub" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="http://www.facebook.com/shoutersclub" 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>

   

Customization :

 

  • Paste Your Image URL Here : Add Your Profile Picture
  • Write Something About Yourself 
  • http://twitter.com/shoutersclub : Replace with your Twitter page URL
  • http://www.facebook.com/shoutersclub : Replace with your Facebook page URL
  • http://plus.google.com/109208666606854207231 : Replace with your Google Plus page URL

Step 6
Finally, Save your template and see the result.

Final Words! 


Friends! I will come up with a post on the same, but for now if you want to make sure not to miss it, subscribe to our Newsletter!. 

Still if you have any questions or confused about the process then feel free to ask via comments. I would like to help you out. Happy Blogging!

COMMENTS

BLOGGER: 27
Loading...


Name

404 Alexa Alexa Ranking Backlink Blockquote Blogger Blogger Templates Blogger Tricks Blogger Tutorials Blogger Widgets Blogging Mistakes Blogging Tips CSS Download How To Image Optimization Infographics Internet Make Money Online Plagiarism Plagiarism Checker Privacy Policy redirection SEO SEO Tips Social Media Tools Traffic Tips WordPress YouTube
false
ltr
item
Shoutersclub : How To Add Professional Author Box In Blogger Below Every post
How To Add Professional Author Box In Blogger Below Every post
Does your blog have a Professional Author Box? In addition to having the great blog design, you should have "about the author" box on your blog. it contains descriptive information about the author. and professional bloggers always prefer to add about author box at the end of the post on their blog
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI7KEF1rcZiqc8eO0QXmlmYSbYtK-JzjFb6gXMu8BIzaziHne5ECLXWHIUBFgd0G_BM1eVM-iWmvpSqYFphttL07u8UHr5epepOB971oA3Wbbs5Ypc4n93GuB-cnW_Dmy0jAELL_RW8uzZ/s1600/author+box+for+blogger.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI7KEF1rcZiqc8eO0QXmlmYSbYtK-JzjFb6gXMu8BIzaziHne5ECLXWHIUBFgd0G_BM1eVM-iWmvpSqYFphttL07u8UHr5epepOB971oA3Wbbs5Ypc4n93GuB-cnW_Dmy0jAELL_RW8uzZ/s72-c/author+box+for+blogger.png
Shoutersclub
https://shoutersclub.blogspot.com/2015/02/how-to-add-professional-author-box-in-blogger.html
https://shoutersclub.blogspot.com/
https://shoutersclub.blogspot.com/
https://shoutersclub.blogspot.com/2015/02/how-to-add-professional-author-box-in-blogger.html
true
8381117760632491081
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy