Social media icons are one of the most popular widgets to add in your site and here’s another one I discovered courtesy of Bloggertrix that you may like as well. It’s use is very similar to other social media icons you see, but the difference is that it has a very nice look so I thought I’ll just have to share it anyway as you may want to change the features on your site.Bubblicons is created with CSS and HTML, a very easy to add widget that makes your site look appealing to the visitors.
The steps to add this widget to your site are very easy to follow:
1. Blogger Dashboard > Design > Page Element
2. Click on Add Gadget > HTML/Javascript
3. Copy and paste the code provided below.
<style>
/* Bloggertrix */
.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>
<br />
<center>
<br />
<ul>
<li><a href="http://www.digg.com/Username"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOZ67DUCB1hOhmUc6nvRkG21HMMmP5tEhJLILr9Ushivve22M58fCZZRnW1TT9vMhshGGxxgasRA2A0x1YruhD5LDkgqVA5woMRKi6MIUa8sbq4ODhARDvzuWZFvp1p1WPDuShCouXcs0/s1600/bloggertrix-digg.png"
title="Add to Digg" /></a></li>
<li><a href="http://www.facebook.com/bloggertrix"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIUUybosTemQmbjdmi5T27nuhsBLc6pe7frpS8rFMNROuNaitaD_I9xv8LmHVf5-ShF2gT3KTBP_na0hYi6y21ZXRTWf-gYTOoYi5C-vHcyscBXKIlWsegfBNU3sIjQ7Xik7ItmWg26K0/s1600/bloggertrix-facebook.png"
title="Add to Facebook" /></a></li>
<li><a href="http://www.stumbleupon.com/bloggertrix"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRyFl24Fg_33gaVgJ6c9INJnlmEb5T_9CeX9-1FiqXkiHbpAnVx8ijPFRCs1cgNRASKRMyGGE-w_TKARzAzjLnMcr3FTFw3ePnsjD7PxrlXRnowdY-awMBhWebw88DGukB0lonz30Ik8A/s1600/bloggertrix-stumbleupon.png"
title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/bloggertrix"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYEK5ExFmt_ILwZbOwR9MFdoV4OhEHfU29YXXf-9pb3m0h-tEePIVI2YQ1xtWIi8mHc-eJ2LgHZ_pT4wqfTU-iE9wQvx0FUy0xluKGhPvbtaCk58lFyYZVI3BwC95wOJhJxQ_xMLcFeI0/s1600/bloggertrix-twitter_alt.png"
title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/bloggertrix"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYK4bLjvFu0ln9FU6GXpwib8aq_v28QXsnrZeOtg-lSFMu5kXr52mFZ9bpkGQTE84fU45GMezZz7YYSu6ZptiGYQq_x7TIyyZUVMM_cnb2taxIu7z8WXxqcni5RcIyIN7ag-OEch-tLoU/s1600/bloggertrix-RSS.png"
title="Add RSS Feed" /></a></li>
</ul>
Note:
Change Facebook, Twitter, Digg, Feedburner, Stumbleupon usernames with your own username (highlighted areas).
Change Facebook, Twitter, Digg, Feedburner, Stumbleupon usernames with your own username (highlighted areas).
4. Save.
Simple isn’t it? Hope you like this featured widget.
