» » » » » Stay Connected Gadget With All Subscription Options For Blogger

0 , , , 07:27


Social Sharing and Subscribing plays very important role in increasing traffic on the blog which gaves more earnings to the author of that blog.Keeping that thing in mind I am creating social subscription widgets and today I have created another one cool social subscription gadget for my readers.This widget is similar to mashable style widget but I made some changes to give it more impressive look.This widget contains following things -


  1. Facebook Like Button
  2. Google +1 Button
  3. Twitter Follow Button
  4. Pinterest Follow Button
  5. Email Subscription Form and
  6. Social Icons
See the demo of gadget :





Live Gadget Demo

How To Add This Gadget On Your Blog?


I have kept the installation so easy you have to just copy and paste the code.Follow below steps carefully.


  1. First go to Blogger Dashboard > Layout
  2. Click on "Add a Gadget" link.
  3. Select HTML/Javascript widget.
  4. Now paste below code after replacing my usernames with yours and save it.


<style> 
#socialnetworking {
    border: 1px solid #ebebeb;
    width: 280px;
}

.fb-likebox {
    padding: 10px 10px 0 10px;
    border-bottom: 1px solid #ebebeb;
}

.googleplus {
    background: #eef9fd;
    border-top: 1px solid white;
    border-bottom: 1px solid #ebebeb;
    font-size: 12px;
    color: #000;
    padding: 9px 11px;
    line-height: 1px;
    font-family: Verdana, Geneva, sans-serif;
}

.googleplus span {
    color: #000;
    font-size: 11px;
    position: absolute;
    margin: 9px 70px;
    width: 280px;
}

#widgetbox {
    background: #EBEBEB;
    padding: 2px 8px 2px 3px;
    text-align: right;
    border-image: initial;
}

#widgetbox .author-credit a {
    font-size: 10px;
    font-weight: bold;
    text-shadow: 1px 1px white;
    color: #1E598E;
    text-decoration: none;
}

.g-plusone {
    float: left;
}

.twitter {
    background: #eef9fd;
    border-top: 1px solid #fff;
    padding: 10px;
}

.fb {
    background: #eef9fd;
    border-top: 1px solid white;
    border-bottom: 1px solid #ebebeb;
    font-size: 12px;
    color: #000;
    padding: 9px 11px;
    line-height: 1px;
    font-family: Verdana, Geneva, sans-serif;
}

.fb span {
    color: #000;
    font-size: 11px;
    position: absolute;
    margin: -12px 100px;
    width: 280px;
}

.pterest {
    background: #EFF5FB;
    border-bottom: 1px solid #ebebeb;
    font-size: 12px;
    color: #000;
    padding: 9px 11px;
    line-height: 1px;
    font-family: Verdana, Geneva, sans-serif;
    border-top: 1px solid #ddd;
}

#email-news-subscribe .email-box {
    padding: 5px 10px;
    font-family: "Arial","Helvetica",sans-serif;
    border-top: 0;
    border-image: initial;
    height: 35px;
    background: #EFF8FB;
    width: 260px;
}

#email-news-subscribe .email-box input.email {
    background: #FFFFFF;
    border: 1px solid #dedede;
    color: #999;
    padding: 7px 10px 8px 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    border-image: initial;
    font-family: "Arial","Helvetica",sans-serif;
}

#email-news-subscribe .email-box input.email:focus {
    color: #333
}

#email-news-subscribe .email-box input.subscribe {
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
    font-family: "Arial","Helvetica",sans-serif;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #cc7c00;
    color: white;
    text-shadow: #d08d00 1px 1px 0;
    padding: 7px 14px;
    margin-left: 3px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    border-image: initial;
}

