Add 4 in 1 Social Sharing Slide Pop out Widget To Blogger/Blog

Add 4 in 1 Social Sharing Slide Pop out Widget To Blogger/Blog

Posted by Nitin Maheta

1

F

irst If you are new here then kindly read my previous versions first so that you may have a clear idea on how this widget works and how can you customize it. Kindly have a look at them:

• jQuery Pop out Facebook Like Box
• jQuery Pop out Twitter Fan Follow Me Box

And now I’m Back here With 4 In 1 Social Share sliding pop out widget Using jQuery ,
 and it's not only for facebook like box , but here you will also see your twitter widget sliding same like facebook like box , similarly for the google +1and Subscribe Popup form ,this look much useful and cute on it slide on your blog , live at a side of your blog when some one over his/her mouse over it , it pop up with a cute sliding effect , the Jquery effect ,
so ...let see how to get this.

How To Add 4 In 1 Social Shere Sliding Pop Out Widget To Blogger.

• Go To Blogger>>>Design>>>Edit HTML
• Tick Expand Widget Template
• Search For The Tag </head> (Using ctrl + f )
• Copy n Paste Below Code Before </head>

<link rel="stylesheet" href="https://gj37765.googlecode.com/svn/trunk/[www.gj37765.blogspot.com]multipopoutwidget.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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>

Note :- CTRL + F To Find Above Red jQuery Plugin URL In Your Template If You Have Already This Plugin Than Remove It .

Save Your Template

Now Adding HTML Code It's Simple

• Go to Blogger>>Design>>>Add a Gadget 
• Choose HTML/Javascript 
• Copy n paste below HTML code Into It,

<div id="on">
    <div id="facebook_right" style="top: 18%;">
        <div id="facebook_div">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwdGaKhVs6kEXqT0AuE5woXeObjawoTa518QDpCLZ6R8wF7UZzr5J_Zt5YDQ4F1OE9HT40d-XphMopOIA43_SGN9E-QWCHs4sFgn5Cilool1P6nPSNZ9BD1bAEulnbaynMBgaxyRVd23Pk/s1600/%255Bwww.gj37765.blogspot.com%255Dfacebook_right.png" alt="" />

            <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fmakingdifferent&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356"   scrolling="no"></iframe>
        </div>
    </div>
</div>
<div id="on">
    <div id="twitter_right" style="top: 35%;">
        <div id="twitter_div">
            <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW_BoJ0FsYdnfrKL6yWQXNRGO5pH0UAMNsA3OJmRTtFjb5OcU4ffXhTYK_k0bRa-dzEoap7Dq3GxddQc76fHRYvINrRyrfVXqhnGyuQIy27PDy1hHYkdkn_mK6mg75auF5537i-FolkjvI/s1600/%255Bwww.gj37765.blogspot.com%255Dtwitter_right.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('nitinmaheta').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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQJPxyVgMmhP8Qvg-NZxAd-uu6aewDd_qe2vUp8AU0vSpJ9vHxTDnRCrt8x7DW2AUL6gH-9jQxDm-ebwbsG9_StfR9YdOm6Xdk3uRDYjDttWwqn3Hsu6bhAgYPRGgvFZHdUlgdjAvQ9zI5/s1600/%255Bwww.gj37765.blogspot.com%255Dgoogle_plus_right.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=MakingDiffrent', '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="MakingDiffrent" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center>

            <img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMOu-VvK7qhvXDVJ3KrGrT4O0eGQ2ExggnNZgUO_HdD1K5eJpmWi3hG7XVf_odw2Dfmbq6pGZeeIRA25r6qk3jMfxORkh9kH0wI0tXqOXLvYeMR_3sRNrXpHEanHNzJd7CaaX0w-DoeaVC/s1600/%255Bwww.gj37765.blogspot.com%255Dfeedburner_right.png">
        </div>
    </div>
</div>

Note:- Replace In Above Code
1. makingdifferent With Your Facebook User name
2. nitinmaheta With Your Twitter User name
3. MakingDiffrent With Your Feed Title

• Save the widget and drag the widget anywhere on your right sidebar. Place it below all widgets on your right sidebar 
• Finally Click the orange save button towards top right.

And that’s all!
I hope you like and enjoy it!