Professional Footer Quote Author Box Widget For Blogger

Having an author box and about us page is very much important, because All bloggers and visitors love to know about the person behind the blog .Keeping Author Box in blog footer makes your blog professional and Outstanding .You might have come across such widgets in WordPress blogs and Other websites , but unfortunately there is non for blogger.So,Today I have made this widget for blogger users!!To Get this Widget,we just need to add some code in our Widget box.This widget also helps to get Authorship in Google Search Results.We Highly recommend to place this widget in footer


After working out this post you will end up something like this :

Man
Behind
This Blog

Durai Sankar
I'm the owner and founder of this blog. I reside in Chennai, India and I'm doing my 11th grade...More

How to add this Widget to Blogger:

• Go to Blogger > Layout > Add A Gadget > HTML/JAVASCTIPT
• Paste the following coding inside it:

<style>.quote_box{width:225px;margin-top:12px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj6YfGkLhMB30gchx8sjsfrNnRvyozXm1x0H9wWHYioL5wXmwg9IVCrecKwAqp3vh-p62yHVOSmThzLX2e0jnL7mQWeC0oeqN4AlPQjGCz-lM28GAgPzWdvkClTWJD1wmR5rPkSgdqmsrg/s320/footer+author+quote.PNG) no-repeat 94% 7%;border:1px solid #b6b6b6;position:relative;padding:18px}.quote_box:before{border:15px solid;bottom:-30px;content:'';height:0;right:40px;position:absolute;width:0;border-color:#b6b6b6 transparent transparent #b6b6b6}.quote_box:after{border:14px solid;bottom:-27px;content:'';height:0;position:absolute;right:41px;width:0;border-color:#fff transparent transparent #fff}.quote_content{overflow:hidden}.detail_box{float:left;margin-left:0}.detail_box span{display:block}.detail_box span.name{font-size:17px;line-height:30px}.detail_box span.derole{ color: #666666; font-size: 15px; font-style: italic; line-height: 10px;}.said_box{ font-size: 20px;float:left;margin-top:-130px;margin-left:72px}.said_box span.roleau{ color: #333333; font-size: 16px; font-style: normal; line-height: 20 px;}.custom li.quotes,.custom li.widget.quotes p{margin-bottom:0} </style> <br /> <div class="quote_box"> <div class="quote_content"> <div class="detail_box"> <img alt="Durai Sankar" src="YOUR 125 X 125 IMAGE URL" style="border-radius: 777px 777px 777px 777px;" title="Durai Sankar" /><span class="derole"></span><br /> <span class="derole">Man</span><br /> <span class="derole">Behind</span><br /> <span class="derole">This Blog</span></div>

<div style="text-align: right;"><div class="said_box"> <a href="YOUR GOOGLE + URL" rel="author" target="_blank">Durai Sankar</a><span class="roleau"></span><br /> <span class="roleau">I'm the owner and founder of this blog. I reside in Chennai, India and I'm doing my 11th grade...<a href="YOUR ABOUT US PAGE URL" rel="author" target="_blank">More</a></span></div> </div> </div> </div></div>

Customisation:

• Just Replace Durai Sankar with your name.
• And Replace Other Bold Texts with mentioned above.
• Replace Blue Text with your Description.Thats all!

I hope you liked this widget very much.Please take few seconds to share with your friends.