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>�.
#4- Add Stylish Below Post About Author Box In (Blogger) 2016
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://tips4tricx.blogspot.com">tips4tricx</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.