How to add social icons widget on website or blog?


Add stylish social icons widget on your 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.

Know here: Responsive Recent Post Widget on Blogger/Blogspot

Add stylish social icons widget on your website or blog, Add stylish social icons widget on your website or blog. Blogspot social icon widget. Wordpress social share icon widget. Free website widgets.

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>
Also read: Add Social Profile Widget for Blogger

How to setup this social icon widget?

Follow these steps:
1. Replace all the yellow marked text with your own text or page name.
2. The paste this code anywhere you want to show this widget.

If any problem occur. Please comment below in comment box. That problem will be fixed.

This post have 6 comments

avatar
YiYaKy delete Friday, May 12, 2017

Wow very handy! Thanks.
It will be great if you can teach me how to add instagram icons too!

Reply
avatar
Vishal Jaiswal delete Friday, May 12, 2017


Instagram icon tab is now added in this social icon widget.
You can check now.

Reply
avatar
YiYaKy delete Friday, May 12, 2017

Wow Thank you so much!

Reply
avatar
Lubelya Villanueva delete Tuesday, May 16, 2017

Hi, thank you for this, but home instead of the share to facebook page, my own facebook page appears? I checked using my mom's phone but when i clink on the icon, my own facebook page appears

Reply
avatar
Vishal Jaiswal delete Tuesday, May 16, 2017

Please put your Facebook page link properly..Please tell me your blog URL...I want to check. Exactly what problem are you facing?

Reply

Please note before commenting on this page.
1. Don't comment as for advertisement purpose.
2. Don't hyperlink your website inside comment box.
3. Abuses are strictly prohibited.
4. If necessary, you can post the only URL without any text hyperlink.
EmoticonEmoticon

Next article Next Post
Previous article Previous Post