31 January 2014

How to Add Author Box in Blogger

Widget is a part of any blog.Adding attractive widget also attract your visitor into your blog and increase their staying time into your blog.Adding an about author box into your blog will definitely help your blog to grow more and more.Reader love to know the person behind any blog.So you may have already saw such author box in many other blogger and may also liked it as well.So here today we're going to share one such widget for your blogger blog.You can see the live demo of the widget here below.

Live Demo

 Must Read Customize Related Post Widget For Blogger


  • Appear below post only on post pages
  • Fancy mouse hover effect
  • Contains social follower button
  • Easy to load
  • No javascript or jquery
  • Only html and css based

Add This on Blogger

  • Log onto blogger dashboard
  • Goto template->edit html
  • Search for </head> tag and above it paste the below css code

<style> .tthauthor_info{ float:left; width:500px; padding:15px; border:1px solid #ccc; margin-bottom:15px; margin-top:15px; background:#eee;color:#000; } .tthauthor_info:hover{ background:#eee; border:1px solid #ccc; -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); box-shadow:0px 0px 10px rgba(0, 0, 0, .3); } .tthauthor_info h3{ color:#000; margin-bottom:10px; } .tthauthor_info h3:hover{ border : 1px solid #EEEEEE; -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); box-shadow:0px 0px 10px rgba(0, 0, 0, .3); } .tthauthor_photo{ float:left; margin:0 10px 0 10px; } .tthauthor_photo img{ border:1px solid #666; -webkit-transition:-webkit-transform .15s linear; -moz-transition:-moz-transform .15s linear; -o-transition:-o-transform .15s linear;transition:transform .15s linear; -webkit-box-shadow:0 3px 6px rgba(0,0,0,.25); -moz-box-shadow:0 3px 6px rgba(0,0,0,.25); box-shadow:0 3px 6px rgba(0,0,0,.25); padding:5px 5px 5px 5px;-webkit-transform:rotate(+2deg); -moz-transform:rotate(+2deg);-ms-transform:rotate(+2deg); -o-transform:rotate(+2deg);transform:rotate(+2deg);float:left; } .tthauthor_photo img:hover{ background:#FFFFFF; border : 1px solid #EEEEEE; -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); box-shadow:0px 0px 10px rgba(0, 0, 0, .3); -webkit-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -ms-transform:rotate(-1deg); -o-transform:rotate(-1deg); transform:rotate(-1deg); } ul.tthsocial{ list-style:none; margin:10px; overflow:hidden; } .tthsocial li{ float:left; background:none !important; padding:0 !important; margin:0 8px; } .tthsocial li a{ display:block; width:40px; height:40px; background:url("http://3.bp.blogspot.com/-7G-R4vgSPt8/UrCOhn0usZI/AAAAAAAAAGE/wQ1e8KJNMYw/s1600/mastifunz+author+box+share+widget.png") no-repeat transparent; text-indent:-99999em !important; } .tthsocial li a:hover{ padding:0 !important; } .tthsocial li.linkedinicon a{ background-position:0 0; } .tthsocial li.twicon a{ background-position:-50px 0; } .tthsocial li.fbicon a{ background-position:-100px 0; } .tthsocial li.gicon a{ background-position:-150px 0; } .tthsocial li.linkedinicon a:hover{ background-position:0 -50px; } .tthsocial li.twicon a:hover{ background-position:-50px -50px; } .tthsocial li.fbicon a:hover{ background-position:-100px -50px; } .tthsocial li.gicon a:hover{ background-position:-150px -50px; } .tthlinediv{ margin-top:25px; height:0px; clear:both; display:block; border-top:1px solid #fefefe; border-bottom:1px solid #CCCCCC; } </style>

  • Next search for <div class='post-footer-line post-footer-line-1'> tag,you may found it twice inside your template editor.Went for the second one and just below it paste the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='tthauthor_info'> <div class='tthauthor_photo'> <img alt='author' height='120' src='Author-Image-Url' width='120'/> </div> <h2>About Author</h2> <p>Author Bio</p> <div class="tthlinediv"></div> <ul class="tthsocial"> <li class="linkedinicon"> <a href="#">Linkedin</a> </li><li class="twicon"> <a href="#">Twitter</a> </li><li class="fbicon"> <a href="#">FaceBook</a> </li><li class="gicon"> <a href="#">Google +</a> </li> </ul> </div> </b:if>

  • Now save it and you're done.


  • Replace Author-Image-Url with your image url
  • Replace About Author and Author Bio with your desired title and bio
  • Replace # with your linkedin,twitter,facebook,google plus profile url respectively.

So you just made an attractive author box widget for your blog.Take a look into it and see how's it working.If you're having any problem with it do ask through the below comment box.
Articles You May Like

7 comments: Leave Your Comments

  1. Oh newbies will thank widgets :)
    I remember before coding is not a piece of cake but now everything is just copy paste =)
    Lucky young ones!


  2. I was searching for sample codes to achieve this months before and good things there are blogs like yours that help people out for free. :)

  3. The author box does add credibility to ones site.

  4. Your blog is very helpful. I will book mark this just in case I want to add an author box on my blog. Thank you as always

  5. awesome! the author box looks really cool :) very helpful little widget!