How to add an author bio widget in Blogger.
Step 1: Find the code
The best place to add an author bio widget is below the article that the author had written. So, first of all, go to Blogger dashboard >> Template >> Edit HTML and find below HTML code (to find code, just click anywhere on the HTML editor and press ctrl+f).
<div class='post-footer-line post-footer-line-1'>
Remember, the code that I have mentioned earlier is repeated two times in your template. So find the code (<div class='post-footer-line post-footer-line-1'>) which is seen below this code - <div class='post-footer'>
Step 2: Place the code
Now you need to the place the following code below the code that I have mentioned earlier.
<div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below-10105'><ul class='ts-fab-list'><li class='ts-fab-bio-link active'><a href='#ts-fab-bio-below-10105'>About</a></li><li class='ts-fab-twitter-link'><a href='#ts-fab-twitter-below-10105'>Twitter</a></li><li class='ts-fab-facebook-link'><a href='#ts-fab-facebook-below-10105'>Facebook</a></li><li class='ts-fab-googleplus-link'><a href='#ts-fab-googleplus-below-10105'>Google+</a></li></ul>
<div class='ts-fab-tabs'>
<div class='ts-fab-tab' id='ts-fab-bio-below-10105' style='display: block;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-0' src='AUTHOR IMAGE URL HERE' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'><h4><a href='AUTHOR WEBSITE LINK HERE'>AUTHOR NAME HERE</a></h4></div> <div class='ts-fab-content'>AUTHOR BIO HERE</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-twitter-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-1' src='AUTHOR IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='http://twitter.com/AUTHOR TWITTER PROFILE ID'>@AUTHOR NAME</a></h4></div> <div class='ts-fab-content'> </div><div class='ts-fab-follow'><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1374787011.html#_=1375013320942&id=twitter-widget-2&lang=en&screen_name=AUTHOR TWITTER PROFILE ID&show_count=true&show_screen_name=true&size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 243px; height: 20px;"></iframe></div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-facebook-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-2' src='AUTHOR IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='http://www.facebook.com/AUTHOR FACEBOOK ID'>AUTHOR NAME</a></h4></div>
<div class='fb-follow' data-href='https://www.facebook.com/AUTHOR FACEBOOK ID' data-show-faces='true' data-width='450'><span style='height: 35px; width: 450px;'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2FAUTHOR FACEBOOK ID&layout=standard&show_faces=true&colorscheme=light&font&width=450&height=27' style='border:none; overflow:hidden; width:450px; height:27px;'/></span></div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-googleplus-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-3' src='AUTHOR IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='https://plus.google.com/AUTHOR GOOGLE+ ID?rel=author'>AUTHOR NAME</a></h4>
</div>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/AUTHOR GOOGLE+ ID' data-rel='author'/>
</div>
</div>
</div>
</div>
<style>
.ts-fab-wrapper {
margin: 0 0 2em;
clear: both;
}
.ts-fab-wrapper ul
{
list-style:none outside none;
}
.ts-fab-wrapper a {
text-decoration: none !important;
}
.ts-fab-wrapper img {
border: none !important;
}
.ts-fab-list {
overflow: hidden;
padding: 0 0 0 5px !important;
margin: 0 !important;
}
.ts-fab-list li {
display: block;
float: left;
list-style: none;
margin: 0 5px 0 0 !important;
}
.ts-fab-list li a {
display: block;
line-height: 16px;
height: 16px;
padding: 8px 12px;
background-color: #e9e9e9;
border: 1px solid #e9e9e9;
border-bottom: none !important;
text-decoration: none;
font-size: 13px;
color: #333;
font-weight: bold;
outline: 0;
text-shadow: none !important;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.ts-fab-list li a:hover {
color: #333;
}
.ts-fab-list li.active a {
background-color: #333;
color: #fff;
border-color: #333;
}
.ts-fab-list li a {
background-image: url('http://www.steamfeed.com/wp-content/plugins/fanciest-author-box_10-13-12/images/fab_tab_icons.png');
}
.ts-fab-list li.ts-fab-bio-link a {
background-position: 8px 8px;
background-repeat: no-repeat;
padding-left: 27px;
}
.ts-fab-list li.ts-fab-bio-link.active a {
background-position: -280px 8px;
background-repeat: no-repeat;
padding-left: 27px;
}
.ts-fab-list li.ts-fab-twitter-link a {
background-position: 8px -42px;
background-repeat: no-repeat;
padding-left: 35px;
}
.ts-fab-list li.ts-fab-twitter-link.active a {
background-position: -270px -42px;
background-repeat: no-repeat;
padding-left: 35px;
}
.ts-fab-list li.ts-fab-facebook-link a {
background-position: 8px -92px;
background-repeat: no-repeat;
padding-left: 23px;
}
.ts-fab-list li.ts-fab-facebook-link.active a {
background-position: -284px -92px;
background-repeat: no-repeat;
padding-left: 23px;
}
.ts-fab-list li.ts-fab-googleplus-link a {
background-position: 8px -142px;
background-repeat: no-repeat;
padding-left: 30px;
}
.ts-fab-list li.ts-fab-googleplus-link.active a {
background-position: -276px -142px;
background-repeat: no-repeat;
padding-left: 30px;
}
.ts-fab-list li.ts-fab-linkedin-link a {
background-position: 8px -242px;
background-repeat: no-repeat;
padding-left: 30px;
}
.ts-fab-list li.ts-fab-linkedin-link.active a {
background-position: -276px -242px;
background-repeat: no-repeat;
padding-left: 30px;
}
.ts-fab-custom-link a {
background-image: none !important;
}
.ts-fab-widget .ts-fab-list li a, .ts-fab-icons-only .ts-fab-list li a {
text-indent: -9999em;
padding: 8px 12px !important;
}
.ts-fab-widget .ts-fab-list li.ts-fab-bio-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-bio-link a {
width: 4px;
}
.ts-fab-widget .ts-fab-list li.ts-fab-twitter-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-twitter-link a {
width: 12px;
}
.ts-fab-widget .ts-fab-list li.ts-fab-googleplus-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-googleplus-link a {
width: 8px;
}
.ts-fab-widget .ts-fab-list li.ts-fab-linkedin-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-linkedin-link a {
width: 8px;
}
.ts-fab-widget .ts-fab-list li.ts-fab-facebook-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-facebook-link a {
width: 0;
}
.ts-fab-widget .ts-fab-list li.ts-fab-latest-posts-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-latest-posts-link a {
width: 4px;
}
.ts-fab-widget .ts-fab-list li.ts-fab-custom-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-custom-link a {
text-indent: 0 !important;
}
.ts-fab-tab {
display: none;
border: 2px solid #333;
padding: 12px;
background: #fff;
min-height: 64px;
overflow: hidden;
}
.ts-fab-tab:first-child {
display: block;
}
.ts-fab-widget .ts-fab-tab {
padding: 8px;
}
.ts-fab-avatar {
display: block;
float: left;
width: 64px;
height: 64px;
}
.ts-fab-no-float .ts-fab-avatar {
float: none;
margin: 0 0 12px;
}
.ts-fab-avatar img {
display: block;
border: none !important;
}
.ts-fab-text {
margin-left: 76px;
line-height: 1.5;
}
.ts-fab-no-float .ts-fab-text {
margin-left: 0;
}
.ts-fab-header {
margin-bottom: 10px;
}
.ts-fab-text h4 {
clear: none;
font-size: 18px;
line-height: 1 !important;
font-weight: bold;
margin: 0 0 0.2em !important;
line-height: 1;
padding: 0;
}
.ts-fab-description {
font-size: 12px
}
.ts-fab-follow {
margin-top: 10px;
}
.ts-fab-latest {
margin: 0 !important;
padding: 0 !important;
}
.ts-fab-latest li {
list-style: none !important;
line-height: 1.1;
margin: 0 0 0.6em !important
}
.ts-fab-latest li span, .ts-fab-twitter-time {
font-size: 12px;
}
.latest-see-all {
font-weight: normal;
}
.ts-fab-wrapper iframe {
margin-bottom: 0 !important;
}
body.rtl .ts-fab-avatar {
float: right;
}
body.rtl .ts-fab-text {
margin-left: 0;
margin-right: 76px;
}
body.rtl .ts-fab-list {
padding: 0 5px 0 0 !important;
}
body.rtl .ts-fab-list li {
float: right;
margin: 0 0 0 5px !important;
}
</style>
Step 3: Place the script
Now search for this code </head> and place the following script above it.
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function(a){a(".ts-fab-tabs > div").hide();a(".ts-fab-tabs > div:first-child").show();a(".ts-fab-list li:first-child").addClass("active");a(".ts-fab-list li a").click(function(){a(this).closest(".ts-fab-wrapper").find("li").removeClass("active");a(this).parent().addClass("active");var b=a(this).attr("href");if(b.indexOf("#")!=-1){currentTabExp=b.split("#");b="#"+currentTabExp[1]}a(this).closest(".ts-fab-wrapper").find(".ts-fab-tabs > div").hide();a(b).show();return false})});
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
// Google + (plus)
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
Now click on save the template you have done customize with your own desire viewing and if you face any problem please feel free to leave a comment below your comment will be highly appreciate.
Thanks & Stay Tuned. . !
0 comments:
Post a Comment
Confused? Don't hesitate to ask We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows.
Note: Please do not spam. Those type of comments will be deleted upon our review.