Monday, June 18, 2012

Sharing Media Icons with Animation Effects using CSS3

Hello Friends. After Simple Subscription Box widget I am sharing again with new Sharing icons (buttons) with cool effects using CSS3. You know, we can give dynamic looks in our HTML code using CSS version 3 without any need of rich java script. I tried and make a unique, attractive and good looking sharing button with Black and White icons of Facebook, Twitter, Google+ and You Tube.I put some hover effects on these buttons so user got impressed using this design.I developed this Design with few line of code because of CSS3. Its make my work more easy. I decided to share it with. You can add these button in any HTML website like your blogger or WordPress Blog. It will load in few seconds and does not effect your blog loading time. To add these buttons in your blog, follow these simple steps.



How to add these Sharing buttons

  1. Copy the CSS code and paste it in your Style.css file or Just before </b:skin> in Blogger.
#pbt_share_ex {
width: 800px;
margin: 0 auto;
}
#pbt_share_ex img {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
#pbt_share_ex img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}

#pbt_share_ex ul{
list-style-type:none;
}
#pbt_share_ex  li{
list-style-type:none;
}
   2.  Copy the following code and paste  it where you want these sharing buttons.
<div id='pbt_share_ex'>
<!--The Widget are created by ProBloggingTools . Don't use this code without permission-->

<li class='current-cat'><a href="https://www.facebook.com/probloggingtools" target="_blank" rel="nofollow">
<img src="http://2.bp.blogspot.com/-p-dbWUgh9hE/T96dA5c8OGI/AAAAAAAABWU/K_V8qSZODck/s1600/icon1.png" width="125" height="125" border="0" />
</a>
<a href="https://twitter.com/probloggingtool" target="_blank" rel="nofollow" >
<img src="http://1.bp.blogspot.com/-UjF9lnWlPTM/T96c_H0UWRI/AAAAAAAABWM/A_Do488S8Ik/s1600/f.png" width="125" height="125" border="0" /></a></li>

<li>
<a href="http://www.youtube.com/user/probloggingtools/videos" target="_blank" rel="nofollow">
<img src="http://4.bp.blogspot.com/-B8hYQk6Lkw4/T96dCTtuGRI/AAAAAAAABWc/2kbvyVYI-II/s1600/icon8.png" width="125" height="125" border="0" />
</a>

<a href="https://plus.google.com/111188040805340254482/posts" target="_blank" rel="nofollow">
<img src="http://2.bp.blogspot.com/-40ET7V5mapg/T96dEX18jqI/AAAAAAAABWk/Wr0GCw0aW8Q/s1600/icon9.png" width="125" height="125" border="0" />
</a>

</li>
</div>
</div>
   3. Change the URLs (Colored) of Facebook, Twitter, Google+ and YouTube with your Blogs.
   4. Save your template and see your blog with these sharing icons. Hover mouse on these buttons to see the   effects.

Credits

These sharing buttons is fully designed by PBT. if you want to share it with your reader, you have to give a back links to PBT.

Need Help??

Having any problem to implement this widget in your blog or website, feel free to ask here via commenting. I will try to solve your issues.

1 comments :

confused??? Post a Comment

 

Recent Posts

About PBT

We design and develop Widget, Custom code , Template customization so that you can make your blog unique and cool. If you need any type of widget or custom code feel free to Contact. we happy to help you...