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 ↓ :

• Facebook

  Like Us on Facebook

• Twitter

  Follow Us on Twitter

• Google+

  Add Us on Google+

• RSS

  Subscribe Us on RSS

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="https://googledrive.com/host/0B_7JWdEqBhVVN0NkbjZoUGctRFU"/>
<br />
<ul class="ca-menuf">
<li>
<a href="https://facebook.com/mjntech">
<div class="ca-contentf">
<h2 class="ca-mainf">
Facebook</h2>
<h3 class="ca-subf">
Like Us on Facebook</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menut">
<li>
<a href="https://twitter.com/manjunathg17"><div class="ca-contentt">
<h2 class="ca-maint">
Twitter</h2>
<h3 class="ca-subt">
Follow Us on Twitter</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menug">
<li>
<a href="https://plus.google.com/u/0/116155905562588571799"><div class="ca-contentg">
<h2 class="ca-maing">
Google+</h2>
<h3 class="ca-subg">
Add Us on Google+</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menur">
<li>
<a href="https://feedburner.google.com/fb/a/mailverify?uri=mjntech"><div class="ca-contentr">
<h2 class="ca-mainr">
RSS</h2>
<h3 class="ca-subr">
Subscribe  Us on RSS</h3>
</div>
</a>
</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" 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 ,

Manjunath.G..

.:MJN Tech:.