Sunday, 8 September 2013

Star-shaped Social Sharing Widget

image


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"&gt

;<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"><i

mg 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.

0 comments:

Post a Comment

 
Top