Place Your Ads Here 460x68 ads

5 Big Social Network J-Query Slide Out Widget For Your Blog & Website


Facebook, Twitter, Google Plus, Subscribe, YouTube J-Query PoP Out Widget For Your Blog & WebsiteFacebook, Twitter, Google Plus, Subscribe, YouTube J-Query PoP Out Widget For Your Blog & WebsiteFacebook, Twitter, Google Plus, Subscribe, YouTube J-Query PoP Out Widget For Your Blog & Website
Facebook, Twitter, Google Plus, Subscribe, YouTube J-Query PoP Out Widget For Your Blog & WebsiteFacebook, Twitter, Google Plus, Subscribe, YouTube J-Query PoP Out Widget For Your Blog & Website



In my Last Widget Post I talked about the "Facebook, Twitter, Google Plus, Subscribe E-Mail J-Query PoP Out Widgets For Your Blog & Website" Which is Helpful for a Blogger to Mix all social sharing Plugin at One Widget.Today I'll like to talk about the Popup that contain alle the previous + YouTube widget also.5 Big Social Network (Facebook, Twitter, Google Plus, Subscribe, YouTube) J-Query Slide Out Widget For Your Blog & Website To Increase Your Social Fans.
You Have seen different Types of Like Boxes on Different Blogs, where whenever you Enter a Pop up Appears and ask you to like the Blog's Official page.Sometimes It also irritates visitors because of repeated appearance.So we have three different Pop up Like Boxes which appears on hover on littel image that are at right sidebar on you blog.
One of the best ways to increase your Social fans is to add the Jquery Pop-up Social Box to your Blog. Once this widget is installed on your blog, your visitors will be shown a slide out box with the option to like your Facebook Page, or want to follow on Twitter, or want to add you in there circle, want to subscribe your feedburner email whenever they visit your blog. Advantages this widget is to free space on the page. Because if you add all of these widget on your site/blog, it will take a huge space that will make your visito angry, it can prevent website normal as the box. Static widget as soft box with jQuery effect of activation for the blogger, this is another cool control. Here I have added as the box with simple jQuery hover effect. See the screen shoot on the above image that are sliding out on hovering on there images.
This widget slide out a jQuery window containing Social widgets box as soon as a visitor hover on it. This plugin can be added to both Blogger Blogs and Wordpress and also HTML website. This slide our appears only once to hove and get back on mouse out. It will appear on homepage and sub pages depending which page the visitor is accessing.
 Lets get straight to the one step installation process.Grab the Code for this Widget code and Follow the Given Instruction.It is Really easy to Implement just keep in mind to backup your Template before Editing it.

Features:
1.) J-Query/JavaScript Widget.
2.) Slide-Out On Hover.
3.) Awesome And Stylish.
4.) Facebook Like Box Included.
5.) Twitter Followers Box Included.
6.) YouTube Subscribe Box Included.
7.) Google Plus Add To Circle Widget Included.
8.) FeedBurner RSS Subscribe Through E-Mail Widget Included.
9.) Sliding Effect Enabled.
10.) Slide Out On Hove And Get Back On Mouse Out.


How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To "Template".
4.) Click "CTRL+F" And Search For ]]></b:skin>
5.) Now Copy The CSS Code And Paste Before It.
6.) Again Click "CTRL+F" And Search For </head>
7.) Now Copy The JQuery/JavaScript Code And Paste Before It.
8.) Now Go To "Layout".
9.) Click "Add A Gadget" .
10.) Now Scroll To "HTML-JAVASCRIPT"
11.) Click "+" Icon To Add It.
12.) Now Copy The HTML Code And Paste It To There.
13.) Leave The Title Empty.
14.) Click Save, Now You Are Done.



CSS Code:
#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:196px;height: 353px;overflow: hidden;}
#twitter_div {width:246px;height: 353px;overflow: hidden;}
#google_plus_div {width:200px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#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: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:200px;height: 143px;position: fixed;right: -203px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10002;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;}
#youtube_right {z-index: 10001;background-color: #fefefe;border:2px solid #ff0000;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:301px;height: 106px;position: fixed;right: -303px;}
#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}


J-Query/JavaScript Code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></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: -203}, 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); });
jQuery("#youtube_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#youtube_right").stop(true,false).animate({right: -303}, 500); });
});
</script>


