Add Black Gloss Social Sharing Buttons To Your Blogger Blog

After a long time I'm sharing social sharing widget for bloggers. This is different from other social sharing widgets which I have shared on BD. Today, In this tutorial I'm going to tell how to add Black Gloss style social sharing widget with beautiful hover effect. This widget made with the combination of simple CSS and HTML.

Follow the simple given steps and add this widget to your blog. If you want to Check demo then click on below link:

Live Demo
You May Like To Read:

1. How To Add Beautiful CSS3 Buttons To Blogger Blog
2. Add Angry Birds Social Sharing Widget To Blogger/WordPress
3. How To Add Slide Out Floating Sharing Buttons For Blogger Blog
4. 3D Social Buttons With Rotate Spin Effect For Wordpress And Blogger
5. How To Add Spraying Animated Subscription Buttons On Blogger Blog

How To Add Black Gloss 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 Black Gloss 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 Black Gloss Social Sharing Widget

<style>
/* BlogsDaddy  */
.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/u/0/117100549673033253859" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4X7rCg9oK-gAFVQ9dc7QSXkxyJ8TGMDB0yI-ElthYhTQDScnBC6YtaeSENiDw7tWWXZprz_8qK81sQYGYrmmJM-mFuaji0iS2ESQv5F5FDTIMwq6Ik9-LJbBFaxgV3vWJrftD-z9q6Xo/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/BlogsDaddy" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdvSkcdAkHcEIPYeZraS8Ag3G_OiLY9Z5t0PwLbqxHT0YVrf5BtHfy9xbVdqewW_GVdrJszDojdK2crEqsDZmN_0IAj5y4tmrMu1u95yr-EI7-zCdJOkefO5WJUqffeQztuZs4QTT8AIs/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.digg.com/Username" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRmZKXPPnj8RDaNPCib0QEETVGCHkoNEOnZBAyp-3gGb9FBzvDesRw_6xEnkRh-Fzm2c6XFXTcqBUZ8bpb4YHBceU_C17-e2xZR07Cioal9YGAFcg_LlBz50sSTvc22q6QF0MG7RTAVOA/s1600/bloggertrix-digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/BlogsDaddy" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm2dJfv_c1tMJz95kKxxp5pNM_yMe_O0kgNoqjnr1YUb_qjOjwkINiJMICMMCheVOY3EGlLzc9GiwJYKnh_zrxwVViCJB3Mzp8UvHO5jMk70Sae1IAN5pqgHQNzQPnNeIEh6uILv7eqQQ/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/BlogsDaddy" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNCrFpyJ8YqYsCrzJxUY-aqaYLUA2aKO6956vjNCRGPLm7EdiIFtM5PJkiyYhSbSXcQTVHqO0DtuPjU5gBTSlCa7HamLf2z9byiBvscLd7Cnn-i4eX-atHB-Nq-cDnwLaDa3eOQGSWk2w/s1600/bloggertrix-rss-icon.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

I hope you like this tutorial, it is very easy process. If you need our help then ask me via comments any time. Stay Blessed!

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.