#email-news-subscribe .email-box input.subscribe:hover {
    background: #ff9b00;
    background-image: -moz-linear-gradient(top,#ffda4d,#ff9b00);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
    outline: 0;
    -moz-box-shadow: 0 0 3px #999;
    -webkit-box-shadow: 0 0 3px #999;
    box-shadow: 0 0 3px #999 
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
    background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
    -pie-background: linear-gradient(270deg,#ffda4d,#ff9b00);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #cc7c00;
    color: #FFFFFF;
    text-shadow: #d08d00 1px 1px 0
}   
</style>  

<div id="socialnetworking">
 <!-- Begin Widget -->
 <div class="fb-likebox">
  <!-- Facebook -->
  <center>
  <a style="margin-right: 10px;" rel="me" href="http://profiles.google.com/106527290580119996124" target="_blank">
  <img src="http://2.bp.blogspot.com/-TtecU81mxEA/TrHxZowPn9I/AAAAAAAABI8/UGSwDMYkt-c/s1600/Button G.png" /></a>
  <a style="margin-right: 10px;" href="http://www.facebook.com/btsnts" target="_blank" rel="nofollow">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1pwOR8d3uAZwkBsfWuzoVWvEhzdk1QSrjLRleAu9Nwy4DEy3G8oD60tJutWTtpT6ofkTcCP3bSDKug-hppZfd8PohYAX2knXwoWA-JHBZW1xl2BY3Eaf5vwk4DzEgcreC2mDuIZrqhTqh/s320/1oaxc4.jpg.png" /></a>
  <a style="margin-right: 10px;" href="http://feeds2.feedburner.com/hblogger" target="_blank" rel="nofollow">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTib-Cs4O8qQF7o1hA0GrYX_zetZgXVow0Nr1Gi0ASqt4uun5PQQLivD56ANQ4ZSBRLka9-gARd5ABPaMKbJBWZA345Y10wKkFNRfGcwBEzCX2xFVWqSpzjVCUkShFKI1NVvN_AfWCOsoP/s1600/2d7itk9.jpg.png" /></a>
  <a style="margin-right: 10px;" href="http://feedburner.google.com/fb/a/mailverify?uri=hblogger&amp;loc=en_US" target="_blank" rel="nofollow">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_aHFOrr_c2a_8FAfuY4XemlbiPcs0BBKI1ci7XvWpnfbh5hsf0Ub4-Alp-q4HBOjJO_JV4hKooHjzAJ0lrzJW2AbVMMHJKHCkWyE5cdGgso1tCHHJL5eDlao9qQDAcQYYCIEhv15PSsvU/s320/j5krgl.jpg.png" /></a>
  <a style="margin-right: 10px;" href="http://twitter.com/#!/helperblogger" target="_blank" rel="nofollow">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6F9s678ts-qG6WRap_sveNh4DCPu36lYPTC68toTMdxvw-wtKFSTcDJXnfU_hfJcOazs1e8uoAr1Sc_6Chi24fiJftIzP_XT9v6eWfhpxk2j-388cJWlTwwVKJHIhWpgDg55yTjx7PCxq/s1600/3312cmr.jpg.png" /></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"></g:plusone>
  <!-- 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>
  <script type="text/javascript">
  gapi.plusone.render
  (
   'plusone-div',
   {
    "size": "medium",
    "count": "true"
   }
  );
  </script>
</div>
<div class="fb">
<!-- Twitter -->
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fbtsnts&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=helperblogger&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="pterest">
<a href="http://pinterest.com/rahulippar/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest"/></a>
</div>
<div id="email-news-subscribe">
<!-- Email Subscribe -->
<div class="email-box">
 <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=hblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
  <input class="email" type="text" style="width: 140px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;"/>
  <input type="hidden" value="hblogger" name="uri"/>
  <input type="hidden" name="loc" value="en_US"/>
  <input class="subscribe" name="commit" type="submit" value="Subscribe"/>
 </form>
</div>
</div>
<div id="widgetbox" style="background: #FBEFEF;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;"><a href="http://bit.ly/KhaGzy" target="_blank">Blogger Widgets �</a></span>
</div>
<!-- End Widget -->
</div>

Color Codes Information -

     - Your Google+ Profile/Page ID:


     - Your Facebook Username:


     - Your Feedburner Username:


     - Your Twitter Username:


     - Your Pinterest Username:

Now save your all changes and you are done.

Note - You are most welcome to share this gadget with your readers but you have to attach a link to this tutorial.Gadget users are requested to not remove the credits links.Its really destroy my efforts which I have put on this gadget.

 Happy Blogging....
Posted by

Share to:

Post a Comment

Subscribe to: Post Comments (Atom)
 
Top