Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Tutorials (http://www.go4expert.com/articles/web-design/)
-   -   Footer SlideUp For Any Website and Any AutoResponder (http://www.go4expert.com/articles/footer-slideup-website-autoresponder-t22813/)

shabbir 26Jul2010 15:54

Footer SlideUp For Any Website and Any AutoResponder
 
2 Attachment(s)
After AWeber, GetResponse and Feedburner SlideUp there has been so many requests for Slideup especially for Blogger and other Autoresponders and so here I come up with a general SlideUp HTML code that you can use for any any autoresponder with any CMS of your choice including static pages. As this is a general HTML code this would require some basic knowledge of HTML.

1. Style



Let us begin CSS. You can add the following to your existing CSS file or can to a new CSS file and link it.
Code:

div#footerform{ background:#6699CC; text-align:center; position:fixed; bottom:0; left:0; width:100%; height:46px; border-top:3px solid #AE670A; display:none; z-index: 10; }
div#footerform form { display:inline; }
div#footerform .formInputfooter { width:154px; height:20px; padding:4px 5px 0 25px; margin:1px; border:1px solid #aaa; text-align:left; color:#727272; vertical-align:middle; }
div#footerform .formInputSubmitfooter { height:26px; vertical-align:middle; }
div#footerform .tagline { font-size: 14px; font-weight: bold; font-family: arial; }
div#footerform .close { float:right; margin:4px 8px 0px 0px; }

Apart from the above CSS properties you can add the following. These are optional and if you know more about CSS use the following. It is not a requirement for the SlideUp to work.
Code:

div#footerform .formInputNamefooter { background:url(images/name.png) no-repeat; }
div#footerform .formInputEmailfooter { background:url(images/mail.png) no-repeat; }

If you have added the extra CSS styling you would need the following images which you can save and use them.

http://cache.g4estatic.com/footer-sl...mages/name.png

http://cache.g4estatic.com/footer-sl...mages/mail.png

Make sure you have class="formInputfooter formInputNamefooter" and class="formInputfooter formInputEmailfooter" styles applied to the name and email fields of your HTML code which we will generate in last step.

2. Scripts



We will need 3 JS files.
  • jquery-1.3.2.min.js - jQuery framework
  • jquery-cookie.js - jQuery Library for cookies
  • jquery-libs.js - jQuery libraries for Footer SlideUp created by me
Download them and upload them to your server using FTP.

After you upload the CSS and JS files to your server you will have to have the needed html code to link to the CSS and JS files. You can put the following code anywhere on the page but it should be at least just above the final HTML code that we will put in the next step.
Code:

<link rel="stylesheet" href="http://yourdomain.com/css/folder/path/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://yourdomain.com/js/folder/path/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://yourdomain/js/folder/path/jquery-cookie.js"></script>
<script type="text/javascript" src="http://yourdomain/js/folder/path/jquery-libs.js"></script>

If you are using existing CSS file to add the above CSS code you can avoid the first line. Remember to replace yourdomain.com with the correct path to the uploaded files.

3. HTML



The last and final thing thing we will do is the HTML. Generate the HTML code for your autoresponder and grab the HTML of it now.
HTML Code:

<div id="footerform">
        <div class="close">
                <div id="closefornow"> <a href="#" onclick="slidedown(); return false;">Close for now.</a></div>
            <div id="dontshowanymore"><a href="#" onclick="slidedown(); return false;">Never show again.</a></div>
        </div>
        <!-- Your Tag Line-->
        <div class="tagline">Subscribe By Email for Updates.</div>
        <!-- HTML Web Form TO be Replace -->
        <form method="post" action="" target="_new">
                <input type="text" name="name" class="formInputfooter formInputNamefooter" value="What is your first name?" size="20" />
                <input type="text" name="from" class="formInputfooter formInputEmailfooter" value="What is your email?" size="20" />
                <input type="submit" name="submit" class="formInputSubmitfooter" value="Subscribe Now !!!">
        </form>
        <!-- /HTML Web Form TO be Replace -->
</div>

Note that it is important that you customize the above html to add your fields from your HTML code that you want your user to subscribe to. You should insert your form html code between <!-- HTML Web Form TO be Replace --> and <!-- /HTML Web Form TO be Replace -->. If you are using extra CSS styling options do not miss to add class="formInputfooter formInputNamefooter" and class="formInputfooter formInputEmailfooter" to your name and email field.

Download the complete sample or check the Working Sample of the Code

If you have any issues implementing the above just share them in comments below and I will be more than happy to help.

shabbir 2Aug2010 10:56

Re: Footer SlideUp For Any Website and Any AutoResponder
 
Nominate this article for Article of the month - Jul 2010

shabbir 21Aug2010 16:18

Re: Footer SlideUp For Any Website and Any AutoResponder
 
Vote for this article for Article of the month - Jul 2010

johnta 1Sep2010 01:29

Re: Footer SlideUp For Any Website and Any AutoResponder
 
How to vote for this great article, although it requires some design enhancement

shabbir 1Sep2010 07:42

Re: Footer SlideUp For Any Website and Any AutoResponder
 
Quote:

Originally Posted by johnta (Post 72191)
How to vote for this great article, although it requires some design enhancement

Voting is now closed.


All times are GMT +5.5. The time now is 16:16.