May 10, 2013
Friday, May 10, 2013
No comments

Simple but Cool & Awesome CSS3 Social Profile Widget with Zooming and Shrinking Effect ..

                         Today I am Adding One More Widget For "My Own Creation Group or Category".. As you all know I have 3 Widgets of My Own Creation in Before Posts.. So Today Let Me Share My Fourth Widget ..Its Simple Widget Made Using "CSS3" Effects..

Animated Preview :

Also See : How to Create Animated GIF Like Previewing Below..

This Widget Is Made Using the Concept Of Combined CSS3 Tutorials of Different Sites.. Thanks to them.. 

Live Demo ↓ :

So Now Lets get Started !!!

How to add this Widget to your Blog..
  • First Go to "Blogger" >> Then Go to your Blog "Dashboard"..
  • Now Click on Layout Section in the Left Side of your Blog "Dashboard"..
  • Now click on "Add Gadget" ..
  • You will get Many Options ..Scroll Down And Click on to "HTML/Java Script"..
  • Now Paste The Below Code in it..

<link rel="stylesheet" href=""/>
<br />
<ul class="ca-menuf">
<a href="">
<div class="ca-contentf">
<h2 class="ca-mainf">
<h3 class="ca-subf">
Like Us on Facebook</h3>
<ul class="ca-menut">
<a href=""><div class="ca-contentt">
<h2 class="ca-maint">
<h3 class="ca-subt">
Follow Us on Twitter</h3>
<ul class="ca-menug">
<a href=""><div class="ca-contentg">
<h2 class="ca-maing">
<h3 class="ca-subg">
Add Us on Google+</h3>
<ul class="ca-menur">
<a href=""><div class="ca-contentr">
<h2 class="ca-mainr">
<h3 class="ca-subr">
Subscribe  Us on RSS</h3>
<script src="" type="text/javascript"></script>

  • Now click save..That's it ..all Done!!

  •   Customization :

    • Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+,RSS with your Link.. 

    Useful Note:

    • Update !!!!!!!! Made the CSS Code Shorter by Adding Link..
    • You can Also  Edit this Widget like Width,Colour etc using HTML Editor of our Blog   : HTML Editor..
    • You can Use Hexadecimal Color Code  Generator of our Blog to Replace Colors  : HexaDecimal Color Code Generator..

    Important Note:

    • You Can Comment If any Problem Persist.. or Need Help With This Widget..
    • Also in Some Templates it may not be perfect.. In that Case Contact me..

    I hope you have found this post helpful..
    Don't forget to Subscribe , Comment and Share this post..
    With Regard's ,

    Tagged with :

    Manjunath.G (MJN) is a Blogger, web designer and developer .. He has a passion towards Programming , Web designing and also he loves Technology..


    Post a Comment

    Toggle Footer