Another Hack To J-Query..!!!
It’s Pure CSS But With J-Query Effect That Make It 99.99% Same As J-Query Widget That I Have Posted Earliers In Two Version…
1.) Facebook, Twitter, Google Plus, Subscribe J-Query PoP Out Widget For Your Blog & Website
2.) Facebook, Twitter, Google Plus, Subscribe, YouTube J-Query PoP Out Widget For Your Blog & Website
But This Is Pure CSS. Now The Simple Question Is That We Are Going To Solve Is “How To Add Stylish And Awesome CSS Slides-Out Social Widgets For Blog And Website To Spice Them Up And Can Get More Real Fans And Followers?”
Before Proceeding You Have To View The DEMO So That You Can Understand What I Am Try To Say. This Is Basically Based Of Transition Effect So It Will Not Work On IE, The Demo Is Of J-Query Widget That Will Work On All Browsers But This Widget Work 99.99% Same As J-Query Did. It Has A Lot Of Features So Before Proceeding You Have To See The List Of Features That Will Ensure You What You Are Going To Add In Your Site/Blog.
Table of Contents
Features:
1.) Full CSS, Not A Single Line Of J-Query/JavaScript Code.
2.) Slide Out With Smooth Effect On Mouse Hover.
3.) 5 Stylish Widget Of Social Network With RSS And E-Mail Subscription Box.
4.) Facebook Awesome Big Fans Widget.
5.) Twitter Stylish Big Followers Widget Like Facebook.
6.) Google Plus “Add To Circle” Beautiful Widget.
7.) YouTube Subscribers Awesome Widget.
8.) RSS Feed And E-Mail Subscription Box.
9.) Quick To Load And Easy To Install.
10.) Awesome, Simple, Stylish And Beautiful Designed Latest Widget.
3.) 5 Stylish Widget Of Social Network With RSS And E-Mail Subscription Box.
4.) Facebook Awesome Big Fans Widget.
5.) Twitter Stylish Big Followers Widget Like Facebook.
6.) Google Plus “Add To Circle” Beautiful Widget.
7.) YouTube Subscribers Awesome Widget.
8.) RSS Feed And E-Mail Subscription Box.
9.) Quick To Load And Easy To Install.
10.) Awesome, Simple, Stylish And Beautiful Designed Latest Widget.
11.) It Will Not Work On IE.(Work On Chrome, FireFox, Safari, Opera)
12.) For Blogspot And Website Also.
12.) For Blogspot And Website Also.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
<!-- This Is A CopyRight Code Of EXEIdeas International®.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. --><!--[if IE]><style type="text/css">#fornetscape {display:none;}</style><![endif]--><style type="text/css">/************************************************ EXE-SlideOut Social Widget- © EXEIdeas (www.exeideas.com)* This notice must stay intact for use.* Visit https://www.exeideas.com/ for full source code.***********************************************/div.facebook-main {width: 270px;top:8%;right:-234px;position:fixed;}div.facebook-main div.facebook-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}div.facebook-main div.facebook-transition iframe {border:0px;overflow:hidden;position:static;height:260px;}div.facebook-main:hover div.facebook-transition {margin-left: -234px;}div.twitter-main {width: 270px;top:25%;right:-234px;position:fixed;}div.twitter-main div.twitter-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}div.twitter-main:hover div.twitter-transition {margin-left: -270px;}div.googleplus-main {width: 270px;top:42%;right:-234px;position:fixed;}div.googleplus-main div.googleplus-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}div.googleplus-main:hover div.googleplus-transition {margin-left: -331px;}div.youtube-main {width: 270px;top:59%;right:-234px;position:fixed;}div.youtube-main div.youtube-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}div.youtube-main:hover div.youtube-transition {margin-left: -306px;}div.subscribe-main {width: 270px;top:76%;right:-234px;position:fixed;}div.subscribe-main div.subscribe-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}div.subscribe-main:hover div.subscribe-transition {margin-left: -226px;}</style><div id="fornetscape"><div class="facebook-main"><div class="facebook-transition"><table><tr><th valign="top" ><img src="https://1.bp.blogspot.com/-yUI3Og8Esko/TyywzMTqmsI/AAAAAAAABMs/z-tTK2uUS-0/s1600/Facebook.png" height="101" width="32" style="margin-right:-3px; margin-top:-1px;" /></th><th style="background-color:#fff; border: 2px solid #3c95d9;"><iframe src="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FEXEIdeas2010&locale=en_GB&width=245&connections=9&stream=&header=false&show_faces=0&height=260" scrolling="no"></iframe></th></tr></table></div></div>
<div class="twitter-main"><div class="twitter-transition"><table><tr><th valign="top"><img src="https://1.bp.blogspot.com/-khdW550KJIA/Tyyw1UgdxzI/AAAAAAAABNE/AwsKGPGrZkQ/s1600/Twitter.png" height="101" width="32" style="margin-right:-3px; margin-top:-1px;" /></th><th style="background-color:#fff; border: 2px solid #6CC5FF;"><script type="text/javascript" src="https://script-ot.googlecode.com/svn/twitterbox.js"></script><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("exeideas");</script></th></tr></table></div></div>
<div class="googleplus-main"><div class="googleplus-transition"><table><tr><th valign="top"><img src="https://2.bp.blogspot.com/-92QhBqQOpz8/Tyywzk8GzmI/AAAAAAAABMw/hxB7RBjWk68/s1600/Google+Plus.png" height="101" width="32" style="margin-right:-3px; margin-top:-1px;" /></th><th style="background-color:#fff; border: 2px solid #006ec9;width:325px;"><iframe src="https://www.google.com/s2/u/0/widgets/ProfileCard?uid=102256859586166648016" width="100%" height="125px" scrolling="no" style="border:0px;"></iframe></th></tr></table></div></div>
<div class="youtube-main"><div class="youtube-transition"><table><tr><th valign="top"><img src="https://1.bp.blogspot.com/-NCdhprqaK10/T0BfYEMH7VI/AAAAAAAABQ8/hn0n3XoKq2Q/s1600/YouTube.png" height="101" width="32" style="margin-right:-3px; margin-top:-1px;" /></th><th style="background-color:#fff; border: 2px solid #ff0000;"><iframe src=http://www.youtube.com/subscribe_widget?p=exeideas style="height: 105px; width: 300px; border: 0;" scrolling="no" frameborder="0"></iframe></th></tr></table></div></div>
<div class="subscribe-main"><div class="subscribe-transition"><table><tr><th valign="top"><img src="https://1.bp.blogspot.com/-k-3C-8kdREI/Tyyw0ao_FII/AAAAAAAABM4/mMDgy0TFiD4/s1600/Subscribe.png" height="101" width="32" style="margin-right:-3px; margin-top:-1px;" /></th><th style="background-color:#fff; border: 2px solid #5b5b5b;"><center><p style="color:#F66303;">You Can Also Receive Free <br />E-Mail Updates:</p> <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 == '') {this.value = 'Enter Your E-Mail Here...';}" onfocus="if (this.value == 'Enter Your E-Mail Here...') {this.value = '';}" type="text" /><input value="Trickstreasure" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center></th></tr></table></div></div></div><!-- This Is A CopyRight Code Of EXEIdeas International®.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.
<!-- This Is A CopyRight Code Of EXEIdeas International®.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. --><!--[if IE]><style type="text/css">#fornetscape {display:none;}</style><![endif]--><style type="text/css">/************************************************ EXE-SlideOut Social Widgets- © EXEIdeas (www.exeideas.com)* This notice must stay intact for use.* Visit https://www.exeideas.com/ for full source code.***********************************************/div.facebook-main {width: 270px;top:8%;right:-234px;position:fixed;}div.facebook-main div.facebook-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}div.facebook-main div.facebook-transition iframe {border:0px;overflow:hidden;position:static;height:260px;}div.facebook-main:hover div.facebook-transition {margin-left: -234px;}div.twitter-main {width: 270px;top:25%;right:-234px;position:fixed;}div.twitter-main div.twitter-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}div.twitter-main:hover div.twitter-transition {margin-left: -270px;}div.googleplus-main {width: 270px;top:42%;right:-234px;position:fixed;}div.googleplus-main div.googleplus-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}div.googleplus-main:hover div.googleplus-transition {margin-left: -331px;}div.youtube-main {width: 270px;top:59%;right:-234px;position:fixed;}div.youtube-main div.youtube-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}div.youtube-main:hover div.youtube-transition {margin-left: -306px;}div.subscribe-main {width: 270px;top:76%;right:-234px;position:fixed;}div.subscribe-main div.subscribe-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}div.subscribe-main:hover div.subscribe-transition {margin-left: -306px;}</style><div id="fornetscape"><div class="facebook-main"><div class="facebook-transition"><table><tr><th valign="top" ><div style="margin-right:-3px; margin-top:-1px; width:32px; height:101px; background-position:0px 0px; background-image:url('https://lh4.googleusercontent.com/-4J1bPhh42w0/UBYg3rN3I1I/AAAAAAAACsA/RFyKlBYhF-U/s700/EXEIdeas-Slide-Out-Widget.png')"> </div></th><th style="background-color:#fff; border: 2px solid #3c95d9;"><iframe src="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FEXEIdeas2010&locale=en_GB&width=245&connections=9&stream=&header=false&show_faces=0&height=260" scrolling="no"></iframe></th></th></tr></table></div></div><div class="twitter-main"><div class="twitter-transition"><table><tr><th valign="top"><div style="margin-right:-3px; margin-top:-1px; width:32px; height:101px; background-position:0px -101px; background-image:url('https://lh4.googleusercontent.com/-4J1bPhh42w0/UBYg3rN3I1I/AAAAAAAACsA/RFyKlBYhF-U/s700/EXEIdeas-Slide-Out-Widget.png')"> </div></th><th style="background-color:#fff; border: 2px solid #6CC5FF;"><script type="text/javascript" src="https://script-ot.googlecode.com/svn/twitterbox.js"></script><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("exeideas");</script></th></th></tr></table></div></div><div class="googleplus-main"><div class="googleplus-transition"><table><tr><th valign="top"><div style="margin-right:-3px; margin-top:-1px; width:32px; height:101px; background-position:0px -202px; background-image:url('https://lh4.googleusercontent.com/-4J1bPhh42w0/UBYg3rN3I1I/AAAAAAAACsA/RFyKlBYhF-U/s700/EXEIdeas-Slide-Out-Widget.png')"> </div></th><th style="background-color:#fff; border: 2px solid #006ec9;width:325px;"><iframe src="https://www.google.com/s2/u/0/widgets/ProfileCard?uid=102256859586166648016" width="100%" height="125px" scrolling="no" style="border:0px;"></iframe></th></tr></table></div></div><div class="youtube-main"><div class="youtube-transition"><table><tr><th valign="top"><div style="margin-right:-3px; margin-top:-1px; width:32px; height:103px; background-position:0px -303px; background-image:url('https://lh4.googleusercontent.com/-4J1bPhh42w0/UBYg3rN3I1I/AAAAAAAACsA/RFyKlBYhF-U/s700/EXEIdeas-Slide-Out-Widget.png')"> </div></th><th style="background-color:#fff; border: 2px solid #ff0000;"><iframe src=http://www.youtube.com/subscribe_widget?p=EXEIdeas style="height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe></th></tr></table></div></div><div class="subscribe-main"><div class="subscribe-transition"><table><tr><th valign="top"><div style="margin-right:-3px; margin-top:-1px; width:32px; height:102px; background-position:0px -405px; background-image:url('https://lh4.googleusercontent.com/-4J1bPhh42w0/UBYg3rN3I1I/AAAAAAAACsA/RFyKlBYhF-U/s700/EXEIdeas-Slide-Out-Widget.png')"> </div></th><th style="background-color:#fff; border: 2px solid #5b5b5b;"><center><p style="color:#F66303;">You Can Also Receive Free E-Mail Updates:</p> <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 == '') {this.value = 'Enter Your E-Mail Here...';}" onfocus="if (this.value == 'Enter Your E-Mail Here...') {this.value = '';}" type="text" /><input value="Trickstreasure" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center></th></tr></table></div></div></div><!-- This Is A CopyRight Code Of EXEIdeas International®.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
Customization:
1.) Replace EXEIdeas2010 With Your Facebook FanPage UserName.
2.) Replace exeideas With Your Twitter UserName.
3.) Replace EXEIdeas With Your YouTube UserName.
4.) Replace 102256859586166648016 With Your Google Plus FanPage Code.
5.) Replace EXEIdeas With Your FeedBurner UserName.
6.)Save And Enjoy…
Doesn’t work on my blog. Just tried it now and images are not showing. But this is an awesome post. Please fix the problem. thank you. im using Google chrome BTW.
Sorry For The Bug But Now It Is Fixed, Here Are The Two Codes, Use One Of Them And Let Me Know If There Is Still An Error…
nice post bro
it awesome in website but twisted in blog
you the best….
Thanks, Now It Is Also Awesome In Blog…
yess..
you can do it..
thank a lot hassan
You Are Welcome…
Hey bro twitter tab is not working in your demo and also in my site !!
HELP AS SOON AS POSSIBLE
All Tabs Are Working Fine, Check Again… 🙂
Yes my mistake
You Rocks !!!
Thanks For Visiting..
Cant seem to get it to work in IE. It works great in FireFox, Chrome and Safari but does not show up in IE
As Describe In Features, It’s CSS-3, Can’t Work On IE…
yes..
100% work..
thanks..
You Are Welcome And Thanks For Using…
doesn’t work with IE ?!
It’s Based On CSS3 So It Will Not Work On IE.
I am using your tabs everything is going on fab.
But there is a problem these tabs are getting hide by the flash of pictures on my side
means the hover effect is working but the tabs are getting hidden below the image
Can I Dee Your URL? Where This Is Happening…
ok actually mine website is not live by now.. i am actually using a html made flash of images and the buttons are getting hidden below them on that page .
I am going to make the site live on 10 march and i am now using your’s ribbon buttons of fb and others.Dat are also amazing..
i will post the url with these slide out’s on 9th march evening for you to see it.ok.
and here’s one compliment for you ->
i am really amazed from your work i visit your site dialy atleast times .
really hats off for your work.
you rock bro .. 🙂 🙂
Really Thanks For Appreation As You Are Pur Regular Visitor, Feel Free To Ask Any Problem. Welcome Here Again, Waiting For Your Site And Thanks For Using Our Others Widget…
Dear twitter Box is empty .how to fix it? plz
Since Twitter Upgrade Its API So Old Twitter FanBox Isn’t Working. Check Out The Below Article And Get The Latest Working Twitter Fanbox And Replace With This Twitter FanBox Code.
New Twitter Followers/FanBox Widget With Faces For Blog And Website