How to add social icons widget on website or blog?

Hello, bloggers and web developers !!!!!!!!
Here, I am going to share a cool social icon widget for your website and blog. This widget is responsive and cool in look. Pure CSS social icon widget for your website's footer and header. So, hope you will like it.

Script code of social icon widget to links your social site pages

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

<style>

.gvusion-socials-icons{margin:0 0 20px 0}

.gvusion-socials-icons ul{margin:0;padding:0;list-style:none;margin-bottom:-5px;margin-right:-5px;overflow:hidden}

.gvusion-socials-icons ul li:before{display:none}

.gvusion-socials-icons ul li{margin:0;padding:0;list-style:none;float:left;width:45px;height:45px;line-height:45px;text-align:center;background:#00baff;font-size:21px;margin-right:5px;margin-bottom:5px;opacity:.9;border-radius:3px;}

.gvusion-socials-icons ul li:hover{opacity:1;}

.secondary-sidebar .gvusion-socials-icons ul li{width:36px;height:36px}

.secondary-sidebar .gvusion-socials-icons ul li a{line-height:45px}

.secondary-sidebar .gvusion-socials-icons ul li a i{font-size:20px}

.gvusion-socials-icons ul li a{line-height:45px;display:block;color:#fff}

.gvusion-socials-icons ul li a:hover{color:#fff}

.gvusion-socials-icons ul li.home{background:#83868a}

.gvusion-socials-icons ul li.facebook{background:#516ca4}

.gvusion-socials-icons ul li.googleplus{background:#f20000}

.gvusion-socials-icons ul li.rss{background:#f29400}

.gvusion-socials-icons ul li.youtube{background:#f20000}

.gvusion-socials-icons ul li.dribbble{background:#dc71a6}

.gvusion-socials-icons ul li.deviantart{background:#4c5e51}

.gvusion-socials-icons ul li.pinterest{background:#f20000}

.gvusion-socials-icons ul li.instgram{background:#406f94}

.gvusion-socials-icons ul li.tumblr{background:#395875}

.gvusion-socials-icons ul li.linkedin{background:#1985bc}

.gvusion-socials-icons ul li.soundcloud{background:#f60}

</style>

<div class="gvusion-socials-icons mom-socials-widget">

<ul>

<li class="facebook"><a href="http://www.facebook.com/mypage" rel="dofollow" target="_blank" title="Follow us on Facebook"><i class="fa fa-facebook"></i></a></li>

<li class="twitter"><a href="http://www.twitter.com/mypage" rel="dofollow" target="_blank" title="Follow us on Twitter"><i class="fa fa-twitter"></i></a></li>

<li class="googleplus"><a href="https://plus.google.com/mypage" rel="dofollow" target="_blank" title="Follow us on Google+"><i class="fa fa-google-plus"></i></a></li>

<li class="instagram"><a href="https://www.instagram.com/mypage" rel="dofollow" target="_blank" title="Follow us on instagram"><i class="fa fa-instagram "></i></a></li>

<li class="youtube"><a href="https://www.youtube.com/channel/mypage" rel="dofollow" target="_blank" title="Follow us on Youtube"><i class="fa fa-youtube "></i></a></li>

<li class="pinterest"><a href="https://www.pinterest.com/mypage" rel="dofollow" target="_blank" title="Follow us on Pinterest"><i class="fa fa-pinterest "></i></a></li>

</ul>

</div>

You can extra following social icons according to your need:

For Reddit:

 <li class="reddit"><a href="https://www.reddit.com/mypage" rel="dofollow" target="_blank" title="Follow us on reddit"><i class="fa fa-reddit "></i></a></li> </ul> </div> 

For Linkedin:

 <li class="linkedin"><a href="https://www.linkedin.com/mypage" rel="dofollow" target="_blank" title="Follow us on linkedin"><i class="fa fa-linkedin "></i></a></li> </ul> </div>

For Tumblr:

 <li class="tumblr"><a href="https://www.tumblr.com/mypage" rel="dofollow" target="_blank" title="Follow us on tumblr"><i class="fa fa-tumblr "></i></a></li> </ul> </div>