Stylish CSSed EXE-Fixed Footer Bar With Show/Hide Button

This Article Was Live On July 10th, 2012 And So Far Have: 12 Comments...
Last Updated on June 22nd, 2014

Since a few days ago, i was trying to make some widget like this that will remain as popup but not full worked as popup, It is not a page blocker as usually pop-ups are, you can use page without closing it. Some pop-ups provide Subscription box but they are useless because until visitor will not subscribe your E-Mail until they judge that Is You Providing Worthy Content? so for this kind of error here is the ans because here is the popup footer which have Close/Hide button and did not blocked your page, If visitor visits your page he can read your article without closing it or if he want to close he can do it and after reading he have full right to open again the subscription box with one click and will subscribe your E-Mail as well as social networks.
In this Stylish CSSed EXE-Fixed Footer Bar With Show/Hide Button there is no JavaScript Or J-Query even Show/Hide function is CSSed so there is no need to worry about page load time and SEO. It is quick to load and easy to load and easy to navigate and also will worked with all browsers like IE-7+ and other major browsers.Therer are many other features so first see the list under Features title before proceeding.

CLICK HERE TO SEE DEMO

Features:
1.) It Will Scroll All Over The Blog And Site.
2.) POP UP Style.
3.) Biggest Social Networks Link.

4.) FeedBurner Subscription Form Embedded.

5.) Stylish And Awesome Effect On Social Network Flags On Hovering.

6.) A Big Space For Your Content With Full Layered PSD File Included.

7.) Full CSSed And Without JavaScript And J-Query.

8.) Show And Hide Function Is Also CSSed.

9.) Quick Quick Quick To Load And Easy To Install.

10) Simple, Awesome, Stylish And Beautiful Code With Design.

11.) It Will Increase Your Social Fans And Followers With E-Mail Readers.

12.) It Will Nor t Embraced Your Visitor Because It Is Not Like A POPUP.
13.) Worked With All Major Browsers Like IE-7+ And Others Too.
14.) Full Visitor Optimizes.
15.) It Will Did Not Block Your Page.

Recommended For You:

Reasons Why Run Of The Mill Programmers Continue To Get Hired

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.

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.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. -->
<style type="text/css">
/***********************************************
* EXE-Fixed Footer- © EXEIdeas (www.exeideas.com)
* This notice must stay intact for use.
* Visit https://www.exeideas.com/ for full source code.
***********************************************/
#exefixedfootermain {width:100%; height:100px; position:fixed; bottom:0%; left:0%;}
 #exefixedfooterdiv {border-top: 3px solid #a0a0a0; background-image: url(https://lh3.googleusercontent.com/-0JjFbpwN5fY/T_ptQCicRUI/AAAAAAAACms/YCZIn3BupKg/s48/exe-footer-background.png); overflow:none; width:100%; height:100px; position:fixed; bottom:0%; left:0%;}
#exefixedfooterhide{position: absolute;bottom: 100px;right: 5px;width: 30px;height: 25px;cursor:pointer;background-image: url(https://lh3.googleusercontent.com/-0JjFbpwN5fY/T_ptQCicRUI/AAAAAAAACms/YCZIn3BupKg/s48/exe-footer-background.png);padding-top:5px;border-top: 3px solid #a0a09e; border-left: 3px solid #a0a09e; border-right: 3px solid #a0a09e; border-top-right-radius:5px;border-top-left-radius:5px;} 
 #exefixedfootershow{position: absolute;bottom: 0px;right: 5px;width: 30px;height: 25px;cursor:pointer;background-image: url(https://lh3.googleusercontent.com/-0JjFbpwN5fY/T_ptQCicRUI/AAAAAAAACms/YCZIn3BupKg/s48/exe-footer-background.png);padding-top:5px;border-top: 3px solid #a0a09e; border-left: 3px solid #a0a09e; border-right: 3px solid #a0a09e; border-top-right-radius:5px;border-top-left-radius:5px;}
