How To Add Stylish Author Profile Widget On Blogger

How To Add Stylish Author Profile Widget On Blogger:

First I am thanks to blogger for customize templates and widgets. Today I am posted upon Author Profile to make more stylish in blogger. I added some mouse hover effects to Author Profile image and author name and i also added a small image of author that appears when you hover your mouse cursor on it.

1st->Open your blogger account

2->Click on layout

3rd->Click on add gadget

4th->Select HTML/JAVASCRIPT

5th Paste the following code

<style> #profile{ border:2px solid #888; margin:2px 5px 0px 0px; padding:2px; } #profile:hover { border:2px solid #ccc; cursor:pointer; } .opacity { 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; } .opacity: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> <style> #profile{ border:2px solid #888; margin:2px 5px 0px 0px; padding:2px; } #profile:hover { border:2px solid #ccc; cursor:pointer; } .opacity { opacity: 0.5; -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; zoom: 1; } .opacity:hover { opacity: 1; zoom: 1; -moz-box-shadow: 1px 1px 4px #000; -webkit-box-shadow: 1px 1px 4px #000; box-shadow: 1px 1px 4px #000; } </style> <img class="opacity" id="profile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhISUGRl9GjCN1uAhF_JMPbuCC6cYUCpy-lyYY_PVixwvWWvhg1bWlpGZ4zn24t7HkTnquijzmw_uhFeE5Oaz7rrpfpYrNxC2e3XdVsfKTHRj3xrJNsmGZ3P7G8pTlV36_Rr_8c2PKrsYc/s320/capture-20150223-143840.jpg" align="left"/>Hi! Myself <a href="https://plus.google.com/109317678403088654819" target="Bilal Alyan"> Bilal Alyan </a> (Pro Blogger and an addicted Web Developer)<br /> Ist of All I would like to thanks to all Followers and our lovely Visiters...<a href="http://bilalalyan.blogspot.com/p/bilal-alyan-about.html"> Read More</a></a><br/>Widget By <a href="http://showmedreams.blogspot.com">Show me dreams </a>Customization - See more at: http://showmedreams.blogspot.com/2013/04/how-to-add-stylish-author-profile.html#sthash.P33vPNO6.dpuf

Customization

Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhISUGRl9GjCN1uAhF_JMPbuCC6cYUCpy-lyYY_PVixwvWWvhg1bWlpGZ4zn24t7HkTnquijzmw_uhFeE5Oaz7rrpfpYrNxC2e3XdVsfKTHRj3xrJNsmGZ3P7G8pTlV36_Rr_8c2PKrsYc/s320/capture-20150223-143840.jpg with your own image link, For this make 48 × 48 image.


Replace 109317678403088654819 with your own Google + Profile.


Replace Bilal Alyan with your name


Replace http://bilalalyan.blogspot.com/p/bilal-alyan-about.html with your about us page.

Yipeeeeeeeeeeeeeeeeeeeeeeee...............................