Here’s another new and refreshing icon design for your social sharing widget from BloggerTrix that some of you might enjoy having incorporated in to your blog site: icons that are shaped into cute chubby stars! Hover your mouse over them and they’ll pop up doubling in size.
You can take a look at the demo.
Here are the steps on how to put them in your blog:
- Head over to the Template section in Blogger dashboard.
- Click on the Edit HTML button and then Proceed.
- Search for ]]></bskin> in your template’s HTML code by pressing Ctrl+F.
- Copy and paste the following code below just before or right above it:
/* 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);
}
- Save your template and then back over to your Blogger dashboard, go to the Layout section.
- Click on the Add a Gadget link/button where you’d like to place the star-shaped social sharing widget.
- Select HTML/JavaScript on the gadget list and then copy and paste the code below:
<br />
<ul>
<li><a href="http://www.plus.google.com/YOUR_GOOGLE_PLUS_ID"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ALYEIwk1qa_jVgPaCwgrq9d82S5z2i6aBRpxkRCRet57alDDV_285CkxS4XHB9WDAuPub_y-j309qFD4hPLiWWTDv7wALJcXl4jf0tAS8lcFQU3enJaah0kold8kOPnxOKgxczN_Yw4/s1600/bloggertrix_google.png"
title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/YOUR_FACEBOOK_PAGE_OR_USERNAME"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAzeLmpeoxanuCxqYkmSp8BWhh9na9cLFISk-aOAz4FLzOssjuqBhDgjA2mjZYzOo_0FG368kQ_AF9LXQnqljLjmUSjIU0qAIKQgHdJ-rOcLwn8nk49Q_HFWlea-tcuZgiI9IaGHBjZfM/s1600/bloggertrix_facebook.png"
title="Add to Facebook" /></a></li>
<li><a href="http://www.stumbleupon.com/YOUR_STUMBLE_USERNAME"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnBPm4MR6XvH6jYNh3Yc_OjxFhh8q6LPZfSv6MKrM_k9UE0BoaQ_T5oFmkk3XJ8SFTyR1WE9HeqP9BhXUoYbjB-UJ4W3LJTDYA1J28seRCYc7MmBujkPS5_J67AP_HweIZ8qz2gIUzbhY/s1600/bloggertrix_stumbleupon.png"
title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/YOUR_TWITTER_ID"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha2nSLurdBFuusrRWWWnwQth-lq4IL-9b6u9s42y-dKkH6-_gAOZQLyhF10OsQO0sjuKWbhS0MCgumjdBg9N-bFYRzu0MXxukF9jV7P9WTMpitxdaLjhic_S3GiFZDB1v2CBPVOEDzYhA/s1600/bloggertrix_twitter.png"
title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/YOUR_FEED_ID"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIYaHTafHTWGX6Ogqv7uEx4bLQ3tlZ-1EAPTT8IAC8W0YaCflNlSwf6AmJaK2GW-QrwNn6uhNSnxQWZCYQBswAuOAySm0E5egcMm2gac3nncIYhk8UA32eUWJsZTsQVRhorpciXzQxZ74/s1600/bloggertrix_rss.png"
title="Add RSS Feed" /></a></li>
</ul>
