Tuesday, June 02, 2015

Place New & Stylish About Author Box With Hover Effects Bellow Every Post In Blogger
Author Box
Hi, guys. Hoping you are good. Some days ago, we had published some tips to how to write blog posts like the professional blogger in which we had described Windows Live Writer. Now, Let’s come to the topic. Today, I am publishing a new & stylish author box that you can place bellow every post in your blogger blog. This author box is extremely light weighted; So it will never affect your blog’s loading speed. It is also eye-catching. I have also included a ‘follow bar’ by which, your blog’s visitors will be able to follow you on social sites like Facebook, Google+ & Twitter. They can also subscribe you because the follow bar contain RSS feed link. So are your ready for adding this New, Eye-catching, light weighted & Stylish About Author box with hover effect on your blogger blog? If yes, then here’re the steps!

How to Add this Cool Author Box on Your Blog?

Now I think, you are impressed by this widget. So, here are the steps to add it on your blog. Note that, we have used several fonts to stylize this widget like Font Awesome, Bree Serif, Oswald, So you also have to add these fonts in your template. We have divided the steps in some part. So you have to carefully follow all of them.

#1- Adding Some Funky Fonts

This is the part where we will add some professional and funky looking fonts in our template.
  • Place the bellow code above ‘<head>’
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic|Bree+Serif' rel='stylesheet' type='text/css'/> 

Description:-

1. Font Awesome- The first link href on the above code grab the font awesome icons from the link. These icons are used in the follow bar.
2. Oswald- The second link href on the above code grab a funky Google Font that is used to write ‘About Our Author’ and ‘Follow Us On’ on the author box.
3. Bree Serif- The third link href on the above code grab a professional looking font that is used to write about the author.

#2- Add jQuery Script

Note- If you have already installed jQuery Script on your template, then there is no need to do this again.
  • Place the bellow code above ‘</head>’ on your template:-
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

#3- Add CSS of the Author Box

Here comes the main part. CSS is used in this Author box to create effects like shadow, border, background and much more. Don’t forget to add it.
  • Paste the bellow code above ‘]]></b:skin>’.
/*############# Author Box By Blogger Guiders ##############*/
#author-h3 h3{font-family:oswald;font-size:16px;color:#FFF;font-weight:400;line-height:14px;text-transform:capitalize;background:#363D41;border:2px solid #2A3033;border-top-right-radius:5px;border-top-left-radius:5px;box-shadow:0 2px 4px #666;margin:10px 0!important;padding:15px!important}

#about-opacity {opacity: 0.5;
-moz-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);  
-o-transform: rotate(7deg);  
-webkit-transform: rotate(7deg);  
-ms-transform: rotate(7deg);  
transform: rotate(7deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;  
margin-right:5px;
                          }
#about-opacity:hover{
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);  
-o-transform: rotate(0deg);  
-webkit-transform: rotate(0deg);  
-ms-transform: rotate(0deg);  
transform: rotate(0deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
                          }
.about-picture{
border:0px solid #888; margin:2px 15px 0px 0px; padding:2px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-o-border-radius: 50px;
                          }
.about-picture{
border:2px solid #ccc;
cursor:pointer;
                          }
#about{
  font-family: bree serif;
  padding-left: 3%;
  margin-left: 15%;
  margin-top: 1%;
  font-size: 16px;
  border-left: 2px dashed;
                          }
.mbt-share a:hover{color:#FFF;}
.mbt-share{
  list-style: none;
  float: left;
  margin-top: -39px;
  margin-left: 15%;
}
#follow{  text-shadow: -1px -1px 2px #000;
  background: #363D41;
  padding: 10px;
  border-bottom-right-radius: 5px;
  padding-left: 18px;
  border-bottom-left-radius: 5px;
  font-size: 16px;
  font-family: oswald;
  color: #FFF;
                          }
.follow{
                            box-shadow: 1px -4px 2px 0px;}
.bg-share a {
  color: #BABABA;
}
.bg-share li {
  float: left;
  padding-right: 21px;
}
.credits_author_box a {
  color: #D7D7D7;
}
.credits_author_box:hover {
  font-size: 10px;
  transition: .2s;
}
.credits_author_box {
  float: right;
  transition: .2s;
  font-size: 8px;
}

#4- Add Author Box

Now, this is the second main part. You have to add the author box code to show it bellow every post. It’s Easy!
  • Press Ctrl+F to open the search box on Blogger Editor.
  • Type ‘<data:post.body/>’ on the search box and bellow it, paste the following code:-
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='about-author'><div id=’author-h3’><h3>About Our Author</h3></div>
  <img align='left' class='about-picture' height='100px' id='about-opacity' src='[[YOUR_PHOTO_URL]]' width='100px'/><div id='about'>[[ABOUT_YOU]]</div>
<div class="credits_author_box">Created By <a href="http://bloggerguiders.blogspot.com">Blogger Guiders</a></div>
</div>
                          <br/>
<div class='follow'><div id='follow'>
  Follow Us On - </div>
<div class='bg-share'>
<li>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=[[FEEDBURNER_USERNAME]]' rel='nofollow' target='_blank'><i class='fa fa-envelope-o'/></a></li>
<li><a href='http://feedburner.google.com/fb/a/mailverify?uri=[[FEEDBURNER_USERNAME]]' rel='nofollow' target='_blank'><i class='fa fa-rss'/></a></li>
<li><a href='http://www.facebook.com/[[TWITTER_USERNAME]]' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>
<li><a href='http://google.com/[[GOOGLE+_USERNAME]]' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li>
<li><a href='http://twitter.com/[[TWITTER_USERNAME]]' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>
</div>
</div>
                        </b:if>
                      </b:if>
  • Customize the above code before putting it bellow ‘<data:post.body/>’.
  • Save Your Template.
Now, take a look at your blog. Congratulations! You have added the About Author Box Bellow Every Post!

Final Words from Author

I hope you liked this author box. This is our first author box, published on Blogger Guiders. In future, we will publish more author boxes with more styles. Usually, If you find any error in the given code, kindly discuss it on comments. Thanks.