Add Beautiful Author Bio Box to Blogger Home Page

This blog aims to provide best blogger resources to all of you who want to decorate their blogger blogs with beautiful widgets and effects. Today, I have a small but beautiful author bio box for your blogs, This author widget is actually added to the home page of your blog. This is not something, which you add below each post in Blogger, but this will be a nice widget, which you can easily add in the footer of your blog's home page. It will contain a short bio of the author of the blog and a link to read more about him. Moreover, it will be having a picture of the author which will rotate upon user mouse hover. Let's start how to add this widget to your blogger blog.

Before adding this small piece of blogger widget to your blog, kindly have a look at the footer of this blog, you'll find an author bio box at the left side of the footer, so you are gonna add the same widget to your blog.

How to Add Author Box in blogger?

The procedure of adding this widget is just simple and easier. Just take below steps in order to add this widget to your blog:

• Go to Blogger Dashboard >>> Layout
• Add a widget >>> Add HTML/JavaScript Widget
• Copy and Paste Below Code into HTML/JavaScript widget

<b:if cond='data:blog.pageType == "item"'><br /><div class='exeauthor_info'><div class='exeauthor_photo'><img alt='author' height='150' src='http://www.evolllution.com/wp-content/uploads/2013/03/Online-Theft-47151849-%C2%A9-Paolese.jpg' width='150'/><br /></div><br /><p>Hello, My Name Is Prince Rameez Anwar From Abbottabad Pakistan And I Am The CEO, Founder Of New Tips And Tricks. I Blogs At Cooltipsandtricks3 And Also Love Coding And Designing.I Post Mostly Abot Facebook Tricks And Blogging And Intenrnet.Don't Forget To Like Our Official Page.<br /></p><div class="exelinediv"></div><table width="100%"><tr> <td><br /><p style="text-align: center;"><small>Get Free Email Updates to your Inbox!</small><br /></p><div class="exeemail"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=EXEIdeas', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="exeemailform"><input value="EXRIdeas" name="uri" type="hidden"/><input name="loc" value="en_US" type="hidden"/><input onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}'kingrameezmughal@gmail.com..." name="email" class="exeemailinput" type="text"/><input class="exeemailbutton" value="SignUp" title="" type="submit"/><br /></form></div></td> <td><br /><ul class="exesocial"><li class="twicon"><a href="http://twitter.com/rameezmughal17">Twitter</a></li><li class="fbicon"><a href="http://facebook.com/rameez.mughal.9448">FaceBook</a></li><li class="gicon"><a href="https://plus.google.com/+sadbrokenheartpoetry1">Google +</a></li></ul></td> </tr></table></div></b:if>

Just make these customization:

• Change the Description of the author to your description
• Change Facebook,Twitter and Google+ link with your username
• Change http://www.evolllution.com/wp-content/uploads/2013/03/Online-Theft-47151849-%C2%A9-Paolese.jpg With Your Image Link

If u have Any Difficulty or Problem Then Comment.

Tweet