Social media has always been a great source for getting an extra stream of visitors for bloggers.and visitor will subscribe you if your subscription option will look good.There are several social icon i gave you but this is different from other this are hand drawn with hover effect so lets make it-
Installing
- Go to Blogger > Design > Add a Gadget and select "HTML/Java Script"
- Copy below code and paste it in html/javascript.
<style class="text/css">
table
{
border-bottom: 0px solid #E6E6E6;
float: center;
width: 260px;
margin:10px 0 0 3px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/lordhtml" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfDq2JNjxc0qIipKIjouTCDaJKyM7CBOE4vmU4mWRXpQDalvv6mg0zkgRtomkz47SeVvxvuY8UIjAH4Teuap3Hr3ACM3TUnOqHeWLNXN7vZFfeBHk5nnGB-_nKkgeyA-GafNAltOn1lNw2/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/technologyblg" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisrStMR1vAHN-BcBoUK_A26aFUCejKTapTcxpfPsATDMxsTdAcpiWrcBSQ6HeO2mV37RhGPnYYsIRrt1ZgIE49gMecwjcjzC-AJrXp_XhGcDMbCfIEtPbGSUmyeRqu2hsk8Jg706W_kZp4/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/lordhtml" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-chF324h9oEPduGmt35n9w7k-JaUQr0kU5qk2LcO8FX71cmhmKXL_CPt94jh3_zCPh6zCpM9cUrI0ZTywcJ0ka_jdmoDlojrIFHJVHZJAQdPrMYpDqWotjDhoEoqj56xWggFhgTTWWER/s1600/rss-48.png" /></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/113143762085765715608" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg339cbSD9Ok-RS4g6-cLPDm8cL7ViUsBmP-rS7rR3tdv3xgN9ZrVDWLl1Wfdfr6-WiAD2wkPg3g2loARKeL0RtatJup3abFGXM4GfRynnZd7CVq87Qfo0TdRa1_T4PjHQ8GX4KsuY6N08w/s1600/google-48.png" /></a></td>
</tr></table>
</div>
Customization
You need to replace all the links which I highleted in code.If you want you can customize the width of the widget by simply replacing width: 260px with your own value.
If you don't want the border between each icon to appear, simple replace border-right: 1px with border-right: 0px
0 comments:
Post a Comment