Are you looking for an attractive author bio widget? Then today, you are at right place. It is quite common that every reader will be eager to know the man behind an article if it is really interesting. So the first thing any reader will do after reading such a wonderful article, is scrolling throughout the blog to find the author. I know that an author bio below articles is very common for every blogger. But today in this article I am going to guide you to create a wonderful author widget by adding social media button (connection) along with it. This will help a reader to make a connection with the writer. It will not only help the authors to make a connection with the reader, but it also will help to make the other popular and he/she may even get an opportunity to write for others. For example, suppose a professional blogger who is looking for a writer for his blog, by chance he landed on your blog and impressed with the writing skills. Then, this widget will help him contact the author on the go. Because this author bio widget consisting various social media buttons will help him contact you via his favorite social media by clicking on your profile.
So, what are you waiting for? Let's scroll down and check out how to add an author bio widget in Blogger.
Step 1: Find the code
<div class='post-footer-line post-footer-line-1'>
 |
Click Edit Button
|
 |
The code
|
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>
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>
Customization
Once you have placed the code that I have mentioned in step 2, replace the highlighted things such as author image url, author social profiles ID link and author name with your own and save template. That's it!
Read more at . Every blogger tricks
0 comments:
Post a Comment