Friday, November 30, 2012

Add Angry Birds Social Sharing Widget To Blogger/WordPress Blog

Author: Gagan Masoun
Add Angry Birds Social Sharing Widget To Blogger/WordPress BlogI have already shared so many tutorials about social sharing widgets because Social sharing widgets are very useful for blogs, with these widgets bloggers can get huge quality traffic for their blogs. You all are know about "Angry Birds" very well. Today, I'm going to share social sharing widget related to Angry Birds.

You can add this widget to your blog easily. This widget contains 5 different color Angry Birds: G+, Facebook, YouTube, Twitter and RSS feed. Check below link for demo:


Live Demo

You May Like To Read:
  1. How To Add Beautiful CSS3 Buttons To Blogger Blog
  2. How To Add Slide Out Floating Sharing Buttons For Blogger Blog
  3. 3D Social Buttons With Rotate Spin Effect For Wordpress And Blogger
  4. How To Add Spraying Animated Subscription Buttons On Blogger Blog

How To Add Angry Birds Social Sharing Widget To Blogger Blog

  1. Go to Dashboard > Design > Page Elements.
  2. Click Add A Gadget. In New Window, Select HTML/Javascript .
  3. Copy The Code Given Below and Paste It Inside The Box.
  4. Save The Gadget

How To Add Angry Birds Social Sharing Widget To WordPress Blog

  1. Go to Dashboard > Appearance > Widgets > Available Widgets
  2. Drag Text Widget Into a Sidebar.
  3. Paste In The Code.
  4. Save Widget & Its Done

Code For Angry Birds Social Sharing Widget

<style>
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
<ul class="bubblewrap">
<li><a href="https://plus.google.com/106217413057730068740" rel='nofollow' target='_blank'><img src="http://3.bp.blogspot.com/-b3-ImgxoXZE/ULTdqlQ4TYI/AAAAAAAAF2g/pBhTwnttAKY/s1600/bloggertrix-googleplus.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/BlogsDaddy" rel='nofollow' target='_blank'><img src="http://4.bp.blogspot.com/-PL55Jd1MIgw/ULTdpgxpthI/AAAAAAAAF2Y/zqic5hvj2BU/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.youtube.com/5abiRaag" rel='nofollow' target='_blank'><img src="http://4.bp.blogspot.com/-RlxdrBe4ecs/ULTduDJX5gI/AAAAAAAAF24/Pc03FWKq8js/s1600/bloggertrix-youtube.png" title="Add to Youtube" /></a></li>
<li><a href="http://www.twitter/BlogsDaddy" rel='nofollow' target='_blank'><img src="http://3.bp.blogspot.com/-NjAWTWrlX5E/ULTdtCeqFeI/AAAAAAAAF2w/sLBX0ttP1rE/s1600/bloggertrix-twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/BlogsDaddy" rel='nofollow' target='_blank'><img src="http://1.bp.blogspot.com/-Cy7I8qvNDg0/ULTdoi-T18I/AAAAAAAAF2Q/qPyAZfmRqU8/s1600/bloggertrix-Rss.png" title="Add RSS Feed" /></a></li>
</ul>
Remember Note: Replace yellow highlighted URL's with your own social profile links.

Worth Reading:
  1. Add A Share Buttons To Blogger Sidebar
  2. Floating Social Media Share Buttons On Blogger Side
  3. Labnol Like Social Subscription Buttons For Blogger Blog
  4. Hand Drawn Social Media Buttons For Your Blogger Blog
  5. Add A Retweet Button To Your Posts On Blogger Blog With Tweetmeme
If you need any help regarding this widget.You can ask me via comments any time.Happy blogging and Stay Blessed!

Author
Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.

3 comments: