Responsive - Author Box Widget With Social Buttons for Blogger

SHARE
Author Box Icon
An author box below every blog post is one of the must have widgets for blogger which shows the author bio to blog readers. This little author box does amazing things to one's blog. It increases the credibility and trust of an article and people are always curious to know who on the earth has written this article I am reading right now.

You might have seen this author box appearing below every post on every other popular blog. If you're not using it, you're really missing something important. It's never too late so in this tutorial, I have designed a new responsive author box with three major social buttons to which I am using on this blog itself so you can see the live demo of it in action, just scroll down to the bottom of this post. If you liked it, then let us proceed toward its installation on your blog.

Note: You can share this code on your blog ONLY if you provide a working link back to this original post from your blog post on which you shared my code. Fair deal, right? We should respect copyrights and hard work of others'. Play safe.


Installation Process For Author Box CSS | Part-1

Let us begin with boring steps as usual :) and you can't skip any one of them lol.
Step 1) Just go and login to your blogger account
Step 2) Your Blog >> Template >> Edit HTML
Step 3) Let the template code box load and after loading, click anywhere inside the template code box  >> Have backup of your blog template first
Step 4) Press Ctrl+f on Windows OS and Cmd on Mac OS to open a search box inside
Step 5) Find this little piece of code ]]></b:skin>
Step 6) Now paste the whole CSS code given below just before this code

/*-------- Author Box CSS Code by TwistBlogger.com -------*/
#Author-box-outer {
background: #FFFFFF;                  /*----- background color code -----*/
border-top: 10px solid #05A0FF;  /*----- top border -----*/
padding: 16px 10px 16px 10px;
overflow: hidden;
margin: 20px 0px 15px;
box-shadow: 0px 7px 14px -12px #000;
}
.author-box {
float: left;
overflow: hidden;
padding: 0px 15px 5px 0px;
font-weight: 100;
width: 54%;
display: block;
border-right: 1px solid #ddd;
}
.author-box img {            /*----- Author Image Style ------*/
background: #05A0FF;
float: left;
margin: 5px 10px 0px 0px;
border-radius: 50px;
padding: 2px;
}
.author-box p {             /*---- Author Name Style ----*/
margin: 0;
padding: 0px 0px 0px 0px;
color: #3F3F3F;
font-size: 15px;
text-shadow: none;
}
.author-box span {
border-bottom: 2px solid #F9FF00;  /*--- border below author name ---*/
}
.author-box-social {
float: right;
text-align: left;
width: 40%;
overflow: hidden;
padding: 0px;
}
.intro-style {          /*---- Author bio text Style -----*/
text-align: left;
font-family: sans-serif;
color: #333;
font-size: 13px !important;
margin-top: 5px;
margin-left: 0px;
}
Editing: To edit the CSS code and change its colors, I have provided proper comments so that you know what you're editing while doing it. You can almost change anything like text size, color, background, width, image style etc.

Installation Process For Author Box HTML | Part-2

I have done all the major work for you so that you do not have to visit Facebook Developers Page, Google Developers Page, and Twitter Developers Page. Why? Simple, to get the social buttons for your blog. I worked on these codes and made them simple where if you will try to get them manually and copying and pasting, as they say, you will get a major error saying unable to save, an error occurred while parsing XML code of your template. :) All you need to do is just replace my social pages URLs, Image, Author bio, and name etc. with your own. I have highlighted these all the URLs in above HTML so it is easier to you. Follow the steps given below the HTML for better understanding.

Step 1) First of all just find out this closing </head> tag and just before it, paste the Google+ JavaScript Code as it is given below.

<script async='defer' src='https://apis.google.com/js/platform.js'/>

Step 2) Find out this code line <div class='post-footer-line post-footer-line-3'> and paste this HTML code given below after editing it as needed just after this code line.
Note:  If you're unable to get me then please do comment and I'll help you manually.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='Author-box-outer'>
<div class='author-box'>
<b:if cond='data:post.author == &quot;Satbir Patial&quot;'>
  <img alt='' class='avatar avatar-78 photo' height='78' src='http://lh5.googleusercontent.com/-av0YwQXWnHo/AAAAAAAAAAI/AAAAAAAAAs8/E1ch3IOBo1E/s100/photo.jpg' width='78'/><p><span>Article By: Satbir Patial</span></p>
<div class='intro-style'>
I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!
</div>
</b:if>
</div>
<div class='author-box-social'>
<div style='padding-bottom:0px !important; font-size: 11px !important;'><a class='twitter-follow-button' data-lang='en' data-show-count='true' href='https://twitter.com/twistblogger' rel='nofollow'>
Follow @TwistBlogger
</a></div>
<script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src=&quot;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,&quot;script&quot;,&quot;twitter-wjs&quot;));</script>
<br/>
<div style='padding-bottom:0px !important;'>
<div class='fb-like' data-action='like' data-href='https://www.facebook.com/pages/Twistbloggercom/740638259280667' data-layout='button_count' data-share='false' data-show-faces='false' rel='nofollow'>
</div>
</div>
<div id="fb-root"></div>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<br/>
<div style='padding-bottom:0px !important;'>
<!-- Place this tag where you want the widget to render. -->
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/u/0/101011957743985467270' data-rel='author'/>
</div>
</div>
</div>
</b:if>
 Editing: In the above HTML code, I have highlighted everything you need to change before saving your template so do the changes step by step. Don't cry, just do it. :) Here is the list of things you need to change so make sure you did it.
