WordPress Style Social Subscribing Gadget With Counter For Blogger

0
Social Media widgets helps to increase popularity of blog easily and frequently in short time. So it is very important to use social subscribing button on blog. By adding attractive buttons you can easily attract visitors to join your social networks also recently i posted about another social subscribing widget with search box also which was also amazing.
Today i am going to post about the another social subscribing widget which is stylish and attractive. The concept of this widget is taken from one of social gadget of WordPress. This widget contain Rss, Facebook and Twitter Button with follow counters which makes this widget prefect as social subscribing.

 

Steps To Add This Gadget On Your Blog

  • Open Your Blogger Dashboard >> Then Layout
  • Then Click on the Add a Gadget Button
  • Then Open HTML/JavaScript box
  • Now Paste the below code in the box of gadget

 


<style> 
.rss-ST {
background: url(https://lh4.googleusercontent.com/-EnN_vKy15q8/UfqiL-bioSI/AAAAAAAADMo/Xa_KnQQKu6c/s64/rss%2520sepia.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 5px;
}
.rss-ST:hover {
background: url(https://lh6.googleusercontent.com/-FMdsTSqgKI4/UfqiMVlq46I/AAAAAAAADMk/fThQLI5xX6U/s64/rss.png) no-repeat;
}
.twitter-ST {
background: url(https://lh3.googleusercontent.com/-BuarB2ofQsI/UfqiNB78ccI/AAAAAAAADM4/S1eeVWYcc1s/s64/twitter.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 10px;
}
.twitter-ST:hover {
background: url(https://lh3.googleusercontent.com/-M4qYwUWUbmM/UfqiMm7KB4I/AAAAAAAADM0/Ff5GjOUqQAE/s64/twitter-blue.png) no-repeat;
}
.facebook-ST {
background: url(https://lh3.googleusercontent.com/-mre5URCWHWw/UfqiLzWlW0I/AAAAAAAADMY/OmZPe7pwpM4/s64/fb%2520sepia.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 10px;
}
.facebook-ST:hover {
background: url(https://lh6.googleusercontent.com/-v1l4VIWwA1U/UfqiLmbxarI/AAAAAAAADMU/8DRj2-jcT-I/s64/facebook-logo.png) no-repeat;
}
.follower-rss, .follower-twitter, .follower-facebook {
font-family: Georgia,  sans-serif, Times;
font-size: 1.5em;
font-style: italic;
color: #D3C5B1;
padding-top: 05px;
text-shadow: 1px 1px #B2A99D;
}
.follower-rss a, .follower-twitter a, .follower-facebook a {
color: #AA9C89;
}
.follower-rss span {
font-size: 2.2em;
font-weight: bold;
font-style: italic;
}
.follower-twitter span {
font-size: 1.9em;
font-weight: bold;
font-style: italic;
}
.follower-facebook span {
font-size: 1.9em;
font-weight: bold;
font-style: italic;
} 
</style> 

<div class='rss-ST'>
<div class='follower-rss'>
<span>
<a href='http://feeds.feedburner.com/Safetricks'>500+</a>
</span>Readers</div>
</div>
<div class='twitter-ST'>
<div class='follower-twitter'>
<span>
<a href='http://twitter.com/Safetricks' rel="nofollow">200+</a>
</span>Followers</div>
</div>
<div class='facebook-ST'>
<div class='follower-facebook'>
<span>
<a href='http://www.facebook.com/Safetricks'>15k+</a>
</span>Fans</div>
</div>

  • After Pasting above code replace below usernames

SafeTricks with your Feedburner id

SafeTricks with twitter username

SafeTricks  with Facebook username

  • After replacing usernames click on the Save button
  • Then Refresh your blog and see changing.

You can also do some manual changes if you want like change the follower value which show in counter or also descriptive words for button with your own.

LEAVE A REPLY

Please enter your comment!
Please enter your name here