Add Social Bookmarking Widget with Magnification Effect
Did you still remember that I've posted about Add Flapper Social Bookmarking Widget . The Social Bookmarking icons look very nice with ...
https://iskablogs.blogspot.com/2011/05/add-social-bookmarking-widget-with.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>
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)
6. Then, click SAVE TEMPLATE
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);
}
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<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>
6. Then, click SAVE TEMPLATE