Wooden Style Social Media Widget For Blogger

By : Follow Trends

On : 9/01/2015

In : Blogger Tips

0 comments

In  this post im gonna explain how to add Wooden style social     sharing    buttons  for  your  blog.   This is just widget. you can  add  it to your blog easily. I just using Css  with  HTML.  Check   below demo  link. You can get social media post with similar widgets.

Demo

1. Log in to blogger account and Click drop down. 

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<style>
/* Social Icons 
----------------------------------------------- */

a.social-icons {
 margin-right: 5px; /*Adjust This Value As Needed*/
height:45px;
width:45px;
}

a.social-icons:hover {
 opacity: .7;
 filter:alpha(opacity=70); /* For IE8 and earlier */
}   height:45px;
width:45px;
</style>

<a class="social-icons" href="https://facebook.com/tiwcher"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBZeXfuKWjbP4q_thDu8r5Btp2BaRfZRJ2r6hnX7xk7RkMfQj3IuQTesjoO3trc_dhld5boDFLhb9k8Nti5fKrRpSU4lzsPN7VVnp0nT7Xi2dnMCMMtA5wDECap-d6O0HyaoKU7p6LSvo/s1600/btrix_facebook-icon.png" /></a>

<a class="social-icons" href="https://twitter.com/tiwcher"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_fTehtPDs5GDUzV5aLxY1Wsz1sgllGQMNQoY-NcYU8tF5b0bj0JUXNsmhc3w4nqyZgwlp3D0XDUh_uG5UQWIzGaH6CgCBaoqbN_Hgi6D-AWzuOnKwChYbTsvoNyV37SVoWrCDTnMiDxI/s1600/btrix_twitter-icon.png" /></a>

<a class="social-icons" href="https://digg.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeq69UiuPWnQMXonbGNTwMS719_Thyphenhyphen1-btTtt56Sgb8ypGnWzRJuDFigfzJZmWoHwbo2WsxsUraPAoWIx3lHDfQ3pdMBprFapfPrksJsTWcJOymuABoUYzszALqHxf8Rn3tYjz5zT5ATs/s1600/btrix_digg-icon.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/tiwcher"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw3VKT73BWLSHzt2WGaVt4wmKYAx_HcOkcDCz8J-b5vQYCGzcVJAafyB7pLEPgsCFEzBbfshbLy1vveDM8i4Q14kC3H9YB4x3ACaMQD_3tJ5Tnj95IcSZJAcCtY7m_8mAPp62MgIfiYQU/s1600/btrix_rss-icon.png" /></a>

<a class="social-icons" href="http://stumbleupon.com/username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHJyqqwXvNZaulafwlyqDxo-iSA9xzheiX0uLgnikYAEFZSrhGFcaUh898kruXgaNk5OC2r-M2i4GJYkdba-HCGsC3Jkjk9UeV19bVHSQOHtjfJ5tGSDMnzQ0Prjm-3p14eT4GdaUjafo/s1600/btrix_stumble-icon.png" /></a>

After paste above code
*Replace tiwcherwith your facebook username
*Replace tiwcher  with your  twitter Username
*Replace UserId with Digg
*Replace bloggertrix with feedburner username
*Replace username wit Stumbleupon username

5. Now save your HTML/Javascript'.
    You are done...