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.

23 comments

avatar

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

avatar


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

avatar

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

avatar

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

avatar

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

avatar

Thank you so much! I have been looking for this!

avatar

yes! you can use this.......its legal...

avatar

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

avatar

Do you have a BlogLovin widget too? x

avatar

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

avatar

is it free to use on blogger?

avatar

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!!!

avatar

Please remove CSS codes of all other social icons.

avatar

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

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