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.
,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 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7lPGQ_7DU-1B1Jp8C-MdQOeDQiGFlCe5fjv_DOXHv_B6701Fjw4X9ei_18o1LC_2xijZMrKR-6oWN6fZSFte9tSb1tyNSkuyJiGumyj_zGevQHGg-QGT2VI02BzwOihdUM2xD3hpTJAJO/s1600/99pcsoft.blogspot.in+Prince+chaudhri.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..!!
Author : Prince Chaudhri is a young addicted blogger, He loves to sharing files And tips only for enjoy, He is Like to play with HTML/java script coding and He is also like meet new peoples.
ConversionConversion EmoticonEmoticon