Responsive - Author Box Widget With Social Buttons for Blogger
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
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 == "item"'>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.
<div id='Author-box-outer'>
<div class='author-box'>
<b:if cond='data:post.author == "Satbir Patial"'>
<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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</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>
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.