How To Add Social Networking Icons In Blogger?

Add Social Networking Buttons Below Blogger Posts

So Far we added social networking buttons below posts in different forms and today we have yet another cool design with our Flapper Icons in it. These social icons are arranged in symmetrical order and size with image opacity effect 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.

How To Add Social Networking Icons In Blogger?

To add these icons below posts kindly follow these steps,

1 #  Go To Blogger > Design > Edit HTML

2 # Backup your template

3 # Click the "Expand Widgets Template" box

4 # 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 == &quot;item&quot;'>

<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='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq0OqkaoXJd7NpVWmSy8WhXcZ_s-4ATuYx12iHrI3s_hbwAQvRfT0pjPlLPuLBbnRRFxBCGLwaWIQqxi_aWJblYFQiQUrl8DTpG0HgScam5BrZQJH4akbhT4IJhyphenhyphen_nP9kF406SRdtfoLY/s400/TECHNORATI1.png ' width='64px'/></a> 

<!--DIGG--> 

<a class='Fadein' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIhjySZHw-ppKkB1DP9Jip8hKYjWtVEAGCfTChInTbygcUVX4vQOV7W5GAZELhxuJdnoD4xdzAJErYKrgnxuxKJereku57NXHByY-WWORxYKYILtG8q4qc_uXhs5Sq_wZazz2XtbvWycs/s400/DIGG1.png ' width='80px'/></a> 

<!--Stumble--> 

<a class='Fadein' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC9884-ANB0OMHe_FAvorNLUtmiNZoBUNxay1V0CR54HxUtQntqEa2nArZYUILye9wrHuhpgPI4FgVd0C186F3pbTS7WQoVnpsldgkDPBYq46ig8yqaNgiwyGMt3esWFL_tVI60fLb7hU/s400/stumble1.png' width='100px'/></a> 

<!--Reddit--> 

<a class='Fadein' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6p5tKrozoSg8YKzMI_OksLwTcbqMpuuHdA5qz6QEo4GdRgq61G5KMenFjac0DMxiu3LywNO7evJGIyGHt2G235U6cRj4h23R36mLB7d72nQIqfpn3vSU5nyumpd9YxNfHvlV1GCKPdyA/s400/REDDIT1.png' width='100px'/></a> 

<!--Facebook--> 

<a class='Fadein' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCjTc8OKcGR0vSUR3TYaYk2vLbJ5dQmIOaP0zODuv9lf0hQL_6ol-B8QAT2QA9DtzaBjx-7t_AAAaRWqifcC35X7PqAIivowk7-dyLvln8F0vYFx2qzb_ZQ7ocF-mkuYtfxkuA9qdWUkQ/s400/FACEBOOK1.png ' width='80px'/></a> 

<!-- Twitter --> 

<a class='Fadein' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz95-Cg4nYQGZhQmOpS_JvGF9iu82Dl0jcOru4rtE7SJsMpRy7Xthnr7ol-RMrUeQlGJPCA5pSdlJjkIO_xouS2QjfKHq_7ayRadAbY40RhBSSLt8dp6BCtSspUbJ_fsd8kzjruott3U0/s400/TWITTER1.png' width='64px'/></a></center>

</b:if>

6 #  Save your template and you are done!

And now  visit your blogs to see a beautiful change. :) You may also like these social networking buttons and widgets,

if you got this tips usefull please leave your comments here

If you find this article useful, please feel free to link to this page from your website or blog.

URL:

HTML Link:

Forum Link:

Widget by BloggerTipAndTrick