AllBlogTools.com | Blogger Templates and Tricks

Link to Blogger Templates, Tutorials, Tools | WordPress Themes | Allblogtools.com

Star-shaped Social Sharing Widget
Quinte
Siren

Posted: 10 Jan 2013 10:23 PM PST

This image has no alt text

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/AVvXsEjHKtfcYNY0jblzOLN7TltZ_7nIyPdcFSCQySpKXtbIMeqM6rT1e6ZA3L9aVYK6jFhxX4lxBeeP5toIZfLjtC8-d7aPB_0enhVVlwcpL-po9kFCRe4yiTRrsn9TS2pyUhRQzQ_Q3IRthwo/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/AVvXsEi-j9ZY0wQPhn-f7EA5h6hWcHLHcd0GMKzOGP0x6bSWUgozvDzg42yuwl5-ABHuxle9OYG3e-AZ3O1YFszqzOda7MM9zteiffCYCAay59hPnY7yHyi-xKDImzXt8q0OBaLL6KJlUCPUSoQ/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/AVvXsEjsDboGfjk-GPvOXAyyU6dqmntNhtGfZn9eDTQHylhWMLplxuR9A_P4-NBux5DeO3qivArsvFSofiCOdK6MMjRlPYDYwqxy3jPqYVwn838PNO5b4K0tvAhbRZLrdMLsROKq4WXrFV4qH3E/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/AVvXsEgmWRLkN2LCSRWE0X38AZewq0STiXl9wn_BbWJAbpY0Ll8uQQTd-yh0qAlukW1E8phwhiSRVLgxDVjUb8SmL9GhVXGPC38_Ho1hpbF2jWuVN5yTslzgQnPzZI-RHHpYQCg75jPg9XVNHWY/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/AVvXsEi8BHDLwXB0MuZPClenIXkHd-Fl3VpmDbb-MA3_HGdX2MIWkdh93VUpRPbtJfu-ts3t8mTb-ZnkEOzj8-RG3xesBILWi2p4LZkUHrwjdx9gfy-EE-5TjHZuiZXljKFBqjexKWgjIn7wOeU/s1600/bloggertrix_rss.png" title="Add RSS Feed" /></a></li>  </ul>