Add Labnol Like Social Media Widget in Blogger Blog
Labnol is the biggest Indian tech blog which is growing day by day and popular by its quality content and well designed widgets. Today we come with social media subscribe widget which you might have seen on Labnol. Love this Widget. Get this amazing widget here for blogger blog.
This widget includes all kinds of social profile links i.e. RSS, Twitter, Facebook, YouTube and Google+. You can use this widget on your blog to obtaining more likes and followers on your social profiles.
Also View: How to Add Facebook Like Box in Blog
So you can see the demo of this amazing and well made widget below.
With the Live Demo, you are ready to add this widget in blogger blog. It is so sample to add this widget in blogger blog. Just follow below instructions.
- First Open Blogger > Layout > Add a Gadget in your browsers window.
- Now choose HTML/JavaScript option from it and paste the below code in it.
- Now its turn to make changes in this widget. Customize the links of your profiles which i have colored red.
- Now click on Save button to save your widget.
- To see live this widget, refresh your blog.
<style>
.labnolSocial span {
float: left;
display: inline;
margin-right: 8px;
}
.labnolSocial span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuSZ6q9-LbJdDO8oAnyloislr0qHbZyjLEltghY0rHd2STsI7AZESUGtwLuTzizzu-XpeyoSq68bcGmYo5TNhxw8tCnq_siNCLHB_SWn_jZBXar6QvAfYtYBCSv0uDlLOL95DwQQJlxwQ/s1600/PcGats.blogspot.com.png") 0 0 no-repeat;
-xwebkit-opacity: .7;
-xmoz-opacity: .7;
xopacity: .7;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#iconRSS {
background-position: 0 -33px;
}
#iconTwitter {
background-position: -33px -33px;
}
#iconFacebook {
background-position: -66px -33px;
}
#iconYouTube {
background-position: -99px -33px;
}
#iconGooglePlus {
background-position: -132px -33px;
}
#iconRSS:hover {
background-position: 0 0;
}
#iconTwitter:hover {
background-position: -33px 0;
}
#iconFacebook:hover {
background-position: -66px 0;
}
#iconYouTube:hover {
background-position: -99px 0;
}
#iconGooglePlus:hover {
background-position: -132px 0;
}
</style>
<div class="labnolSocial">
<span><a title="RSS Feed" href="http://feeds.feedburner.com/PCGats" target="_blank" id="iconRSS">RSS</a></span>
<span><a title="Follow on Twitter" href="http://twitter.com/PCGats" target="_blank" id="iconTwitter">Twitter</a></span>
<span><a title="Facebook Page" href="
<span><a title="YouTube Channel" href="http://www.youtube.com/user/PcGats1" target="_blank" id="iconYouTube">YouTube</a></span>
<span><a title="Google Plus" href="https://plus.google.com/108350045713982971707
https://www.facebook.com/pages/PC-Gats/490069067770771
" target="_blank" id="iconGooglePlus">Google+</a></span></div>
" target="_blank" id="iconFacebook">Facebook</a></span>
Dont Miss: How to Add a Channel Branding Watermark in YouTube
I hope you really enjoyed this widget. If you have any kind of problem ask in comments. Do Share it with your friends.Subscribe to our YouTube channel By PC Gats!!!!!