HTML Code:
<div id="on"><div id="facebook_right"style="top:8%;"><div id="facebook_div"><img src="http://1.bp.blogspot.com/-yUI3Og8Esko/TyywzMTqmsI/AAAAAAAABMs/z-tTK2uUS-0/s1600/Facebook.png"alt=""/><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FEXEIdeas2010&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:25%;"><div id="twitter_div"><img id="twitter_right_img"src="http://1.bp.blogspot.com/-khdW550KJIA/Tyyw1UgdxzI/AAAAAAAABNE/AwsKGPGrZkQ/s1600/Twitter.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:'#FFF'},tweets:{background:'#FFF',color:'#000',links:'#47a61e'}},features:{loop:false,live:true,scrollbar:false,hashtags:false,timestamp:true,avatars:true,behavior:'all'}}).render().setUser('EXEIdeas').start();</script></div></div></div><div id="on"><div id="google_plus_right"style="top:42%;"><div id="google_plus_div"><img id="google_plus_right_img"src="http://2.bp.blogspot.com/-92QhBqQOpz8/Tyywzk8GzmI/AAAAAAAABMw/hxB7RBjWk68/s1600/Google+Plus.png"/><div style="float:left;margin:1px 0px 0px 2px;"><script type="text/javascript">mbgc='006ec9';ww='200';mbc='006ec9';bbc='006ec9';bmobc='3b71c6';bbgc='006ec9';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='ffffff';tc='ffffff';nc='ffffff';bc='ffffff';l='y';t='Add_Me_To';fs='20';fsb='13';bw='3F79D5';ff='4';pc='4889F0';b='0';pid='102256859586166648016';</script><script type="text/javascript"src="http://widgetsplus.com/google_plus_widget.js"></script></div></div></div></div><div id="on"><div id="feedburner_right"style="top:59%;"><div id="knfeedburner_div"><center><br />&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;<h4 style="color:#F66303;">You Can Also Receive Free E-Mail 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=EXEIdeas','popupwindow','scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10"class="enteryouremail"name="email"value="Enter Your E-Mail Here..."onblur="if (this.value == &#39;&#39;){this.value = &#39;Enter Your E-Mail Here...&#39;}"onfocus="if (this.value == &#39;Enter Your E-Mail Here...&#39;){this.value = &#39;&#39;}"type="text"/><input value="EXEIdeas"name="uri"type="hidden"/><input value="Submit"class="submitbutton"type="submit"/></form></center><img id="feedburner_right_img"src="http://1.bp.blogspot.com/-k-3C-8kdREI/Tyyw0ao_FII/AAAAAAAABM4/mMDgy0TFiD4/s1600/Subscribe.png"/></div></div></div><div id="on"><div id="youtube_right"style="top:76%;"><div id="youtube_div"><img id="youtube_right_img"src="http://1.bp.blogspot.com/-NCdhprqaK10/T0BfYEMH7VI/AAAAAAAABQ8/hn0n3XoKq2Q/s1600/YouTube.png "/><div style="float:left;margin:1px 0px 0px 2px;"><iframe src=http://www.youtube.com/subscribe_widget?p=EXEIdeasstyle="height:105px;width:300px;border:0;"scrolling="no"frameBorder="0"></iframe></div></div></div></div>


Customization:
1.) Change EXEIdeas2010 With Your Facebook FanPage Name.
2.) Change EXEIdeas With Your Twitter UserName.
3.) Change 102256859586166648016 With Your Google Plus ID Code.
4.) Change Both EXEIdeas With Your Feed Burner URL Name.
5.) Change EXEIdeas With Your YouTube User Name.
6.) Save And Done.



Sameera ChathurangaAbout Author Shoyab Khan

Blogger, MAC user, Apple Fan, Online Content Writer, Designer, Gamer, Programmer and Jovial Guy!. Like my Facebook Fan Page. Catch me on Twitter and Google+. Read more about Me and Www. Only4Everyone.Blogspot.com. Download Free Games,Download Free Software,Download Movies and Watch Online,Blogger Wordpress and Website Tips , Tricks ,Widgets,Templets, and many other Sources and Health Tips,Photo Gallery contact me

Thank You

2 comments:

  1. Hi Khan...Twitter slide out is not working...Everything I have tried...But no effect.I think Twitter has changed their algorithm..Please update with a new one
    Thanking you...
    http://islaamthetruth.blogspot.in
    (Check my site..and hover over the twitter slide out...)

    ReplyDelete
  2. This blog post was absolutely fantastic. Thanks for taking the time to debate this, I feel strongly about it and love learning extra on this topic.
    website design

    ReplyDelete

loading...
Related Posts Plugin for WordPress, Blogger...