Showing posts with label Author Box. Show all posts
Showing posts with label Author Box. Show all posts

Thursday, April 24, 2014

// // Leave a Comment

How To Add Author Bio Below Post in Blogger

After my previous article TechPress Blogger Template today i am going to share how to add author bio below post in very simple step.

Author bio below post is very important because most of reader see author name first then read their article but you have to create your author ranking some of people only reads their favorite author post. i am researching in how to create author ranking when i got it complete i will share it to my readers.



So let's see how to put author bio below post in blogger

Follow these simple steps



  • 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'>
Note: if you are seeing this code two time just see this code (<div class='post-footer-line post-footer-line-1'>) which is seen below this code - <div class='post-footer'>

  • Now you need to the place the following code below the code that I have mentioned earlier. 

<div class="beh-entry-author">
<div class="author-header main-color-bg">
<h4 class="title">
<a rel="author" href="#">Admin Name Here</a>
</h4>
</div>
<div class="author-wrap">
<div class="author-avatar">
<img class="avatar avatar-80 photo" width="80" height="80" src="Your Image Link Here"/></div>
<div class="author-description">
Author Bio Here Write something about yourself.
<div class="author-link">
<a rel="author" href="#">
Facebook
<span class="meta-nav">?</span>
</a>
</div>
</div>
</div>
</div>
<div class="entry-social">
<div class="fb">
<a target="_blank" href="Your_Facebok_Page">Facebook</a>
</div>
<div class="twitter">
<a target="_blank" href="Your_twitter_Profile">Twitter</a>
</div>
<div class="gplus">
<a target="_blank" href="Your_Googleplus_Follow">Google+</a>
</div>
<div class="linkedin">
<a target="_blank" href="Your_Linkedin_Profile">Linkedin</a>
</div>
<div class="pinterest">
<a target="_blank" href="You_Pinterest_Page">Pinterest</a>
</div>
<div class="delicious">
<a target="_blank" href="Your_Delicious_Profile">Delicious</a>
</div>
<p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="http://www.tonyisright.blogspot.com">blogger widgets</a></p>
</div>
<style>
.entry-social {
    margin-bottom: 20px;
    overflow: hidden;
}
.entry-social a {
    color: #FFFFFF !important;
    display: block;
    font-family: "Open Sans","Tahoma","Verdana","Arial",sans-serif;
    font-weight: 600;
    padding-left: 20px;
}
.entry-social div {
    float: left;
    margin-right: 10px;
    width: 138px;
}
.entry-social .fb a {
    background: url("http://3.bp.blogspot.com/-yqD2363XuAo/UeDk98twSlI/AAAAAAAAArg/kXIzFBWmczM/s1600/fb14.png") no-repeat scroll 10px center #3B5999;
    padding: 7px 10px 7px 26px;
}
.entry-social .fb a:hover {
    background: url("http://3.bp.blogspot.com/-yqD2363XuAo/UeDk98twSlI/AAAAAAAAArg/kXIzFBWmczM/s1600/fb14.png") no-repeat scroll 10px center #324B81;
}
.entry-social .twitter a {
    background: url("http://3.bp.blogspot.com/-0u8P4VQmEeU/UeDlVdilwcI/AAAAAAAAAro/lGTnlvHGyVw/s1600/twitter14.png") no-repeat scroll 8px center #01BBF6;
    padding: 7px 10px 7px 32px;
}
.entry-social .twitter a:hover {
    background: url("http://3.bp.blogspot.com/-0u8P4VQmEeU/UeDlVdilwcI/AAAAAAAAAro/lGTnlvHGyVw/s1600/twitter14.png") no-repeat scroll 8px center #01A7DE;
}
.entry-social .gplus a {
    background: url("http://3.bp.blogspot.com/-A8fFRexz_zk/UeDlgadvpiI/AAAAAAAAArw/TRd7NWNwo9s/s1600/gplus14.png") no-repeat scroll 10px center #D54135;
    padding: 7px 10px 7px 32px;
}
.entry-social .gplus a:hover {
    background: url("http://3.bp.blogspot.com/-A8fFRexz_zk/UeDlgadvpiI/AAAAAAAAArw/TRd7NWNwo9s/s1600/gplus14.png") no-repeat scroll 10px center #BA3227;
}
.entry-social .linkedin a {
    background: url("http://4.bp.blogspot.com/-yuEMxhpIXPc/UeDltjBGR1I/AAAAAAAAAr4/kgidavlGbY8/s1600/linkedin14.png") no-repeat scroll 10px center #167FB1;
    padding: 7px 10px 7px 35px;
}
.entry-social .linkedin a:hover {
    background: url("http://4.bp.blogspot.com/-yuEMxhpIXPc/UeDltjBGR1I/AAAAAAAAAr4/kgidavlGbY8/s1600/linkedin14.png") no-repeat scroll 10px center #136F9B;
}
.entry-social .pinterest a {
    background: url("http://1.bp.blogspot.com/-v-ZkEQhYpug/UeDl6uIio-I/AAAAAAAAAsA/9rqq2cXT08k/s320/pinterest14.png") no-repeat scroll 10px center #CB2027;
    padding: 7px 10px 7px 32px;
}
.entry-social .pinterest a:hover {
    background: url("http://1.bp.blogspot.com/-v-ZkEQhYpug/UeDl6uIio-I/AAAAAAAAAsA/9rqq2cXT08k/s320/pinterest14.png") no-repeat scroll 10px center #B01C23;
}
.entry-social .delicious a {
    background: url("http://2.bp.blogspot.com/-J9p31gkQfXw/UeDmILHMQwI/AAAAAAAAAsI/bEws_iRNx7g/s320/delicious14.png") no-repeat scroll 10px center #3173D1;
    padding: 7px 10px 7px 32px;
}
.entry-social .delicious a:hover {
    background: url("http://2.bp.blogspot.com/-J9p31gkQfXw/UeDmILHMQwI/AAAAAAAAAsI/bEws_iRNx7g/s320/delicious14.png") no-repeat scroll 10px center #2963B8;
}
.entry-social .delicious {
    margin-right: 0;
}
.beh-entry-author {
    margin-bottom: 20px;
}
.beh-entry-author .author-header {
    padding: 1px 15px;
}
.beh-entry-author .author-header h4 a:hover {
    color: #000000;
}
.beh-entry-author .author-header h4 a {
    color: #FFFFFF;
}
.beh-entry-author .author-header h4 {
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
}
.beh-entry-author .author-wrap {
    border: 1px solid #EEEEEE;
    overflow: hidden;
    padding: 12px 15px;
}
.beh-entry-author .author-avatar {
    float: left;
    height: 80px;
    margin-right: 30px;
    width: 80px;
}
.beh-entry-author .author-link {
    margin-top: 5px;
}
.main-color-bg {
    background: none repeat scroll 0 0 #2BBFF6;
}
.beh-entry-author a {
    color: #3A3A3A;
    outline: 0 none;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}
.entry-social a {
    color: #3A3A3A;
    outline: 0 none;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}
</style>

Now just paste your social profile Links in the above code and write your name and description in the above code and hit save the template. Wasn't it easy and simple? Remember to change the above links with your own links and write a small info about yourself.

If you face any problem to install this widget in your blog please leave a comment below i am glad to see your comments here. :) 
Read More

Sunday, December 1, 2013

// // Leave a Comment

Author-Box with Social Connection

Author-Box with Social Connection


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.

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

Author-Box with Social Connection

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&amp;id=twitter-widget-2&amp;lang=en&amp;screen_name=AUTHOR TWITTER PROFILE ID&amp;show_count=true&amp;show_screen_name=true&amp;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&amp;layout=standard&amp;show_faces=true&amp;colorscheme=light&amp;font&amp;width=450&amp;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[*/
 // Twitter
 (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. . ! 

Read More