+10 344 123 64 77
Home / Beautiful Social Subscribe Widget for Blogger

Tuesday, February 19, 2013

Beautiful Social Subscribe Widget for Blogger

Hey Guys, I'm back with another Awesome Social Subscribe widget for Blogger blogs. This widget contains multiple subscribe options including some social buttons and Email subscribe form.

beautiful social subscribe widget blogger

Features

  • Social Buttons : Facebook, Twitter, Google+, Pinterest, RSS
  • Email Subscription Form
  • Facebook Like, Twitter Follow, +1 Button
  • Professional Look
  • Attractive
  • Fast Loading

How to Install this widget

Installation is very simple, Anybody can do it without any problems. Just follow the steps given below.

  • Log in to your Blogger Account
  • Go to Layout > Click on 'Add a Gadget' 
  • Choose HTML/Javascript
  • Copy the following code and paste it inside HTML/Javascript widget
     <style>
    #socialwidget {
    border: 1px solid #ebebeb;
    width: 300px;
    }
    .TZ-social{
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #ebebeb;
    }
    .TZ-social img:hover{opacity:0.8}
    .googleplus {
    background: #ffffff;
    border-top: 1px solid white;
    border-bottom: 1px solid #ebebeb;
    font-size: 12px;
    color: #000;
    padding: 9px 11px;
    ine-height: 1px;
    font-family: Verdana, Geneva, sans-serif;
    }
    .googleplus span {
    color: #000;
    font-size: 11px;
    position: absolute;
    margin: 9px 70px;
    width: 310px;
    }
    .g-plusone {
    float: left;
    }
    .twitter {
    background: #ffffff;
    border-bottom: 1px solid #ebebeb;
    padding: 10px;
    }
    .TZ {
    background: #ffffff;
    border-top: 1px solid white;
    font-size: 12px;
    color: #000;
    padding: 9px 11px;
    line-height: 1px;
    font-family: Verdana, Geneva, sans-serif;
    }
    .TZ span {
    color: #000;
    font-size: 11px;
    position: absolute;
    margin: -12px 100px;
    width: 310px;
    }
    #widgetbox .author-credit a {
    font-size: 10px;
    font-size: 10px;letter-spacing: 1px;
    color: #1E598E;
    text-decoration: none;
    }
    .email-subscribe-emailbox {
    padding: 5px 10px;
    font-family: "Arial","Helvetica",sans-serif;
    border-top: 0;
    border-image: initial;
    height: 42px;
    background: #EFF8FB;
    width: 280px;
    }
    .email-subscribe-emailbox form {width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
    .email-subscribe-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
    .email-subscribe-emailbox input.emailu:focus {color: #333;}
    .email-subscribe-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
    .email-subscribe-emailbox input.submitu:hover {text-decoration: none;}
    .TZDefault {border: 1px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
    .TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
    </style>
    <div id="socialwidget">
    <!-- Begin Widget -->
    <div class="TZ-social">
    <!-- social ico -->
    <center>
    <a style="margin-right: 10px;" href="http://facebook.com/trickyblogger" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ4KhS31I0uBErQi6feGMpBD6x3iZlXq6pkbENq4AvC8wioDfNZqb1pnezWaPtT0vyV_mS7jP8jExzJIReLkserWFyX1mXBI5kp9US2rUd1e9SXT85nnmsF9jN6xUFEBPnZ0njZA69V7Q/s1600/facebook.png" title='Facebook'/></a>
    <a style="margin-right: 10px;" href="http://twitter.com/trickyblogger" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSW4XRjZiRMJBhfDfXHp9Q_cDM4LwgDUBtKPyQ98XUKubYHXvPWnm4NwCeYYqoWVNV-QIBVnf-K5uF-or33xmpbEa_oZuEvRYoCOpvllbEUJzWp2TScAUsoQlVS-PjsjP-hW7Gc5SORu8/s1600/twitter.png" title='Twitter'/></a>
    <a style="margin-right: 10px;" rel="me" href="https://plus.google.com/117521503834739609237" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoucevr2KqLDmklxpj7AtwZzqL4RANupRphJbdOra49BxBThWIbLySwueGiPjzoI-W_RxGUFiunZdCGDvWmL1Mkm4RI6PhUcnbCKV1z8MuE2ohnJx0dEgcd8SMGN0pgddbWbPgbwlFgnk/s1600/gplus.png" title='Google Plus'/></a>
    <a style="margin-right: 10px;" href="http://pinterest.com/jimluthra/" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv-e3_isC_dvbzf7bXE2szaZhB4IiqG1v4L_KPWQhRQNVSVN5Vl9SJva7yZmNqM8SbGWwtC81CFdzK-Hm_K-9BAHtJSZSCOUOru330QYU3YVmEV_MwOPCo_jNjBIbiU6wvUSMzFr-NRpg/s1600/pinterest.png" title='Pinterest'/></a>
    <a style="margin-right: 10px;" href="http://feeds.feedburner.com/trickyblogger" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb8VN_6m1NjHlbWtABrTKpL2FCIDrL6tQYErHDacj8YIsAzvjN_bGPwGziiqa9GiCnISz4kW-Lni8mKH7LuZKpdp0WAHhzegeMqGOzdSzdyK3PFFZOKnmWgI5WD1Ad8RB7LeW1XZq931U/s1600/rss.png" title='RSS Feed'/></a>
    </center>
    </div>
    <div class="googleplus">
    <span><font><font>Recommend Us On Google </font></font></span>
    <!-- GooglePlus -->
    <!-- Place this tag where you want the 1 button to render -->
    <g:plusone size="medium" href="http://www.trickyblogger.com/"></g:plusone>
    <!-- Place this render call where appropriate -->
    <!-- Place this render call where appropriate -->
    <script type="text/javascript">
    (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
    </script>
    </div>
    <div class="TZ">
    <!-- facebook -->
    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Ftrickyblogger&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true">
    </iframe>
    <span>Like Us On Facebook</span>
    </div>
    <div class="twitter">
    <!-- Twitter -->
    <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=trickyblogger&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button">
    </iframe>
    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
    </div>
    <div class="email-subscribe-emailbox">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=trickyblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
    <table width="100%">
    <tr>
    <td>
    <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
    </td>
    <td width="70px">
    <input class="submitu TZDefault" type="submit" value="Subscribe"/>
    </td>
    </tr>
    </table>
    <input name="uri" type="hidden" value="trickyblogger"/>
    <input name="loc" type="hidden" value="en_US"/>
    </form>
    </div>
    <div id="widgetbox" style="background: #EBEBEB;border-top: 1px solid #ddd;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;">
    <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"></span>
    </div>
    <!-- End Widget -->
    </div>
  • Make the Following Changes
Replace trickyblogger with your FeedBurner Username.
Replace trickyblogger with your Facebook Username.
Replace trickyblogger with your Twitter Username.
Replace 117521503834739609237 with your Google+ ID
Replace jimluthra with your Pinterest Username.
Replace http://www.trickyblogger.com with your Blog Address.

  • Save Widget.
Done!!! You've successfully added the widget to your blog. I hope you liked it, If yes then please share it with your friends.
 

Need Help

If you are having any problems then don't hesitate leaving a comment below, I'll try to get back asap!
8:08 AM , , , 2 comments
Avatar of Surya
Surya

Out too the been like hard off. Improve enquire welcome own beloved matters her. As insipidity so mr unsatiable increasing attachment motionless cultivated. Addition mr husbands unpacked occasion he.

2 comments:

© 2012 Blog For Money | Designed by Template Trackers - Published By Gooyaabi Templates
All Rights Strictly Reserved.