How to add social icons widget on website or blog?

Share Now:

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.

39 comments:

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

    ReplyDelete
    Replies

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

      Delete
    2. Wow Thank you so much!

      Delete
    3. Can you creates icon Viber and line?

      Delete
    4. Sorry! Currently, it is not available.

      Delete
  2. 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

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

      Delete
  3. 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

    ReplyDelete
  4. Thank you so much! I have been looking for this!

    ReplyDelete
  5. Hey, awesome HTML, thank you.

    Do you have anything that I can copy and paste in order to get the same icon for Linked In please?

    x

    ReplyDelete
    Replies
    1. Just use fa-linkedin code inside the script to link your Linkedin profile.

      Delete
  6. Do you have a BlogLovin widget too? x

    ReplyDelete
  7. is it free to use on blogger?

    ReplyDelete
  8. Thank you so much! but what if I only have Instagram? tried to erase the facebook,pinterest..etc but the instagram icon multiplied. Thank you!!!

    ReplyDelete
  9. Please remove CSS codes of all other social icons.

    ReplyDelete
  10. inspired from you you make lovely blog if you go through my site and let me know who it is any suggestion please let me know bro

    ReplyDelete
  11. Hi, thanks four your work. Can you tell me how to add twitch to my social icons?
    Best regards

    ReplyDelete
  12. THIS WONDERFUL,PLS HOW CAN I ADD WHATAPP

    ReplyDelete
  13. where is code css please ?? just i see cod html also i wante code css thanks u

    ReplyDelete
  14. you are the fucking best!!!

    ReplyDelete
  15. 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..

    ReplyDelete
    Replies
    1. Label font style is by default. So you need to insert custom text with custom font style and remove label title. Save it and its Done.

      Delete
  16. 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

    ReplyDelete

You can write your queries or suggestion below in comment box. Please support "Online Discussion Forum".