Skip navigation
ndelcastillo
Currently Being Moderated

How can I create an ad strip?

Nov 16, 2012 7:52 PM

I want to create an ad strip at the top of every page of my website (over 300 pages) that can a have a linkable graphic placed in it. I am thinking of something that will take up 100% of the page width and approximately 60 pixels tall that will sit at the very top of the page if I have a promotion running. There are two issues I need to address:

 

1. I want to have a way to change the graphic and link on all pages simultaneously, in other words, I change the image and link in one place and it automatically changes it on all applicable pages.

 

2. I want to be able to easily hide it if I don't need it. In other words, if there is no current promotion, the space just disappears and the rest of the page content flows back up to the top of the page.

 

I sort of managed this by creating a div on every page that was attached to a specific external style sheet. When I needed it I placed a background image in the body of the CSS that contained the info and changed the height of the div to 60 pixels. When I didn't need it I removed the background image and set the height to 0 pixels. That worked pretty well, except I can't put a link in it since it is basically an empty div. I need something that I can place an a href in but still have it apply to hundreds of pages at once. I thought I did something similar several years ago using either templates, or editable regions, or something but I can't seem to do it now. Does anyone have any ideas?

 

Thanks!

 
Replies
  • Currently Being Moderated
    Nov 16, 2012 10:57 PM   in reply to ndelcastillo

    1. I want to have a way to change the graphic and link on all pages simultaneously, in other words, I change the image and link in one place and it automatically changes it on all applicable pages.

    Set it up as a Server Side Include (SSI).

    http://www.yourhtmlsource.com/sitemanagement/includes.html

     

     

    2. I want to be able to easily hide it if I don't need it. In other words, if there is no current promotion, the space just disappears and the rest of the page content flows back up to the top of the page.

    Again, easily done via a Server Side Include. Just upload an empty text file or one which contains just "<div></div>".

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 17, 2012 1:12 PM   in reply to John Waller

    #2 To hide it occasionally, use some inline CSS in the Server-side Include.

     

    <div style="display:none">

    Promotional content....

    </div>

     

    Or wrap the div inside HTML comments.

     

    <!--This is hidden from browsers

    <div>

    Promotional content...

    </div>

    -->

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 17, 2012 1:15 PM   in reply to Nancy O.

    That's an option but the content is still in the code and search engines will still find it.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 17, 2012 1:33 PM   in reply to John Waller

    John Waller wrote:

     

    That's an option but the content is still in the code and search engines will still find it.

    And Google might actually spank you for the "hidden" content ?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 17, 2012 1:43 PM   in reply to Ken Binney

    Good point.  However, Google won't spank you for HTML comments.  I use them all the time to turn things on/off.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 17, 2012 1:59 PM   in reply to Nancy O.

    Thanks Nancy, that surprises me...

    It presents such and opportunity for Webmaster SEO mischief

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 17, 2012 2:02 PM   in reply to Ken Binney

    And Google might actually spank you for the "hidden" content ?

    display: none divs are standard, legitimate CSS practice.

     

    Google spanks perceived blackhat techniques such as font color = background color and font-size: .001px;

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points