Home » blogger plugins » blogger tips » Add fantastic Facebook,Twitter,Google+, Subscription with email sildout widget to Blogger

Add fantastic Facebook,Twitter,Google+, Subscription with email sildout widget to Blogger


These days subscription is very important for every new blogger or webmaster. This is important because if we want our subscribers to come again to your blog again. Today we will see how to add a 4 subscription and sharing slid out widget. It will increase your traffic too. Using simple steps you can add this to your blogger blog. As I have adding in my blog. See below snapshot for that.you will like it.




 
Live Demo
                                                             
Steps to add slid out widget to your blogger blog:

 Step 1: Go to your blogger dashboard>>>>>go to layout>>>add a gadget.
Step 2: Now just paste this below code with some modification and save it.


<style>
img,a {
    border: 0;
}


#on {
    visibility: visible;
}


#off {
    visibility: hidden;
}


#facebook_div {
    width: 196px;
    height: 340px;
    overflow: hidden;
}


#twitter_div {
    width: 246px;
    height: 353px;
    overflow: hidden;
}


#google_plus_div {
    width: 152px;
    height: 97px;
    overflow: hidden;
    margin-left: 50px;
    margin-top: 10px;
}


#knfeedburner_div {
    width: 300px;
    height: 97px;
    overflow: hidden;
    margin-top: 5px;
    margin-left: -4px;
}


#kakinetwork_div {
    width: 300px;
    height: 97px;
    overflow: hidden;
}/* right side style */#facebook_right {
    z-index: 10005;
    border: 2px solid #3c95d9;
    background-color: #fff;
    width: 196px;
    height: 353px;
    position: fixed;
    right: -200px;
}


#facebook_right img {
    position: absolute;
    top: -2px;
    left: -35px;
}


#facebook_right iframe {
    border: 0px solid #3c95d9;
    overflow: hidden;
    position: static;
    height: 360px;
    left: -2px;
    top: -3px;
}


#twitter_right {
    z-index: 10004;
    border: 2px solid #6CC5FF;
    background-color: #6CC5FF;
    width: 246px;
    height: 353px;
    position: fixed;
    right: -250px;
}


#twitter_right_img {
    position: absolute;
    top: -2px;
    left: -35px;
    border: 0;
}


#google_plus_right {
    z-index: 10003;
    background-color: #F2F2F2;
    border: 2px solid #006ec9;
    border-top: 2px solid #0056a0;
    border-bottom: 2px solid #0056a0;
    border-right: 2px solid #0056a0;
    border-left: hidden;
    width: 152px;
    height: 97px;
    position: fixed;
    right: -154px;
}


#google_plus_right_img {
    position: absolute;
    top: -2px;
    left: -33px;
    border: 0;
}


#feedburner_right {
    z-index: 10003;
    background-color: #fefefe;
    border: 2px solid #5b5b5b;
    border-top: 2px solid #5b5b5b;
    border-bottom: 2px solid #5b5b5b;
    border-right: 2px solid #5b5b5b;
    border-left: hidden;
    width: 300px;
    height: 97px;
    position: fixed;
    right: -303px;
}


#feedburner_right_img {
    position: absolute;
    top: -2px;
    left: -33px;
    border: 0;
}


#kakinetwork_right {
    z-index: 10003;
    border: 2px solid #303030;
    background-color: #fff;
    width: 300px;
    height: 97px;
    position: fixed;
}


#kakinetwork_right img {
    position: absolute;
    top: -2px;
    left: -101px;
}/* left side style */#facebook_left {
    z-index: 10005;
    border: 2px solid #3c95d9;
    background-color: #fff;
    width: 196px;
    height: 353px;
    position: fixed;
    left: -200px;
}


#facebook_left img {
    position: absolute;
    top: -2px;
    right: -35px;
}


#facebook_left iframe {
    border: 0px solid #3c95d9;
    overflow: hidden;
    position: static;
    height: 360px;
    right: -2px;
    top: -3px;
}


#twitter_left {
    z-index: 10004;
    border: 2px solid #6CC5FF;
    background-color: #6CC5FF;
    width: 246px;
    height: 353px;
    position: fixed;
    left: -250px;
}


#twitter_left_img {
    position: absolute;
    top: -2px;
    right: -35px;
    border: 0;
}


#google_plus_left {
    z-index: 10003;
    background-color: #006ec9;
    border: 2px solid #006ec9;
    border-top: 2px solid #0056a0;
    border-bottom: 2px solid #0056a0;
    border-left: 2px solid #0056a0;
    border-right: hidden;
    width: 152px;
    height: 97px;
    position: fixed;
    left: -154px;
}


#google_plus_left_img {
    position: absolute;
    top: -2px;
    right: -33px;
    border: 0;
}


#feedburner_left {
    z-index: 10003;
    background-color: #fefefe;
    border: 2px solid #5b5b5b;
    border-top: 2px solid #5b5b5b;
    border-bottom: 2px solid #5b5b5b;
    border-left: 2px solid #5b5b5b;
    border-right: hidden;
    width: 300px;
    height: 97px;
    position: fixed;
    left: -303px;
}


#feedburner_left_img {
    position: absolute;
    top: -2px;
    right: -33px;
    border: 0;
}


#kakinetwork_left {
    z-index: 10003;
    border: 2px solid #303030;
    background-color: #fff;
    width: 300px;
    height: 97px;
    position: fixed;
}


#kakinetwork_left img {
    position: absolute;
    top: -2px;
    right: -101px;
}


.box-title1 {
    border: 1px solid #ddd;
/*border-radius*/
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
/*box-shadow*/
    -webkit-box-shadow: 5px 5px 5px #CCCCCC;
    -moz-box-shadow: 5px 5px 5px #CCCCCC;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding: 10px;
    margin: 10px 0;
}


.enteryouremail {
    background: #fff !important;
    border: 1px solid #d2d2d2;
    padding: 0px 8px 0px 8px;
    color: #a19999;
    font-size: 12px;
    height: 25px;
    width: 165px;
/*border-radius*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0px;
}


.submitbutton {
    background: #F2F2F2;
    border: 1px solid #F66303;
/*box-shadow*/
    -webkit-box-shadow: 3px 3px 3px #666;
    box-shadow: 3px 3px 3px #666;
    font: bold 12px Arial, sans-serif;
    color: #000000;
    height: 25px;
    padding: 0 12px 0 12px;
    margin: 0 0 0 5px;
/*border-radius*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}
</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>


<div id="on">
 <div id="facebook_right" style="top: 18%;">
  <div id="facebook_div">
   <img src="http://4.bp.blogspot.com/-hs9bX9B6I0g/T8EXqoKtc8I/AAAAAAAADrA/vpO9rFeRtwg/s1600/Careerandtricks.com-facebook-icon.png" alt=""/>
   <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FFacebook Fan Page Name&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true">
   </iframe>
  </div>
 </div>
</div>
<div id="on">
 <div id="twitter_right" style="top: 35%;">
  <div id="twitter_div">
   <img id="twitter_right_img" src="http://4.bp.blogspot.com/-1V0sO8qP0EI/T8EWxvcC20I/AAAAAAAADqo/kMx67jxXMeg/s1600/Careerandtricks.com-twitter-icon.png"/>
   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
   <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('yourtwittername').start();</script>
  </div>
 </div>
</div>
<div id="on">
 <div id="google_plus_right" style="top: 52%;">
  <div id="google_plus_div">
   <img id="google_plus_right_img" src="http://2.bp.blogspot.com/-JC1vO9I72Vo/T8EXEl0l6PI/AAAAAAAADqw/BDSYpXAF94Q/s1600/Careerandtricks.com-google-plus-icon.png"/>
   <div style="float:left;margin:10px 10px 10px 0;">
    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>
   </div>
  </div>
 </div>
 <div id="on">
  <div id="feedburner_right" style=" top: 69%;">
   <div id="knfeedburner_div">
    <center>
    <h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feed Burner ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
     <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text"/><input value="Your Feed Burner ID" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>
    </form>
    </center><img id="feedburner_right_img" src="http://4.bp.blogspot.com/-7v_wEPjhx7Y/T8EXUKs5nYI/AAAAAAAADq4/Ss2iPUO7MOo/s1600/Careerandtricks.com-subscribe-icon.png"/>
   </div>
  </div>
 </div>
</div>
What to change:
You only need to change the red color  with  your facebook fan page and your feed burner id ,and twitter name as wellonly. Have fun with this.
If you like it than please subscribe to my blog. Thanks for your valuable time.


Edior teamEdior Team- My name is rohit chugh. I love to write about blogging tips, seo , Google tips and technology tips. I love to discover new topics

Subscribe To Get FREE Tutorials!

Posted by 7 comments
Labels: ,
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

7 comments:

  1. Nice article rohit. But I think u must add demo of this widget too. You can open a demo blog and can place the link here so that the readers will get the pre-glance of the widget.

    ReplyDelete

  2. @Babita Tomar k mam i will put it. thanks for your valuable advice. as soon as my exams will be over i will do it.

    ReplyDelete
    Replies

    1. mam i have added the demo as you said.

      Delete

  3. I have Added fantastic Facebook,Twitter,Google+, Subscription with email sildout widget to Blogger it's nice, checkout my blog at
    http://definingwords.blogspot.com/2012/10/road-to-success.html
    feel free to leave a comment

    ReplyDelete
    Replies

    1. @steve hello steve thanx for your time. i have check out your blog but where is the widget? and i must say your blog is very good. if you want any help than feel free to ask anything.and your suggestions are very important for me.

      Delete

  4. Useful widget , this widget is really useful because it will save a lot of space on a webpage and will also avoid delayed loading of other elements on the page due to large JS file used in social media widgets.

    ReplyDelete
    Replies

    1. @kumar suhas yes sir you are very much right. there is no js file in this widget. it is also to use.n thanks for your valuable information.

      Delete

Subscribe to: Post Comments (Atom)