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,- 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--------------*/5. Next search for this code,
.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;
}
<data:post.body/>and just below it paste the following code,
6. Save your template and you are done!
<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/AVvXsEiEe-PuHJkPpFQKBsX27H5QrrghoaRadfSonfOelhFySvEoVUWs93xsRX43nY1KzcMe_ICtRFu7RM85QKKH_z5gOJJb7SNrEirs7-Admfuw7Zn-gKvubt7VchENSIGalFq7jfRQm6_0TP8/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/AVvXsEi9TqZDNvvRFHXG9zSOKmQVuqVq8TvC1J3V8Fw4hyxepFbGV-SRPldzk6CDszYtPnOh0SBBbl7txwKusTj129cVy58AF0sLj0_w4LcRAJPdcAXHceF-Wd6paLd6IS1d7ShHpiC05xhfq0k/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/AVvXsEigj0VYC40Lw_SCE9S6sGyU8LSIRSkKDWxH0RrR_UNB6ijE-r70Bos6tox_Os3BRrIc8XBjDAIpztWBTCZ7_dn6BIDMC8LW4WajtMtJ1SlUFYxkNzj6mj68qlKT4E0r8zcC7_xuyUJ0AFk/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/AVvXsEhF5C_IpgAKRtb8OUBRvdO9x9hJdQw_detNvG3HWqkWsP1OYouew3Dpm2f1UjGphEATUMqXnw62qHd4gC7KBM4I13Hp1fb8yF7XpVjEMmTRw56oi7ddARzn0F3ao4bA1HCtqZrco2KrpLc/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/AVvXsEiRWdIfEN8mNpTqjQUm1MpiR1RIkeOLrqtmRnlOpJpPrN4ncVXeK86EZwjTK2z8sIwiufwsZccif7vwIPkbGwxJdvmu8k7HMTcwJ4ElwFVbvnGHPbgSHVJ-xCUh0E_Mj1r1-s2_fTnW4B0/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/AVvXsEifjWCcPzY-OYqBbruEjSqyI-HwMsI_ij4tVD1F1Vs83Pj37waJu6TOtskOZibntLXCGUXk4RYiLFxrMCePiYgcuzsBPFocUCcO5QXTjKnTrJTYUiqUbuPLwafDHoahbztfnBp65ewelZ4/s400/TWITTER1.png' width='64px'/></a></center>
</b:if>
Visit your blogs to see a beautiful change. :) You may also like these social networking buttons and widgets,
- Flapper Social Networking Widget
- Social Networking Icons - Triangular style
- Social Networking Icons - Circular Style
- And Finally The Oval Style Social Icons