Create a Social Media Fans Counter Widget in Blogger

<div class="sidebarContainer" id="sidebarSubscribe">
<a target="_blank" href="http://feeds.feedburner.com/xxxxxxxxxxxxxx" class="subscri
beSidebarBox" 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/xxxxxxxxxxxxxx" class="subscribeSid
ebarBox" 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/xxxxxxxxxxxxxx" class="su
bscribeSidebarBox" 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("http://4.bp.blogspot.com/-nJyhKwJmZzk/VOiMC_4rKDI/AAAAAAAA
G1w/u3P9aicP4LI/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>





above code paste in html widget in layout page  but replace xxxxxxx code in your own code

No comments:

Post a Comment

hey hey thanks