Wooden Style Social Media Widget For Blogger

Hi friends, today, I'm gonna show you how to add a classic wooden style social media widget in blogger. This looks pretty in the blogs having a classic template and it works with any template, so you are not bound to use it with classic templates only, you can use it in any template. The social icons will show a lighting effect on mouse hover. So, let's start.

Follow the steps below:

• Login to your blogger account.
• Navigate to Layout > Add A New Widget > Add HTML/Javascript Widget.
• Now, copy and paste this code in the content box:

<style>
/* ---Wooden Styled Social Icons By www.pctricksguru.com--- */
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/xxxxxxxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixGGcZ9zzP1U8wyzM1oXUyxNFkqCLZVvjUawfim07aYw6R6rk0jUb4c_lbV_rCAQUhKAYM4cV4Au7wAtfbdp67pJwFmYs6_iJ_IOOezDA99zKDiXSF6HgeK_RyVe4wdvoM8ubhcU8tGcI/s1600/pctricksguru_facebook-icon.png" /></a>
<a class="social-icons" href="https://twitter.com/xxxxxxxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw5xXhlPyEfMilmIGJQsCQ7j5erwb_BIm5ddYvenlLueJaGQGRERqvxuYlJXpqOKCj-3FHo_NiLxFk_auPAjToTYVPwuBlkE7naWuxFMU_5iogDhDRqCvFa4NMTcJ1xx0VomtWuxuASA4/s1600/pctricksguru_twitter-icon.png" /></a>
<a class="social-icons" href="https://digg.com/xxxxxxxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Mala7KBUzQeECUHolIJzU_bkELDJ_z9XrCsvcRPdj_6NWwtYDOU3wRES7xI3yY8lGqOgFTB81GJWDC-kBhz3DvgsTDEjwKAjJ-R90vSqFjCgMTWEO9hDY2PETB7-qerEatyO7jEQLy8/s1600/pctricksguru_digg-icon.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/xxxxxxxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_cRtC4uYaJONIrLbdSxHta60-rtEwTxv0xqgAGlA4_Nzh8-QjFlluhR9ZlnlndYTKcWuCUcAEPL3F14qWGbRjV6MnZ2xwR8v7Utt5_eDAaxw70dFFIHyFS2slOgNNPjzPzDzr2mqft4U/s1600/pctricksguru_rss-icon.png" /></a>
<a class="social-icons" href="http://stumbleupon.com/xxxxxxxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZULVPcFRjvJC4XAhDV7d2YMeSeb_DfWWJZJUMIsimFFkPD-RDlomoQT95dYGgRAjKdfsvSmkn_7-nyh70_KciuwUzvft1ghXRWfZlh96top0kOLecGiHC-hNbadpz3UquIq4fkTYFF8/s1600/pctricksguru_stumble-icon.png" /></a>

• Now save your gadget and view your blog.

Note: Replace the red text with your social media profile urls.

CHECK DEMO HERE