[a href="http://lh4.ggpht.com/-RoMXZUw_BCQ/Tg3j9cklX8I/AAAAAAAAEDw/4zayvvGm0lk/s1600-h/image%25255B4%25255D.png"]
[/a]
So Far we added social networking buttons below posts in different forms and today we have yet another cool design with our [a href="http://www.mybloggertricks.com/2009/09/presenting-animated-social-bookmarking.html" target="_blank"]Flapper Icons[/a] in it. These social icons are arranged in symmetrical order and size with image [a href="http://www.mybloggertricks.com/2009/09/learn-how-to-add-image-pop-up-and.html" target="_blank"]opacity effect[/a] added to each by default. The social buttons go fade on mouse hover and stick to the bottom of all your posts thus increasing the traffic to your blog. The steps of installing it are really simple.
[a name='more'][/a]How To Add Social Networking Icons In Blogger?
To add these icons below posts kindly follow these steps,
- Go To Blogger > Design > Edit HTML
- Backup your template
- Click the "Expand Widgets Template" box
- Search for this,
]]></b:skin>
and just above it paste the Opacity code below,
/*------------ MBT Image Opacity--------------*/
.Fadein img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
5. Next search for this code,
<data:post.body/>
and just below it paste the following code,
<b:if cond='data:blog.pageType == "item"'><center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;'><b>Thanks For Making This Possible! Kindly Bookmark and Share it.</b></span><br/><br/>
<a class='Fadein' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7ztFifBgOFQM2-Zxi8KdaXureGgWLbi4-iLRocnUh9u-xKx93uTTtT1Wb8Ddd3q3RhE9O6BDVI8oC-A5BeQcBYSuJ1gC3xEz5GR8qF7jKkJVCipMGR2nz_nkwYWofOb7M-wI_w_QLqBw/s400/TECHNORATI1.png ' width='64px'/></a>
<!--DIGG-->
<a class='Fadein' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguGiIg26dKP-4iKVVjkJXdilw8y-B-LH5XGOxkw-kMGo-4odFxAJ_xbBD6RJKcvR8r6Viy_H6qzLzvQBvBd2cB828kb0XErpRGP989JSnrBB3-heC5eb1fFQwk3KwcwcJcy06jPWQx0ck/s400/DIGG1.png ' width='80px'/></a>
<!--Stumble-->
<a class='Fadein' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZF2PcZ2xMWlEp7oHgNJzKREHV_6tmWVnobrUd8fXn0fV9beFl5tQtcWD2g057r5Y45RFfNDvjRzZWpuOMMZh5OGl_czyH9KmO78byN14EPzgdjNe6_1oKwmgUTzYpYJO1sXnSoUCbzSM/s400/stumble1.png' width='100px'/></a>
<!--Reddit-->
<a class='Fadein' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUtf30UmikzUn5CUpx-N9C4cR1RLUQ5isCn9HyDKUMZGYT6NdnKSXO0c8D_TxGfYVwLW97QDdM0eC70Vfca1khT4l6iuf1LZhedY6f3Q05FoGOi47jh87vvypo7NXtUW6AQ7QpGNaSwCY/s400/REDDIT1.png' width='100px'/></a>
<!--Facebook-->
<a class='Fadein' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt0n8abE6JFUFd7iCuLNHAVaCTvIOID4EIE6TQQS8W0dy_xwrwcWabQ1t9TGaEjWf5SA-H_TePe4tHuxDeN5v2mxA4aQBnpILfB71gfSHQv-EUdQrpRltdYEC9tVXywbqhOIL8RJxgXG0/s400/FACEBOOK1.png ' width='80px'/></a>
<!-- Twitter -->
<a class='Fadein' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA1bzPBrJiqoiivbNaW56blQCkXKgvM6PHfhnAUYL87_c3dHXdjWsfYMJ9v0IWFAy9JRAeWOcq5CHSO3ytYuajfgH4As0MNE4uDhthbcW-ImYpObm_MP7L8r2YUDebDXkLg_QW3xlPhjk/s400/TWITTER1.png' width='64px'/></a></center>
</b:if>
6. Save your template and you are done!
Visit your blogs to see a beautiful change. :) You may also like these social networking buttons and widgets,
- Flapper [a href="http://www.mybloggertricks.com/2009/12/add-css-based-social-bookmarking-widget.html" target="_blank"]Social Networking Widget[/a]
- [a href="http://www.mybloggertricks.com/2009/08/releasing-gorgeous-mbt-social-media.html" target="_blank"]Social Networking Icons[/a] - Triangular style
- [a href="http://www.mybloggertricks.com/2009/08/introducing-mind-blowing-circular-style.html" target="_blank"]Social Networking Icons[/a] - Circular Style
- And Finally The Oval Style [a href="http://www.mybloggertricks.com/2009/10/window-style-social-bookmarking-icons.html" target="_blank"]Social Icons[/a]
0 comments :
Post a Comment