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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV1ECLV0GUpLjFownx3sWRBWADmDPsvd7wke-PvGonQMbbrCQ5i2EgkFicI3yz5-XA5tW7yUCcp10vYFx05QlCRirOgCmHA-bctEU6tdI5W15pYsxQc9bVAX9h6DMRk-QR0-E1PozmDQE8/s64/rss%2520sepia.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 5px;
}
.rss-ST:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimMJUX93Ul_evzjOawjaWAvDcZyLB_ewB3MT39a272Rb4huaBsrQBzrR5IAi50kchiSUjh6i3X_seDNEaLME2BRB0vT2pixNWthL0kSOjksRebz3EI5cBKDp2tJ-7EW1f0UeFyIo-2794L/s64/rss.png) no-repeat;
}
.twitter-ST {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaZKAmKxegMN9XDzP-r_L9HtYTOG_KaMZ2CFLndJBxlXrGpoognFY-SICGXkUyPWjq6TmwC4u-oqcQOrlgioO9S_C0vF-Mt4bhtUGTKDhrzM7qINIdl2Etpb7q6wMRqkL9KTH2JzXZYLjg/s64/twitter.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 10px;
}
.twitter-ST:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb9i2Hpl0GGQOi-2FZem_BCCUFOv5yruWVAEvOKVu3tibzE96KtsC-6sQd_aws6SJVdsqsY-cqCVKugnI0f98gkq4YYUwORD27sVX9fDH5aIbuQc-sg7v4YGOmm3mIscUxQWA4H_bNYr1_/s64/twitter-blue.png) no-repeat;
}
.facebook-ST {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEseFB1YSoWbmkvriU_g2-4OEL7q99xoO2mbMSAzYS4Ei4w8Kq2JJlUR9Zm_roiXtRXo_OsUQ3b9pVagUxm_ntapS5B5Z6vnIWuhnGVkACT9CHIBy25_sQhy4lK7kx5awOsS92FMGceZvy/s64/fb%2520sepia.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 10px;
}
.facebook-ST:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO_khCzQntDoQ2i5oebBaN_16BE9MKmPs3yg-X2zaXODKq1p5U6jeAW4FTBxDJnF2wozcOySw1SBn7jq5IbuHQ9te2PEy8mRR-ZQymodfOoL3NqqDBFioq2dg1j_UEqhjoyFChF2g81z5s/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 twitter username
SafeTricks with Facebook username
- After replacing usernames click on the Save button
- Then Refresh your blog and see changing.
0 Comments