Wednesday, October 31, 2012

Cloud Social Sharing Buttons For Blogger Blog

Author: Gagan Masoun
Cloud Social Sharing Buttons For Blogger BlogI have already shared too many tutorials about social sharing buttons.Now, learn how to add beautiful cloud style social subscription buttons to  your blogger blog.You can add these buttons with the help of simple steps.This widget made with CSS and HTML combination.Before implement to your blog you can check live demo.

I' m going to share steps but first of all check some previous button related posts below:

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 Cloud Social Sharing Buttons To Blogger Blog

  • Go To Blogger Dashboard and Click Drop Down. 
  • Now Select "Template" > EDIT HTML
  • Now Click Proceed button.
  • Press Ctrl+F  & Find ]]></b:skin>
  • Paste Below Code Before ]]></b:skin>
/* Blogs Daddy*/
.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);
}
  • Now, Save Your Template
  • Go to Blogger Dashboard Again
  • Click Add Gadget and Select 'HTML/Javascript"
  • Paste Below Code
<ul class="bubblewrap">
<li><a href="https://plus.google.com/u/0/117100549673033253859"><img src="http://4.bp.blogspot.com/-Ykk4v3XU5gA/UJDoBwrsZbI/AAAAAAAAh4k/0GtNDg0q0Ko/s1600/blogsdaddy.com-google-plus.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/BlogsDaddy"><img src="http://2.bp.blogspot.com/-pp0fRDMkGlg/UJDoBQgAROI/AAAAAAAAh4c/PExHe-KRp30/s1600/blogsdaddy.com-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.digg.com/Username"><img src="http://3.bp.blogspot.com/-pSO41RHwiRc/UJDoA3lKY9I/AAAAAAAAh4U/vvuij341U4o/s1600/blogsdaddy.com-digg.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/BlogsDaddy"><img src="http://4.bp.blogspot.com/-N4Ko15VAN7I/UJDoDL9GySI/AAAAAAAAh40/sjiaE_1iIHo/s1600/blogsdaddy.com-twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/BlogsDaddy"><img src="http://3.bp.blogspot.com/-m421nCniwMs/UJDoCvGBLoI/AAAAAAAAh4s/G36P591PEwM/s1600/blogsdaddy.com-rss.png" title="Add RSS Feed" /></a></li>
</ul>
  • Save Gadget and Its Done
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! Waheguru :)

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.

0 comments:

Post a Comment