Saturday, 23 March 2013

How To Add About The Author Widget With Css Effect For Blogger

Posted by Unknown | 22:30 Categories: ,
Hi Users today im going to tell you how to add "About The Author Widget With Css Effect" on blogger. An About the Author gadget contains descriptive information about the person behind the blog. This gadget can include information such as the author's name, a short biography about the author and a small thumbnail picture of the author.
This helps you to represent yourself in a new AVATAR. You can add About the Author gadget to your right/left slider bar at the top or bottom of your blogger blog homepage. Even you can make it appear where ever you want it in your blog homepage.



View Demo

Now I am going to share a tip that how to customize your About the Author gadget and make it more attractive for the visitors and especially for your loyal readers.

How to Add About the Author Gadget in Blogger?

STEP #1: First log on to Blogger.

STEP #2: Go to Dashboard>Template.

STEP #3: Click on Edit HTML.

STEP #4: Find ]]></b:skin>

STEP #5: Now Copy the below Code and Paste it above/before ]]></b:skin>.


STEP #6: Save your Template.

STEP #7: Now Go to Dashboard>Layout.

STEP #8: Copy the below Code and Paste it into the gadget.

<div id="HTML1" class="widget HTML">
<h2 class="title">About The Author</h2>
<div class="widget-content">
<!--[if !IE]> -->
<style>
#profilesaeed{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;

}

#profilesaeed: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>
#profilesaeed{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;

}

#profilesaeed: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>



<!-- http://lh4.googleusercontent.com/-MBZe_1-SOO0/AAAAAAAAAAI/AAAAAAAAAsQ/TbNYcAcjP0k/s512-c/photo.jpg -->



<img width="50px" height="50px" align="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRumjvDH3v3W0iqMQdRMZ3sdiFJKSlVOZgiWPT61zdLJC8xGwysZAoufvdBqPIRjbwgKpODsAch2i9r7lHf1gzKEPlIUtR9U2edFv4qan4X6Q8UvHSZRggPTqt_JkQgCdQGf5njM0g4kM/s1600/Saeed+Aquib+Ahmed.jpg" id="profilesaeed" class="opacity" /> Hi! I am Saeed Aquib Ahmed, a certified SEO Consultant, Pro Blogger ,pro hacker and an addicted Web Developer. <a href="http://tricksdonor.blogspot.in/p/about-us_23.html" style="color:#888;">Read More..</a>  <br /> <!--&#8594; --><!--![endif]---->
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a title="Edit" target="configHTML1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML1&quot;));" href="//www.blogger.com/rearrange?blogID=7622342819689291323&amp;widgetType=HTML&amp;widgetId=HTML1&amp;action=editWidget&amp;sectionId=lowerbar1" class="quickedit">
<img width="18" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" alt="" />
</a>
</span>
</span>
<div class="clear"></div>
</div>
STEP #9: Now Change red color text.
STEP #10: Click on Save.You are done.
And if you liked this post,Then please like us on fbpage. Thanks!
No comments

0 comments:

Post a Comment

Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. You Can add HTML CODE in comments.
2. You can always Test the tutorial.
3. No cheesy/spam Comments tolerated Spam comments will be deleted immediately upon our review.

Regards,
Saeed Aquib Ahmed :)

Subscribe to: Post Comments (Atom)
Member
Blogger Widgets

Grab This Gadget »

Powered by Tricks Donor
Subscribe
emailSubscribe to our mailing list to get the updates to your email inbox...
Delivered by FeedBurner | powered by Tricks Donor
  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube