Footer SlideUp For Any Website and Any AutoResponder

Discussion in 'Web Design, HTML And CSS' started by shabbir, Jul 26, 2010.

  1. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    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.

    [​IMG]

    [​IMG]

    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:
    <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.
     

    Attached Files:

    coderzone and thottarayaswamy like this.
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
  3. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
  4. johnta

    johnta New Member

    Joined:
    Aug 30, 2010
    Messages:
    8
    Likes Received:
    0
    Trophy Points:
    0
    Home Page:
    http://waysofmakingextramoney.blogspot.com/
    How to vote for this great article, although it requires some design enhancement
     
  5. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Voting is now closed.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice