June 23, 2013
Sunday, June 23, 2013
No comments

Awasome 3D Transaction Social Widget on Mosue Hover..!!!



         Hi guys after a long time ..May be a month I am once again back with New and Effective CSS3 Widgets !!!.. This is also one of the Widget which Join's the Category of "My Own Creation"  ..

           I am Very Much Exited to post or share this Widget.. Because this is my most favourite widget with awasome css3 transactions effect..Thanks to "Codrops" for sharing CSS3 Hover Effect Tutorials ..Which Inspited me to make this widget...



           Take A look at it..How it Looks.. Live Demo

          This Widget has Two Versions.. One is colored and other is Non-Colored Version. Only with color code this two varies.. You can also change the Colors According to your Wish or Your Template..You can use our Blog's "HTML Modifier or Editor" to edit HTML and CSS and for Color Codes you can try Our Blog's "Hexadecimal Color Code Generator"...

OK!! Let's Begin as Usual..


How To Add This Widget This your Blog: 

  • Login to your "Blogger Account" and Go to your Blog "Dashboard"...
  • Now Go to "Layout Section" from your "Dashboard"...
  • Now Click On "Add Gadget" and Select "HTML/Java Script"...
  • Now Copy and Paste the Below Given Set of Codes in it...

<link rel="stylesheet" href="https://googledrive.com/host/0B_7JWdEqBhVVdk11eHpTT0xyd28"/>

<div class="maincont">
<div class="container">
<section class="main">
<ul class="ch-grid">
<li>
<div class="ch-item">              
<div class="ch-info">
<div class="ch-info-front ch-img-1"></div>
<div class="ch-info-backfb">
<h3>Facebook</h3>
<p>Like Our Page .:MJN Tech:.<a href="http://facebook.com/mjntech">Like us On Facebook</a></p>
</div>  
</div>
</div>
</li>
 <li>
 <div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-2"></div>
<div class="ch-info-backgp">
 <h3>Google+</h3>
<p>Add Us To your Circle<a href="https://plus.google.com/117524639868275216387">Add Us On Google+</a></p>
 </div>
 </div>
</div>
</li>
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-3"></div>
<div class="ch-info-backtw">
<h3>Twitter</h3>
<p>Join Us on Twitter<a href="http://twitter.com/manjunathg17">Follow Us on Twitter</a></p>
</div>
</div>
 </div>
</li>
 </ul>
</section></div>
</div>

  • Add The Title As you wish and Click Save!!!!!!!!
That's it all Done...

Customization: 

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


Useful Note:

Important Note:


  • You Can Comment If any Problem Persist.. or Need Help With This Widget..
  • Any Query or Help Related to this or any other related to Blogger Feel Free to Contact Us..
    Within 24 to 48 hours we will get your back the answer for your Question.. .

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