Add stylish social widget on your blogger or website.
Hello, Friends, 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.
Script code of social icon widget to links your social site pages
<link href='/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>
How to setup this Social icon widget?
Follow these steps:
1. Just copy & paste this code to notepad.
2. go to your blogger post
3. go to layout
4. click on add a gadget
5. select HTML/Javascript
6. give some (any) title
7. paste code in content box
8. Replace all the red marked text with your own text or page name.
for the tutorial please watch my youtube video
No comments:
Post a Comment