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="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 ,

    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..

    0 comments:

    Post a Comment

     
    Toggle Footer
    Top