Add Stylish Social Icon Widgets to your Blog Or Website

Custom Social Icon Box gives extra Stylish look to your blog sidebar. Social Icons also give an opportunity to your viewers to stay connected for new posts and updates on your blog. It also helps your blog to increase traffic from social media.today every website and blog have bundle of social icons through which users from different social webs come to your Blog.

Today iam going to give bundle of stylish social icon widgets which you can easily use for your website or Blog.

Custom Social Icon Box For Blog and Website.

1. Just Copy and Paste the below code above Social Icons Widget:

<style>
#info {
border:1px groove #222222;
width:275px;
height:290px;
border-radius:5px;
}
.infof {
float:center;
padding:9px 7px;
marign:-2px 0px;
background-color:#e74c3c;
height:10px;
color:#fff;
}
.widget {
diplay:inline-block;
padding-top:10px;
padding-left:6px;
}
</style>
<div id="info">
<div class="infof">
Connect On Social Sites
<div class="widget">
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkvBnWSzButnl6wf-32GvXTCn78kd70Dw6zsgBEyCbMihoIscf4oedZop0FDDJ4SmSwamQqxnK5lb2HynRHLrzyF3Cf_tE3o1w3i-K2f0eZn9mCzNUkUktF22x_776pmqjLsF5IyyaDccS/s1600/Google+plus+square.png" width="80" height="80"/>
</a>
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlm_3z8guCQCUB0bKnEXUOmlYNgdTgO4R9OuwaSjjHBPIr6JSnf0v7szb-7eQ5IXhNqXS1DomOon_A3bI3QHF3uyhZUr3eIxxFHL1NBOALquS_wsFLcsQPelmr3xOUZ_SSswaLCh0Z27fZ/s1600/Facebook+Square.png" width="80" height="80"/></a>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcOCXZNQQPvkAaBBoKfuCL8326O_K5T61u18V7BTnPYpXR6WkfiH8KGbTcVySN3-_Yjc_r8T2haIoD978K9mhMp3-qE_1wK73NOMCdlCB3W01A7TIf8fv_9G0qNQMedp0GrxbfpNc_7i08/s1600/Linkedin+square.png" width="80" height="80"/>
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWTfLkte7s0wDWmC13ZoGO6BKlXlTMULQXqjzdjcEfzAXX0rSQ1oFheAISW7McCCjs66V1sSdO4C2Z2B4xfLNVSU40jEoNgsQL0Wwzhk-2Q-XfvyysDui3jgOf0CsBzhiul56dnBqxKRw1/s1600/Pinterest+square.png" width="80" height="80"/></a>
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHuWF5oPi6vLXjalFqqm8OeydPaRFQyvcEqD7VDUCYICZmNzPmsHiRr9mqY629N865p_Ns8o0EcavhxC8xJgUJ-aLBWMowzfMEkxjhr9wjcY0iR4mQ_NCi-4_YA7CG3NGUez36g8cf9pW/s1600/Twitter+square.png" width="80"/></a>
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_LREyPETa14l86lNG-pdmjI4jTKi_s8TNKyn3RrvsYRts6ySTK-z1ZhflmS7wPrgN4wKlJ-yZU2vDGiELXBfXP3Vnt02IxO420cDOycrj0gMZZXkVzk2GAUTxBcRebYEklg_sd8K81t4/s1600/social_media_iconssss.jpg" width="80"/></a>
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTgHxklZgmEO_XOzkpXxeLsz87nQn1vZ41rRgwgdx7bI96CYWm0Pc6cawRJmfeitDPJ4JljSy5Qxf23QGUt6YslmpBNfOgdZEKC4_l-Ml3vAvhVc5qCi69lU4LMnhBsNktI5rrbD7vEclJ/s1600/Instagram+square.png" width="80"/></a>
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOxgZeOsvik5O3is_0rI4OG9mbcKlKGK_YNceedNYbIkZYSMoHaRIokCtUzZ9Li4NIzGrv1efOhqmKjFJKspjjOjFZoyQ8scZ2Jx59rQlj02PC0xcehutINPmnwRbcBNYqvHzTtqsr2Fgs/s1600/Flickr+square.png" width="80"/></a>
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Nu2itMpD4Qx5Rnz_DmYGGmE_YIo-vfoQMHLatOw9LGUoy3xlsq7V_hmOSjljBRBcBE6CKhRSFfnSpRsAaaKsxQuD8Y9KkHDEDURkEzVsPQJUQqq2wrhxtRY5Z-s9B-1nS_RdGYafCgXk/s1600/Tumblr+Square.png" width="80"/></a>
</div>
</div>
</div>

 Replace '#' With your social sites links.
