Social media icons are one of the most popular widgets to add in your site and here’s another one.
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>
/* UmerPrince */
.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/AVvXsEi4LPyiUm_9quhTOmQCP-70I_A1GiOjitK3s6pyeWk3YjJSh0UzURIeUVTBCkFQBM_nCdVDQxTfnNC41kv5_wEuOUWtwDgZ2MceEUHYVg3O97NR8on8NhzoxvrqhY9LE674Vyrwy3hqh9c/s1600/bloggertrix-digg.png" title="Add to Digg" /></a></li>
<li><a href="http://www.facebook.com/UmerPrinceOfficial"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCHkXkLLK7stbyJYAXTQleTG5Uln_Q2oy8uRUZMSqUsno33VP07NtASGnFjiUFByUHqFrrtIoGsvEKxBHGmdyuEk9cJ_KVjMZ1uwXlNwjK1cIDnLWjuwx6mj0k-VZZMqQGflfg99u-M7w/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.stumbleupon.com/UmerPrince"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJ-y0nL6ijXtXW0xLoeuBgwdZIF7iC2hcsGScgDU3yAm4vCIlnL2HxnhWyXOaKSi5EmZIjuNr7znGTuUvxYnXxn1O-ZRVwwUTNzs58Rz3THzqUVQeSOl4VvsTagHTvMPwwpw4AwwnMr4/s1600/bloggertrix-stumbleupon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/mUmerPrince"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih3cihslkfJMLCJpuxykaKsQHcGggLQoA5acvkxshGuaDjBDyf2Jn_ALOvO5kDeNnj7xQIUb9Hq4eWX5WebrJrMu9npkPgtouWXSJd4q-uQmmZn1Wz-nl9YMKx8Xd-7Yblv7oRYwnYALk/s1600/bloggertrix-twitter_alt.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/UmerPrince"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiuYNd3QCfU12iyP4g3bUenU9_LlG0DdFfWI4r3kP1r5_Rs6_Q3VFLBBhMBp_kl4Ia4LHSJOYJvWFjG_F5fvkM45VRplNt7z9hu61zCmV3X3T8c_j2axDL76E5bJZ4nZ80eGjpm1w_trk/s1600/bloggertrix-RSS.png" title="Add RSS Feed" /></a></li>
</ul>
/* UmerPrince */
.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/AVvXsEi4LPyiUm_9quhTOmQCP-70I_A1GiOjitK3s6pyeWk3YjJSh0UzURIeUVTBCkFQBM_nCdVDQxTfnNC41kv5_wEuOUWtwDgZ2MceEUHYVg3O97NR8on8NhzoxvrqhY9LE674Vyrwy3hqh9c/s1600/bloggertrix-digg.png" title="Add to Digg" /></a></li>
<li><a href="http://www.facebook.com/UmerPrinceOfficial"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCHkXkLLK7stbyJYAXTQleTG5Uln_Q2oy8uRUZMSqUsno33VP07NtASGnFjiUFByUHqFrrtIoGsvEKxBHGmdyuEk9cJ_KVjMZ1uwXlNwjK1cIDnLWjuwx6mj0k-VZZMqQGflfg99u-M7w/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.stumbleupon.com/UmerPrince"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJ-y0nL6ijXtXW0xLoeuBgwdZIF7iC2hcsGScgDU3yAm4vCIlnL2HxnhWyXOaKSi5EmZIjuNr7znGTuUvxYnXxn1O-ZRVwwUTNzs58Rz3THzqUVQeSOl4VvsTagHTvMPwwpw4AwwnMr4/s1600/bloggertrix-stumbleupon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/mUmerPrince"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih3cihslkfJMLCJpuxykaKsQHcGggLQoA5acvkxshGuaDjBDyf2Jn_ALOvO5kDeNnj7xQIUb9Hq4eWX5WebrJrMu9npkPgtouWXSJd4q-uQmmZn1Wz-nl9YMKx8Xd-7Yblv7oRYwnYALk/s1600/bloggertrix-twitter_alt.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/UmerPrince"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiuYNd3QCfU12iyP4g3bUenU9_LlG0DdFfWI4r3kP1r5_Rs6_Q3VFLBBhMBp_kl4Ia4LHSJOYJvWFjG_F5fvkM45VRplNt7z9hu61zCmV3X3T8c_j2axDL76E5bJZ4nZ80eGjpm1w_trk/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.
(Article Via Blogger Trix)
0 comments:
Post a Comment