Hi Guys Today I am here with one more CSS3 3D Transaction Widget.. Its The Modification or Let's say before Version of the "Awesome 3D Transaction Social Widget on Mosue Hover..!!!" ..
Take A look at it..How it Looks.. Live Demo
So If you are New To My Blog you can have a look at my Previous Post Similar to this @
So before Lets Begin as Usuall
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_7JWdEqBhVVbThSWkRoNDZQc00"/>
<div class="maincont">
<div class="container">
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></div>
<div class="ch-info-backfb">
<h3>Facebook</h3>
<a href="https://facebook.com/mjntech">Like Our Facebook Page</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-2"></div>
<div class="ch-info-backgp">
<h3>Google+</h3>
<a href="https://plus.google.com/117524639868275216387">Add us on Google+</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-3"></div>
<div class="ch-info-backtw">
<h3>Twitter</h3>
<a href="http://twitter.com/manjunathg17">Follow on Twitter</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="maincont">
<div class="container">
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></div>
<div class="ch-info-backfb">
<h3>Facebook</h3>
<a href="https://facebook.com/mjntech">Like Our Facebook Page</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-2"></div>
<div class="ch-info-backgp">
<h3>Google+</h3>
<a href="https://plus.google.com/117524639868275216387">Add us on Google+</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-3"></div>
<div class="ch-info-backtw">
<h3>Twitter</h3>
<a href="http://twitter.com/manjunathg17">Follow on Twitter</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
- Add The Title As you wish and Click Save!!!!!!!!
Customization:
Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+ with your Link..
Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+ with your Link..
Useful Note:
- 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..
- 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.. .
awesome..
ReplyDeleteThanks for your appreciation.. :)
ReplyDelete