Social Media Subscribing Widget With Count For Blogger

Posted by محمد On Thursday, August 2, 2012 0 comments
wordpress social media subscribe 
Hi Guys! in this post i will Tell How To Add A wordpess Style Subscribtion widget with count & cool image hover effect which increases the beauty of this gadget.The main part of this widget is you can show the number of your subscribers and you can update the number of your subscribers anytime by just editing some numbers.
Social Media Widgets are the quite right and interesting way to maintain your blogs visitors interest.
  1. Go to Blogger Dashboard > Design > Edit Layout.
  2. Add a Gadget > HTML/Javascript.
  3. Paste below code.
<style>
.rss {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrWJxwv3ITXCYOK-dsbv8stq4lMPjXV1gGAe_Spp3wXUYUDah_aVxbbIiPX5O463X9KG4FByj7h7V071pLTTnMjK1_yCAOKbXy9LBz90eiZ-lQtI3tGqjdixgq_e1_IKjoPX1Ci34M6Hs/s1600/rss+sepia.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 5px;
}
.rss:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNreW1SiEOdujaKZ8kjXQN1INROqpy4QqZw74pWuIrT_k-CDHG9m17doSzb33joPkNwCg5mfLdI_SoBVe0ES7CDV4-NKV4tAfFsSMgBDDruJBNedF9Q5GHjaSooscSEfNRJnpG4kzC1tM/s1600/rss.png) no-repeat;
}
.twitter {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZGvHVc7l5VQ0k59D7RZjKoD24Ew7BV0APmzS5IGCWLg2HURidzesMBU12-p3RRmYf9MtsuqcQ5dpEsRo_ZETafmn9LIGq1Zjf7-777K3PRo7VjCgHqXisCQsTbLT1WZphhIzsi8T6JB0/s1600/twitter.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 10px;
}
.twitter:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_LLW9ctAP7gXTRyMViD444pzKNJSPnfyUh6_vyiU3PfWdczXkZGZh2WFsWZcIxNk2ajNk3Odo9mivH1BvbO7pVxkgqGg79y-1OYRwdu5dtGk2L5Jn5BKd8PSNm_3V7uEMIS42aJwGypk/s1600/twittter.png) no-repeat;
}
.facebook {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge24FXyHmm96Rl-nA62y5MGOMQ5bnSd__W0yJLzLrOs50tDoTSbXKKWtzCOeuCXrodXZ7iosdnojBTAhxI_TnBOc6fUZs-qNRKRajmYl7yKvWYpK7vhghyphsQa3jJKDiW9UpSco42g5k/s1600/fb+sepia.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 10px;
}
.facebook:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA5DgH90oudu97OvAG_4KjKrrpNMfBG7RvuQHdIOMD1pC1YWwDFJItOZvpT6MYlgfzxzS6A8aLj1pA57M4P9ASmF_X5eF9fhvTawZvntR0m8r0yVT7SUOYg18ujfTEWzOgUrpD2xc0cqo/s1600/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'>
    <div class='follower-rss'>
        <span>
            <a href='http://feeds.feedburner.com/username'>33</a>
        </span>loyal readers</div>
</div>
<div class='twitter'>
    <div class='follower-twitter'>
        <span>
            <a href='http://twitter.com/#!/username' rel="nofollow">270</a>
        </span>followers</div>
</div>
<div class='facebook'>
    <div class='follower-facebook'>
        <span>
            <a href='http://www.facebook.com/username'>63</a>
        </span>fans</div>
</div>
Replace The Links Below With Your Links And Number oF Followers
  • <a href='http://feeds.feedburner.com/username'>33</a> :
  • <a href='http://twitter.com/#!/username' rel="nofollow">270</a>
  • <a href='http://www.facebook.com/username'>63</a>
Save You Gadget And You Are Done !
Labels: ,

0 comments:

Post a Comment

Facebook Page

Followers