.exefixedfooterdownarrow {width: 0; height: 0; border-left: 10px solid transparent;border-right: 10px solid transparent; border-top: 10px solid #eeff00;}
.exefixedfooteruparrow {width: 0; height: 0; border-left: 10px solid transparent;border-right: 10px solid transparent; border-bottom: 10px solid #eeff00;}
.exefixedfooterblockarrow {width: 8px; height: 10px; background-color: #eeff00;}
#exefixedfootersocial {position: absolute;bottom: 70px;right: 5px;width: 280px;height: 30px;float: right;}
#exefixedfootersocialicon {position: absolute;bottom: -20px;right: 5px;width: 290px;height: 64px;float: right;}
#exefixedfootersocialicon img{border: 0px;float: left;-webkit-transition: margin 0.2s ease-out;-moz-transition: margin 0.2s ease-out;-o-transition: margin 0.2s ease-out;}
#exefixedfootersocialicon img:hover {margin-top:-10px;transform: rotate(-25deg);-webkit-transform: rotate(-25deg);-moz-transform: rotate(-25deg);transition: transform 0.2s ease-out;-webkit-transition: -webkit-transform 0.2s ease-out;-moz-transition: -moz-transform 0.2s ease-out;}
#exefixedfooteremailsubscribe {position: absolute;top: 10px;left: 420px;width: 242px;height: 90px;}
.exefixedfooteremailsubscribebox input.email{padding: 7px 10px 7px 10px;font-family: "Arial","Helvetica",sans-serif;width: 218px; font-size: 12px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.exefixedfooteremailsubscribebox input.subscribe{background-color: #FFCA00;padding:7px 28px;margin-left:0px;font-weight:bold;font-size:12px;cursor:pointer;font-family: "Arial","Helvetica",sans-serif;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; 
background: #f1e767; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxZTc2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWI2NDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #f1e767 0%, #feb645 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1e767), color-stop(100%,#feb645)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f1e767 0%,#feb645 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f1e767 0%,#feb645 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f1e767 0%,#feb645 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f1e767 0%,#feb645 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=0 ); /* IE6-8 */
}
.exefixedfooteremailsubscribebox input.subscribe:hover{background-color: #eeff00; 
background: #feb645; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlYjY0NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMWU3NjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #feb645 0%, #f1e767 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feb645), color-stop(100%,#f1e767)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #feb645 0%,#f1e767 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #feb645 0%,#f1e767 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #feb645 0%,#f1e767 100%); /* IE10+ */
background: linear-gradient(to bottom,  #feb645 0%,#f1e767 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feb645', endColorstr='#f1e767',GradientType=0 ); /* IE6-8 */
}
</style>
<!--[if IE]>
<style>
.exefixedfooteremailsubscribebox input.subscribe{width:243px;}
</style>
<![endif]-->
<!--[if gte IE 9]>
<style type="text/css">
.gradient {filter: none;}
</style>
<![endif]-->
<div id="exefixedfootermain" >
<center id="exefixedfootershow" onmouseup="document.getElementById('exefixedfooterdiv').style.display='block'"><div class="exefixedfooteruparrow"></div><div class="exefixedfooterblockarrow"></div></center>
<div id="exefixedfooterdiv" >
<center id="exefixedfooterhide" onmouseup="document.getElementById('exefixedfooterdiv').style.display='none'"><div class="exefixedfooterblockarrow"></div><div class="exefixedfooterdownarrow"></div></center>
<img src="https://lh6.googleusercontent.com/-mNBC58lHwQY/T_ptQKiXtpI/AAAAAAAACmo/lAeEPvGgqLo/s420/Stylish-CSSed%2520EXE-Fixed-Footer-Bar%2520With-ShowHide-Button.png" height="100px" width="420px" title="Subscribe Our E-Mails And Get Our Next Hottest Article Directile Into Your Inbox." alt="EXE-Fixed Footer"/>
<div id="exefixedfooteremailsubscribe"> 
<div class="exefixedfooteremailsubscribebox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=exefixedfootersocialicon', 'popupwindow', 'scrollbars=yes,width=600,height=600');return true">
<input class="email" type="text" id="email" name="email" value="Enter Your Email Here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" /> 
<input type="hidden" value="EXEIdeas" name="uri" />
<input type="hidden" name="loc" value="en_US" /><br />
<input class="subscribe" name="commit" type="submit" value="Subscribe Our News Letter Now" />
</form>
</div>
<center style="color:#fff; font-size:10px; ">E-Mail Will Be Delivered By FeedBurner.</center>
</div>
<div id="exefixedfootersocial">
<center style="color:#eeff00;font-size:36px;font-style:italic;">Find Us On...!!!</center>
</div>
<div id="exefixedfootersocialicon">
<a href="https://www.facebook.com/EXEIdeas2010"><img src="https://lh6.googleusercontent.com/-NGikSRqIb04/T_ptQCXD3fI/AAAAAAAACmk/r_kstXxsfpw/s48/exe-facebook.png" height="48px" width="48px" title="Like Us On Facebook" alt="Image"></a>
<a href="https://twitter.com/EXEIdeas"><img src="https://lh6.googleusercontent.com/-r-IyrkrRhj4/T_ptRgJFjWI/AAAAAAAACnA/yhIG0T4QbKo/s48/exe-twitter.png" height="48px" width="48px" title="Follow Me On Twitter" alt="Image"></a>
<a href="https://plus.google.com/102256859586166648016"><img src="https://lh3.googleusercontent.com/-0TVIOKq_C4E/T_ptQxphQxI/AAAAAAAACmw/XnTSdn-4wuo/s48/exe-google.png" height="48px" width="48px" title="Add Us To Your Circle" alt="Image"></a>
<a href="http://www.youtube.com/EXEIdeas"><img src="https://lh6.googleusercontent.com/-4VvmB4qGdWs/T_ptSXReS3I/AAAAAAAACnU/SCi27wjtdTM/s48/exe-youtube.png" height="48px" width="48px" title="Subscribe Us On YouTube" alt="Image"></a>
<a href="http://pk.linkedin.com/in/exeideas"><img src="https://lh5.googleusercontent.com/-PmTaKcSHu_8/T_ptRD6WbLI/AAAAAAAACm8/xL_1mQTeJk8/s48/exe-linkedin.png" height="48px" width="48px" title="Join Me On LinkedIn" alt="Image"></a>
<a href="http://feeds.feedburner.com/EXEIdeas"><img src="https://lh3.googleusercontent.com/-U4auSg9SWMk/T_ptRXrPdtI/AAAAAAAACm4/W_jd15SnB1s/s48/exe-rss.png" height="48px" width="48px" title="Subscribe Our RSS" alt="Image"></a>
</div>
</div>
</div>
<!-- This Is A CopyRight Code.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.) Download The PSD File From The Given Link, Edit It And Upload It To Your Server And Change That Link With Purple Highlighted Link In The Above Code Without Changing Width And Height.
2.) Change Red Text With Your FeedBurner ID.
3.) Change All Blue Links With Your Data.

4.) Save And Done.
5.) For More Customization, Feel Free To Ask.

