
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/AVvXsEgPRL8PTwlShDAs_Q9akbDS0P8qjBdkE2-37ZXyXm1J3H8ySHfmn9EQfk39tVJ6-P9jSeCfI5B69QVNfVCKgUVHy1jpY2S3fD5LHGh6SWy2HCk1vCgIK2GZ5LUnxzJVqWaShzWcHrXhEfw/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/AVvXsEhvRHizgnI2Ye_L7Vpxk4xf43rLv4vqtRB-uR0F2KpY_wwW96vK1Vfjo_WkXWBI81NFVIh4EWcAl80lRSMpn_xGzcJOHOFFrK3GcY_aHFi6CoiBMYigHX9d5tt663tt7sXdYRxnfN8dgeE/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/AVvXsEgp4LuJIxbakGi_z4KOj5V866SpJGlxewlSmwT1bcG_lA2XYsPw_gm1oITN9hiPsUWNB2mFKi4h9erKKAuNF5hCpZDJjS0eVffpH5PJICN1sgqB_9b8ZsJnZnNmTD_Pa31eYCpuzppvCkI/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/AVvXsEh2_1c9NcGyJ0T81EbEQ25yVy0687aWCbqcpq22HSAV8QFIXVubi7ublwdWoj9jEI0KNzfyJgGGnABqz00s5NZ6A9v_UzH4LGvSca1OM3VUoo_YZaXme-e58Cel9pO7bdGZU35Q9_ZFnKA/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/AVvXsEjI9FL0j9yhWs1ZTcQ7bs_ahVt3VqENWnxx-WOPT9K5_al3zab5zCc3-GDYWv1cfrLRJqaIgEA3YfOxZWUoQJiWWP5BhhlgyhKFKYPp2vSLK3KAI5R6odSOQYSC0rCZSPWiYE6fAU5IAm4/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).
4. Save.
Simple isn’t it? Hope you like this featured widget.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
0 comments:
Post a Comment