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

Features

• 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.

Customization

• 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.

 Must Read : Customize About Author Widget For Blogger

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