Add Social Bookmarking Widget with Magnification Effect

Add Social Bookmarking Widget with Magnification Effect | https://tipsandtricksfor.blogspot.com/2011/05/add-social-bookmarking-widget-with_07.html

Did you still remember that I've posted about Add Flapper Social Bookmarking Widget. The Social Bookmarking icons look very nice with flapper effect. Do you like the flapper effect? Now, we will  add social bookmarking widget with magnification effect on blog. I think it also has nice effect. Try the DEMO. Interested? OK, if you want to create for your blog, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the "Expand Widget Templates" box
4. Copy the code below, and paste above ]]></b:skin>

.bubblewrap{

list-style-type:none;

margin:0;

padding:0;

}



.bubblewrap li{

display:inline;

width: 65px;

height:60px;

}



.bubblewrap li img{

width: 55px;

height: 60px;

border:0;

margin-right: 12px;

-webkit-transition:-webkit-transform 0.1s ease-in;

-o-transition:-o-transform 0.1s ease-in;

}



.bubblewrap li img:hover{

-moz-transform:scale(1.8);

-webkit-transform:scale(1.8);

-o-transform:scale(1.8);

}

5. Then copy the code below, and paste under <data:post.body/> (If you're using "Read more" there are 2 <data:post.body/>, so choose the second)

<ul class="bubblewrap">
<li><a rel="nofollow" href="http://tipsandtricksfor.blogspot.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/StumbleUpon-icon.png" /></a></li>
<li><a rel="nofollow" href="http://tipsandtricksfor.blogspot.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a rel="nofollow" href="http://tipsandtricksfor.blogspot.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Digg-icon.png" title="Add to Digg" /></a></li>
<li><a rel="nofollow" href="http://tipsandtricksfor.blogspot.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Twitter-icon.png" title="Add to Twitter" /></a></li>
</ul>

=> Customize first the links
6. Then, click SAVE TEMPLATE

Loading Related Posts