Saturday, February 4, 2017

How to Add this Cool Author Box on Your Bloggers Blog.

Posted at  February 04, 2017  |  in  Widget

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 styles 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.

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'/>

Descriptions:-


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://
binoosmart.blogspot.com">
Binoosmart Blog</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.

Note: All codes highlighted in red needs to be edited with your info

Now, take a look at your blog. Congratulations! You have added the About Author Box Bellow Every Post!

Conclusively, I hope you liked this author box. This  author box, was 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.

Share this post

About Naveed Iqbal

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim venenatis fermentum mollis. Duis vulputate elit in elit. Follow him on Google+.

0 comments:

About-Privacy Policy-Contact us
Copyright © 2013 Binoosmart - Writer Of Life..
Powered by Themes24x7 .
back to top