Güncel Haberler, Yazılım, Teknoloji ve İnternet Paylaşım

Mouse Hover About Author Widget For Blogger



SCREEN SHOT





About Author widget is best part of your template, because from this widget your visitors know about yourself and your skills.so in this post i am going to introduce you a simple and good looking About author widget for your blog
,which is very simple, attractive and easy to add. if u like this widget and want to add on your blog then follow below steps.


:Installation instruction: 

Step 1. First log in to your  Blogger Account

Step 2. Go to your blogger Dashboard
  
Step 3.Then Go to  Design >Layout.

Step 4. In layout option Choose Add A Gadget

Step 5. Now a popup windows will display in popup windows Choose 
               HTML/Javascript. 
 
Step 6. And now copy below code and and paste in html box.





 <!--[if !IE]> -->
<style>
#profile{
border:2px solid #888; margin:2px 5px 0px 0px; padding:px;
}
#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>
   <![endif]-->
<style>
#profile{
border:1px 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="http://1.bp.blogspot.com/-gnDfxUVjpGk/VDwBOvzH27I/AAAAAAAAA98/TSsGJJ5gVXY/s1600/99pcsoft.blogspot.in%2BPrince%2Bchaudhri.jpg" align="left"/>
prince is a young Blogger and Web Designer. He is aslo like to play with html and android roms.<a style="color:rgb(255, 144, 0);" href="Enter here your about us page link/p/about.html">Read More..</a>  <br/> </![endif]-->



Step 7. Now click on save button.. Done

Note:- Change red line with your image url

Note:- Change green line with your own text

Note:- Change blue line with your about us page link


Note:-If u like this post please give comments for your feedback suggestion or help.Thanks..!!

Yorumlarınız için teşkür ederim Conversion Conversion Emoticon Emoticon