Add Author Box with Rotator Image Effects in Blogger Footer or Sidebar

Add Author Box with Rotator Image Effects in Blogger Footer or Sidebar

7
data:blog.title

I have already shared a tutorials that how to add Author box end of blog posts. Now I am sharing another Author Box for your templates footer or sidebar. This author box contain rotator image that means when you will mouse over on image then it will rotate. And I have also included double colored border. I have tried to bring little variety. 

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Widget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.
<style>.BSprofileBorder {margin:0 auto;padding:5px;width:290px;border-radius:5px;border: 5px #009999 solid;min-height:70px;}.BSprofileBorder1 {margin:5px auto;padding:5px;width:auto;border-radius:5px;border: 5px #80C8FE solid;min-height:70px;}#BSprofile{border:2px solid #888; margin:2px 5px 0px 5px; padding:2px;
}
#BSprofile:hover {border:2px solid #ccc;cursor:pointer;
}
.BSprofileopacity  {opacity: 0.5;margin-left: 50px;-moz-transition: all 0.5s ease-out;  -o-transition: all 0.5s ease-out;  -webkit-transition: all 0.5s ease-out;  -ms-transition: all 0.5s ease-out;  transition: all 0.5s ease-out;-moz-transform: rotate(7deg);  -o-transform: rotate(7deg);  -webkit-transform: rotate(7deg);  -ms-transform: rotate(7deg);  transform: rotate(7deg);  filter: progid:DXImageTransform.Microsoft.Matrix(                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');zoom: 1;  }.BSprofileopacity:hover  {opacity: 1;margin-left: 0px;-moz-transform: rotate(0deg);  -o-transform: rotate(0deg);  -webkit-transform: rotate(0deg);  -ms-transform: rotate(0deg);  transform: rotate(0deg);  filter: progid:DXImageTransform.Microsoft.Matrix(                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');zoom: 1;-moz-box-shadow: 1px 1px 4px #000;-webkit-box-shadow: 1px 1px 4px #000;box-shadow: 1px 1px 4px #000;</style>
<div class="BSprofileBorder"><div class="BSprofileBorder1"><img class="BSprofileopacity" id="BSprofile" height='50' src="http://4.bp.blogspot.com/-AUlnsFGtuYA/UMIYuhZF76I/AAAAAAAAAVc/VEbCdsa08ZM/s1600/Rabbi.jpg" width='50' align="left"/>I'm <a rel="me" href=https://plus.google.com/u/0/102331886274459115104/ title="Mohammad Fazle Rabbi" target="_blank"> Mohammad Fazle Rabbi </a>from Bangladesh. Founder of BloggerSpice.com</span>>>><a style="color:#888;" href="http://www.bloggerspice.com/p/authors-profile-hi-readers-this-is.html" target="_blank">Read More &#187;</a></div></div>

Customization:

  • Change  102331886274459115104 with your G+ ID And write your own information.
  • Change http://www.bloggerspice.com/p/authors-profile-hi-readers-this-is.html link with your About Us Page.
  • Change http://4.bp.blogspot.com/-AUlnsFGtuYA/UMIYuhZF76I/AAAAAAAAAVc/VEbCdsa08ZM/s1600/Rabbi.jpg with your Image link.
Add Author Box with Rotator Image Effects in Blogger Footer or Sidebar
4 Stars stars - "Add Author Box with Rotator Image Effects in Blogger Footer or Sidebar" I have already shared a tutorials that how to add Author box end of blog posts. Now I am shari...

Hi,

It is really helpful article. It has help me a lot. Thanks.


Technology Price in India

thank you i got it.............please admin check my blog how i have used your helpful tips.........http://www.latestgames2.blogspot.com/

can you please send me your template's xml backup file...then I can work on them and send back to you..Because it require some subtle work...send me to my email by attached xml file

nice post http://earningjobsnetwork.blogspot.com/

you are great blogger of bangladesh, i like u very much

Thanks Hamid..Bangladeshi blogger should come forward in blogging world for rock the world.

nice blog n nice articles! please help me in improving my blog please
www.giga-one.com

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *