Facebook, Twitter, Google+, Email Subscription Slideout Widget

Today we present 4 in 1 subscription widget consisting of slideout Facebook Likebox, Twitter Feed box, Google+ button and Feedburner email subscription box. Giving out your blog's social media presence a push is extremely important now days and the true utilization of your blog's traffic can only be done once you feature your social media connections with such widget.

The Social connection boxes slideout each time we hover our mouse upon them elegantly. Below is the demo link to see the live example of the widget.

Facebook, Twitter, Google+, Email Subscription Slideout



Liked the widget? Follow the simple steps below to add it to your Blogger blog.

Before we move on, you may liked to read:


Step #1 Add a Gadget


Go to Blogger Dashboard >> Design >> Add a new Gadget and paste the following code with in it.


Share To Unlock Code

[lock]
[    <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/BloggingeHow.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/BloggingeHow.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('BloggingeHow').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/BloggingeHow.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/BloggingeHow.com-subscribe-icon.png"/>
       </div>
      </div>
     </div>
    </div>]
[/lock]

Customization


Now replace Orange keyword on the places highlighted in the code above as per instructions. Hope you liked the widget. Leave out your comments below in case of any problem while installing the widget.

Stay safe!smile

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: Facebook, Twitter, Google+, Email Subscription Slideout Widget
Facebook, Twitter, Google+, Email Subscription Slideout Widget
http://2.bp.blogspot.com/-Xk1g9DbVCiE/UfM1Y4eCKPI/AAAAAAAALbg/xjJlfQ30eUc/s1600/all+in+one+subscription.png
http://2.bp.blogspot.com/-Xk1g9DbVCiE/UfM1Y4eCKPI/AAAAAAAALbg/xjJlfQ30eUc/s72-c/all+in+one+subscription.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/05/facebook-twitter-google-email.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/05/facebook-twitter-google-email.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade