10 Dec 2016

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.

You should also read this.

How to add social icons widget on website or blog?
4/ 5
Oleh

Subscribe via email

Share the post above? Please subscribe to the latest information updates directly via email.

18 comments

Tulis comments
avatar
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
Friday, May 12, 2017


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

Reply
avatar
Saturday, May 13, 2017

Wow Thank you so much!

Reply
avatar
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
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
avatar
Friday, July 21, 2017

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

Reply
avatar
Tuesday, July 25, 2017

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

Reply
avatar
Wednesday, September 20, 2017

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

Reply
avatar
Tuesday, September 26, 2017

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

Reply
avatar
Tuesday, September 26, 2017

Do you have a BlogLovin widget too? x

Reply
avatar
Tuesday, September 26, 2017

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

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.