1) Author Name
2) Author Image
3) Again Author Name
4) Author Bio
5) Twitter User Name
6) Facebook Page URL
7) Google Plus Profile URL

Making It Responsive - Optional Step

Are you using a responsive blogger template? Then this step becomes necessary lol. Don't worry, I have done all the work for you and if you're not sure, just re-size your browser window and see the author box on this blog. It changes accordingly to the screen sizes.

What you need to do is just add the responsive styles to CSS3 @media Query in our template. So just add these styles accordingly.

@media only screen and (min-width:980px) and (max-width:1089px) {
.intro-style {
 margin-left: 92px;
}
}
@media only screen and (min-width:768px) and (max-width:979px) {
.author-box {
padding: 0px 0px 0px 0px;
width: 52%;
}
.author-box img {
margin: 5px 5px 0px 0px;
padding: 2px;
}
.intro-style {
margin-left: 0px;
}
.author-box-social {
width: 47%;
padding: 0px;
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.author-box {
padding: 0px 0px 10px 0px;
width: 100%;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
border-right: 0px;
}
.author-box-social {
width: 79%;
padding: 0px;
}
}
@media only screen and (max-width:479px){
.author-box {
padding: 0px 0px 10px 0px;
width: 100%;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
border-right: 0px;
}
.author-box-social {
width: 100%;
padding: 0px;
}
}
Final Note: If you're not using a Responsive Blogger Template, you do not have to do that. Your responsive template might be using different sizes so add these styles accordingly or else you can just copy and paste. That is it in this tutorial.

Did you face any problem? Just ask me in comments for any help, I'll assist you as soon as you ask or contact me via the contact us page. Stay safe, stay blessed.
Author

Article By: Satbir Patial

I manage this blog and post tutorials related to Blogger, SEO, Plugins, Widgets, Software Tools, CSS/HTML and Social Media. Did you find this blog helpful? Would You Please Socialize? Thanks for Your Support Buddy :)


Stay connected, You'll not be disappointed!

26 Replies so far - Join Conversation

  1. Helloo Broo, It's not working in my blogger plz give me solution

    ReplyDelete
    Replies
    1. Rohit:: It'll work perfectly buddy. Just follow the steps correctly..!!

      Delete
    2. i want help bro to edit my templete can you help me

      Delete
    3. You may Try This one ... !
      About Author Widget Inspired by #TwistBlogger

      Delete
  2. hiiiii broo i want to add ur about author widget below posts but it's not showing plz help me

    ReplyDelete
    Replies
    1. Thamxx broo now it's Proper working check here http://www.trickslovers.com

      Delete
  3. Bro..I tried it but it didn't worked for me..Please help me with it ..The social links are soon but the author details isn't being seen..So,please help me fast.

    ReplyDelete
    Replies
    1. Invictus Haxor:: I'll let you know after checking it soon..

      Delete
  4. it's worrrkk in my blog.. this widget is beautiful.. thx for sharing...

    ReplyDelete
  5. div class='post-footer-line post-footer-line-3'> hey friend this line is not in my html but there is ...line-2'> and ...line-1'>

    tell me now, please,

    ReplyDelete
  6. hey bro i cantt find div class ='post-footer-line post-footer-line-3'> help me to get it please

    ReplyDelete
  7. hey bro i cantt find div class ='post-footer-line post-footer-line-3'> help me to get it please

    ReplyDelete
  8. hi i tried but it doesnt work social icon are seen but author info and image not seen plz help me. ( www.talathiinmaharashtra.in )

    ReplyDelete
  9. it is not working in my blog plz help me duude

    ReplyDelete
  10. Satbir bhai mere pass mobile h pc ni h m html me kese kru...please mujhe aisi html bna kr de do jo m layout me dirct kr sku please bro...
    Nd mera song lyrics and song video download blog kesa h please dekh kr btaoge...
    www.lyricsmonsterpoint.blogspot.in

    ReplyDelete
  11. Great article but how to make This widger comment

    ReplyDelete
  12. Anonymous12:01

    Where to put CSS3 Media Queries?

    ReplyDelete
  13. its work thanks brother

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. EON:: It works, just make sure you followed all the steps. Specially the Google Plus user name. Right it as it is on your Google Plus Profile (case sensitive).

      Delete
    2. This comment has been removed by the author.

      Delete
  15. Thanks Satbir, your article help me a lot. Thanks alot

    ReplyDelete
  16. I GO TROUGH THIS TUTORIAL AND GOT IT.... BUT THE AUTHOR PICS AND MESSAGE IS NOT SHOWING UP... PLS HELP OUT, WHAT CAN DO????? ADMIN

    ReplyDelete
  17. I also face the same problem.

    ReplyDelete