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>

 

You can add extra 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>

For Twitch:

<li class=”twitch”>
<a href=”https://www.twitch.tv/mypage” target=”_blank” title=”Follow us on twitch” rel=”dofollow noopener noreferrer nofollow”>
<i class=”fa fa-twitch”></i>
</a></li>

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.

Some other social icons widget style for your website or blog.

If any problem occur. Please comment below in comment box. That problem will be fixed.
How to add social icons widget on website or blog?
4 (80%) 2 vote[s]

46 COMMENTS

  1. 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

  2. thank you so much!!!! I have been looking all over the internet on how to add social icons you have made it so easy and explained so simply

  3. thanks bro.. you hepled me I was trying from last week but i did't successed.
    can u also me help me in header(font stlye) which are showing in pc is not showing in mobile browser..

  4. Hi Bro i have done all the required things Which you have mentioned above But In mY friends mobile when i clicked the facebook and all icons It does not take to my page it is just showing a Blank page

Comments are closed.