Place New & Stylish About Author Box With Hover Effects Bellow Every Post In Blogger
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 == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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.
0 Response to "Place New & Stylish About Author Box With Hover Effects Bellow Every Post In Blogger"
Posting Komentar