Recommended For You:

Latest/Recent Blog Posts Title List For Blogger/Blogspot

Download PSD File Here

12 Responses to “Stylish CSSed EXE-Fixed Footer Bar With Show/Hide Button”

Sreedhar Jeshurun says:

July 23, 2012 at 3:44 PM

HI! Nice widget but I want the auto hide button to appear on the right side of he screen as I have multi social wdget hidig this auto hide button.Also want to increase the height from the bottom as I have wibiya toolbar which I don’t want to lose.How I can change the 4 points in what we provide which suits my blog purpose and content.Also how to change the background color of the bar to red color.
Thanks & Regards!
Sreedhar

EXEIdeas says:

July 24, 2012 at 6:01 AM

For Increasing Height, Change “bottom:0%” To “bottom:30px” All In The Above Code.
For Red Color, Change “background-image: url(https://lh3.googleusercontent.com/-0JjFbpwN5fY/T_ptQCicRUI/AAAAAAAACms/YCZIn3BupKg/s48/exe-footer-background.png);” To “background-color: red;” All In The Above Code.
Please Tell Me Again Your First Prob, Do You Want First Hide The Show On Click?

Sreedhar Jeshurun says:

July 24, 2012 at 2:44 PM

Thank you!Yes I want the Auto hide button to appear on the left side of the screen.

- EXEIdeas says:
  
  July 25, 2012 at 6:03 AM
  
  It’s A Fixed Bottom Bar, So All The Option Are Linked With Bottom, Wait For My Next Article For Left Show/Hide Bar.
abhinav Sharma says:

October 8, 2012 at 4:19 PM

when i add this widget in template then it gives the error. the error is (Error parsing XML, line 1821, column 256: The element type “img” must be terminated by the matching end-tag )
please help me

- EXEIdeas says:
  
  October 9, 2012 at 6:41 AM
  
  Code Updated…
Madan Mali says:

October 15, 2012 at 11:29 AM

how to cusomise “what we provide” list??? for my blog http://androtweet.blogspot.com

- EXEIdeas says:
  
  October 16, 2012 at 5:33 AM
  
  Download The PSD File, Edit It And Upload It On Your Pic Server Then Change The URL, It’s Done.
carpet cleaning San Antonio says:

December 15, 2012 at 11:36 PM

Thanks, I’ve just been searching for information approximately this topic for a long time and yours is the best I’ve came upon till now.

- EXEIdeas says:
  
  December 16, 2012 at 6:43 AM
  
  You Are Welcome To Be Here…
Katy dentist says:

December 15, 2012 at 11:59 PM

Hello.This article was extremely interesting, particularly since I was browsing for thoughts on this topic last Friday.

- EXEIdeas says:
  
  December 16, 2012 at 6:44 AM
  
  Thanks For Visiting Us…