Create a Social Media Fans Counter Widget in Blogger
Recently we shared Flat Style Tabbed Social Media Widget for Blogger and today we're here with another amazing widget Social Media Fans Counter Widget for blogger. From the day Blogolect Blog was created we tried our best on sharing and developing blogger widgets and we'll continue these efforts. Today we're going to share a social media fans counter widget, this widget displays Facebook, Twitter and RSS buttons in a clean list style with your fans count. This is a clean and simple widget to show to subscribers on your blog and make your visitors get more interested in your blog. So let's begin
Recommended for You:
Customization:
Click Save button and you're done!
Recommended for You:
How to Create a Social Media Fans Counter Widget in Blogger
First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Add a Gadget, scroll down and select HTML/JavaScript gadget from the list of gadgets. Now Copy the following piece of code and paste it in the empty widget box<div class="sidebarContainer" id="sidebarSubscribe">
<a target="_blank" href="http://feeds.feedburner.com/blogolect" class="subscribeSidebarBox" id="subscribeRSS">
<span class="icon"></span>
<span class="title">Subscribe to Our RSS feed</span>
<span class="count">2000+</span>
</a>
<a target="_blank" href="http://www.twitter.com/blogolect" class="subscribeSidebarBox" id="followTwitter">
<span class="icon"></span>
<span class="title">Follow Blogolect on Twitter</span>
<span class="count">1000+</span>
</a>
<a target="_blank" href="http://www.facebook.com/blogolect.official" class="subscribeSidebarBox" id="likeFacebook">
<span class="icon"></span>
<span class="title">Like Us On Facebook</span>
<span class="count">800+</span>
</a> </div>
<style>
#sidebarSubscribe {
padding: 25px 30px 20px;
}
a.subscribeSidebarBox {
border: medium none;
cursor: pointer;
display: block;
height: 60px;
margin-bottom: 8px;
position: relative;
width: 265px;
}
#sidebarSubscribe span {
color: #6E6E6E;
display: block;
padding: 3px;
position: absolute;
text-shadow: 1px 1px 0 white;
}
#sidebarSubscribe .icon {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6SpYoSUYGqUXhVOtablCTneEwIQL8bSIQZGdJPKPaBfh-5kFODo8OgK5VKAT5TWFcHEoIH8hjE8lhuwi86j4QHeDYHLNdv7ILiTThUnB2cFIrVLnYQQajB-W-9IY09-r1jOFllUumizNn/s1600/blogolect.png") no-repeat scroll 0 0 transparent;
height: 45px;
left: 10px;
top: 10px;
width: 55px;
}
#sidebarSubscribe .title {
font-size: 12px;
left: 70px;
top: 8px;
}
#sidebarSubscribe .count {
font: bold 18px/28px 'Myriad Pro',Tahoma,Arialm,sans-serif;
left: 70px;
top: 23px;
}
#subscribeRSS .icon {
background-position: 0 -50px;
}
#followTwitter .icon {
background-position: -100px -50px;
}
#likeFacebook .icon {
background-position: -200px -50px;
}
a.subscribeSidebarBox {
background-color: #FAFAFA;
border-radius: 10px 10px 10px 10px;
}
a.subscribeSidebarBox:hover {
background-color: #FDFDFD;
}
a, a:active {
text-decoration: none;
}
</style>
Customization:
- Replace http://feeds.feedburner.com/blogolect with your RSS feed URL and 2000+ with your RSS Subscribers
- Replace http://www.twitter.com/blogolect with your twitter account URL and 1000+ with your Twitter Followers
- Replace http://www.facebook.com/blogolect.official with your Facebook URL and 800+ with your Facebook Likes
Click Save button and you're done!
.png "Effective Ways to Generate Massive Traffic from Facebook")
.png "Effective Ways to Generate Massive Traffic from Facebook")
.png "Boost your Blog Traffic and Authority with ViralContentBuzz")
.png "Boost your Blog Traffic and Authority with ViralContentBuzz")
.png "Boost your Blog Traffic and Authority with ViralContentBuzz")
.png "Boost your Blog Traffic and Authority with ViralContentBuzz")
.png)
.png)
