04 November 2012

How to add Stay Connected Gadget having subscription from all major social media sites for your blogger?

2:35 AM By Pallav Jain , , ,

image 21323234

At present, social networking sites have become the most popular hub for people across the globe. Almost every person has started using social networking sites, and their day seems to be incomplete without the use of these websites at least once.

So, what can be a better place than these social networking sites in order to popularise your blog among the masses worldwide?

Social networking sites are the best option now for any blogger in the world to share his knowledge, and get a good traffic in very less time. People have started using these sites as a weapon for their blogs, to get a great traffic.

Just wonder if all the leading social sites would be available at your blog at a single place?

And what if all these leading sites can be added to your blog just by using a single gadget without taking any pain?

Just follow these simple steps to add this important gadget to your Blogger.

Step 1:- First, go to your Blogger dashboard. Then click on your Blogger Layout option.
image 234234324
Click to Enlarge
Image 232423423
Click to Enlarge


Step 2:- Next, click on Add a Gadget option and scroll your page down to choose HTML/Javascript Gadget.
image 232423443456
Click to Enlarge

Step 3:- Now, paste the below code in the content box of your HTML/ Javascript Gadget.

Step 4:- Replace all these given URL’s with the URL of the social networking sites that you want among the given names.

----------------------------------!!-------------------------------------------------------!!----------------------------------------
<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="https://plus.google.com/102447978142529993698" 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/ComFugeAWorldOfGeeks" target="_blank" rel="nofollow">
  <img src="http://2.bp.blogspot.com/_rLYhkzmU7RY/TED5ihk9m6I/AAAAAAAAABI/v_2rKVhRE0g/s320/1oaxc4.jpg.png" /></a>
  <a style="margin-right: 10px;" href="http://feeds2.feedburner.com/comfuge-aWorldOfGeeks" target="_blank" rel="nofollow">
  <img src="http://3.bp.blogspot.com/_rLYhkzmU7RY/TED5SYSjFII/AAAAAAAAABA/xcmxc456JgQ/s1600/2d7itk9.jpg.png" /></a>
  <a style="margin-right: 10px;" href="http://feedburner.google.com/fb/a/mailverify?uri=Comfuge-aWorldOfGeeks&loc=en_US" target="_blank" rel="nofollow">
  <img src="http://1.bp.blogspot.com/_rLYhkzmU7RY/TED5LW-dTrI/AAAAAAAAAAw/mozQRQcCttU/s320/j5krgl.jpg.png" /></a>
  <a style="margin-right: 10px;" href="http://twitter.com/#!/ComFugeaworld" target="_blank" rel="nofollow">
  <img src="http://3.bp.blogspot.com/_rLYhkzmU7RY/TED5Omxmx_I/AAAAAAAAAA4/iU6SVPqEQWI/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" href="http://www.comfuge.org/"></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 = 'http://comfuge6.googlecode.com/svn/google_plus_new.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class="fb">
<!-- Twitter -->
<iframe                             src="//www.facebook.com/plugins/like.php?
href=http://www.facebook.com/ComFugeAWorldOfGeeks&&send=false&layout=button_count&width=450&s
 Please delete this comment and join the breaking url , so that this code can work... 
how_faces=true&action=like&colorscheme=light&font=verdana&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&id=twitter-widget-0&lang=en&screen_name=ComFugeaworld&show_count=true&show_screen_name=true&size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button">
</iframe>
<script src="http://comfuge6.googlecode.com/svn/twitter_new.js" type="text/javascript"></script>
</div>
<div class="pterest">
<a href="http://pinterest.com/ComFugeaworld/"><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=comfuge-aWorldOfGeeks ', '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='';" onblur="if(this.value=='')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://www.comfuge.org/2012/11/how-to-add-stay-connected-gadget-having.html" target="_blank">Get This »</a></span>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//http://comfuge6.googlecode.com/svn/facebook_new.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- End Widget -->
</div>
--------------------------------------!!-------------------------------------------!!--------------------------------

Press Ctrl+F and Find the keywords in the code, then replace it as shown below…






·         Replace http://www.comfuge.org/ to your blog address.



·          

This gadget provides us with Facebook Like button, Google +1 button, Twitter follow button, Pinterest Follow button and Email subscription option, along with their social icons.
Step 5:- Now, save that HTML/ Javascript code in your Layout page and thus your Stay Connected Gadget is ready to use.

If you have any queries related to this post, then you may comment below..

Author -