Home » Blogger Tutorials, Tricks and Hacks » Blogger Tricks / Other » Star-shaped Social Sharing Widget

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Star-shaped Social Sharing Widget

Star-shaped Social Sharing Widget

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

648 views

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="http://3.bp.blogspot.com/-SKQ1igs2LNU/UOhE6HiT1rI/AAAAAAAAGPY/ePZqZ_lQ5lc/s1600/bloggertrix_google.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/YOUR_FACEBOOK_PAGE_OR_USERNAME"><img src="http://1.bp.blogspot.com/-r0H2-cmL5dg/UOhE5_nSIQI/AAAAAAAAGPU/VHIaXRyd_XY/s1600/bloggertrix_facebook.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.stumbleupon.com/YOUR_STUMBLE_USERNAME"><img src="http://1.bp.blogspot.com/-pam6BN03QbY/UOhE7L4ISnI/AAAAAAAAGPk/UEVxDhh8wfM/s1600/bloggertrix_stumbleupon.png" title="Add to Digg" /></a></li>

<li><a href="http://www.twitter/YOUR_TWITTER_ID"><img src="http://4.bp.blogspot.com/-_Ph0s8LMOPA/UOhE7pj8mmI/AAAAAAAAGPw/xraxPNw2ERY/s1600/bloggertrix_twitter.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/YOUR_FEED_ID"><img src="http://3.bp.blogspot.com/-Su8IoWDfS1o/UOhE6YvgxnI/AAAAAAAAGPc/2eiJmeVQ8eY/s1600/bloggertrix_rss.png" title="Add RSS Feed" /></a></li>
</ul>    

NOTE: Replace all the necessary URLs with that of yours.

Liked It ? Please Share

Comments

4 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. jn27 says:

    I will be providing my analysis of the three and I have handled each one of them. Am I Depressed

  2. jn27 says:

    You will also need to consider how much energy is required to make your generate way checkpoint. How to fight depression

  3. alone17 says:

    Here is an ambitious blog and really appreciate it. Must acknowledge that you existing highly effective actions. non permanent hair color

  4. james17 says:

    Kids with Aspergers have the ability to come up with alternatives by managing everything in their provides.
    Hells Kitchen Plumber

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here