You can change width and height according to your requirement.

2. For 'Design 2' Paste the below code into your blogger sidebar.

<style>
#info {
border:1px groove #222222;
width:455px;
height:130px;
border-radius:5px;
}
.infof {
float:center;
padding:9px 7px;
marign:-2px 0px;
background-color:#e74c3c;
height:10px;
color:#fff;
}
.widget1 {
display:inline-block;
padding-top:10px;
padding-left:6px;
}
.widget1:hover {
opacity:0.4;
margin-top:10px;
}
.widget2 {
 display:inline-block;
padding-top:10px;
padding-left:6px;
}
.widget2:hover {
opacity:0.4;
margin-top:10px;
}
.widget3 {
display:inline-block;
padding-top:10px;
padding-left:6px;
}
.widget3:hover {
opacity:0.4;
margin-top:10px;
}
.widget4 {
display:inline-block;
padding-top:10px;
padding-left:6px;
}
.widget4:hover {
opacity:0.4;
margin-top:10px;
}
</style>
<div id="info">
<div class="infof">
Custom Widget Box
</div>
<div class="widget1">
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkvBnWSzButnl6wf-32GvXTCn78kd70Dw6zsgBEyCbMihoIscf4oedZop0FDDJ4SmSwamQqxnK5lb2HynRHLrzyF3Cf_tE3o1w3i-K2f0eZn9mCzNUkUktF22x_776pmqjLsF5IyyaDccS/s1600/Google+plus+square.png" width="80" height="80"/>
</a>
</div>
<div class="widget2">
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlm_3z8guCQCUB0bKnEXUOmlYNgdTgO4R9OuwaSjjHBPIr6JSnf0v7szb-7eQ5IXhNqXS1DomOon_A3bI3QHF3uyhZUr3eIxxFHL1NBOALquS_wsFLcsQPelmr3xOUZ_SSswaLCh0Z27fZ/s1600/Facebook+Square.png" width="80" height="80"/></a>
</div>
<div class="widget3">
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHuWF5oPi6vLXjalFqqm8OeydPaRFQyvcEqD7VDUCYICZmNzPmsHiRr9mqY629N865p_Ns8o0EcavhxC8xJgUJ-aLBWMowzfMEkxjhr9wjcY0iR4mQ_NCi-4_YA7CG3NGUez36g8cf9pW/s1600/Twitter+square.png" width="80"/></a>
</div>
<div class="widget3">
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTgHxklZgmEO_XOzkpXxeLsz87nQn1vZ41rRgwgdx7bI96CYWm0Pc6cawRJmfeitDPJ4JljSy5Qxf23QGUt6YslmpBNfOgdZEKC4_l-Ml3vAvhVc5qCi69lU4LMnhBsNktI5rrbD7vEclJ/s1600/Instagram+square.png" width="80"/></a>
</div>
<div class="widget4">
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOxgZeOsvik5O3is_0rI4OG9mbcKlKGK_YNceedNYbIkZYSMoHaRIokCtUzZ9Li4NIzGrv1efOhqmKjFJKspjjOjFZoyQ8scZ2Jx59rQlj02PC0xcehutINPmnwRbcBNYqvHzTtqsr2Fgs/s1600/Flickr+square.png" width="80"/></a>
</div>
</div>