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 anothersocial 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 andTwitter 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/AVvXsEiwWmsK84F_62NX_KtOWVdgU-hJehNWIrG3X_qxLKvqFSJExiG4d727yReKbYWjA2h791xqkrYCN1d5MnLt7OZOd4AKphfyCe58XxJnZTARQVCRh5mq-lNUC_GfPpK4q2wLejfcgXMMprca/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/AVvXsEigSYnW-uTZcjwENUTSwhOJdF-uyJR3LwcQQm5FzJ-quZG9jfJjYw5hPyKPL5TVoVAXzfkF7bAUoThy-W3ZvoD1Lf5a5_TAPd5bPXJXzbLb2VSYcpyyEqhLb8wIRextGDH1CA-7__3zZvLQ/s64/rss.png) no-repeat;
}
.twitter-ST {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFf4aZuhYFgKtKzEOi9VUTqhi8prx2lHwkz7oV-1PeRncKaHJBdUBwx7BTCBSNsWl6a7EK3LlI_BY4W-0JBgoqzbN_OCPgqy142r3Trt2ZXHN_K8KFNvlNm14nut7j8BfgyqghNah-xeCC/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/AVvXsEgNMoq1mEdf5-DEjHGwOOHITfkGjv58b-xvGBYKjmFhzUrB-c0tQsC8y9j-e3BqwJ9aLbtRZNNPBWYc2mJdeDamFmsR1muAvDwA20Lq7DE_UL13mmTpOyi-0KTne6yNMgaAZ1hWr3_t-cwx/s64/twitter-blue.png) no-repeat;
}
.facebook-ST {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc5KSM2cO1V07_b9Ijq80hlNMAJLxFDPP-P1zzevi826sx-79RfuaopBV468dWGdYsg4VVGWwhLwPSNox4oS-UfFZl8gfxYEWqmBGk6QBe92MxdUtSyucMIA2u_duoTbztwACkaQzmGWcs/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/AVvXsEh836bt3H5evMvlvujNtqj8F7jHNJS9urVQPclm7cCkLPwu_yoZcAp7lwcfMYhnVIuq0DFSRFKilHz8X-dQI-bApKhc18TiYXuv7PKWsPZGEjxtKpVY17O-ClG09pLhASRyRfngHr5V-zwY/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/Moazzam2019'>500+</a>
</span>Readers</div>
</div>
<div class='twitter-ST'>
<div class='follower-twitter'>
<span>
<a href='http://twitter.com/Moazzamiqbal4' rel="nofollow">200+</a>
</span>Followers</div>
</div>
<div class='facebook-ST'>
<div class='follower-facebook'>
<span>
<a href='http://www.facebook.com/moazzam2019.netunlimitedgamesandsoftwares'>15k+</a>
</span>Fans</div>
</div>
- After Pasting above code replace below usernames
Moazzamiqbal4 with twitter username
moazzam2019.netunlimitedgamesandsoftwares 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.
إرسال تعليق