Home > Screen-by-Screen Help > Step 5: Manage Gallery > HTML tab > Custom HTML

Custom HTML

The ability to add custom HTML code directly into the program is a powerful feature. You can fully integrate with an existing site by pasting your site's code into the top entry field, monetize your site by adding Google AdWords, Yahoo ads or any other ads served to Web sites. You can also use this field to add HTML code for widgets, to add other formatted text, or whatever else you might want to include. 

For additional information, please also refer to the HTML Resources help page.

Full integration with an existing Web site

For full integration with an existing Web site, copy the HTML code for your Web site's top navigation and branding elements and paste it into the HTML.  When your gallery is generated, you Web site's header look and feel will be imported into your Web gallery.

Below is sample code for a large top Header. Themes are usually designed to provide an additional graphic (header.gif) that can be displayed in the background for this top Header. You can customize the text that appears in this Header, the color and size by editing the HTML code below before pasting it in the program.

<div STYLE="color: #666666; font-size: 30px; background-image: url(www.mydomain.com/header.gif); height: 86px; letter-spacing: 10px; line-height: 86px; font-family: Arial, Helvetica, sans-serif;">Your text here</div>

ATTENTION: If your HTML code contains references to an external file (e.g. an image file), please make sure you use absolute paths referencing the URL of where the file can be found online. Relative paths do not work since the code you enter will be placed in various gallery pages which reside in different locations in the gallery folder structure.

Displaying Google AdSense on your Web gallery

To use this feature:

• Sign up for Google AdSense at: https://www.google.com/adsense/
• You will receive a code snippet from Google
• Copy and paste that snippet into the correct entry field, depending on whether you want the ads to appear above or below the page

Test Google AdSense on your site

Cut and paste the following Google code snippet into the Google AdSense code field to test this feature in your Web gallery. You may want to paste the snippet into Word or Notepad to remove any formatting before you paste it into the code field.

<script type="text/javascript"><!--
google_ad_client = "pub-1935178089639399";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel ="";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Or a skinny long ad block with grey background:

<script type="text/javascript"><!--
google_ad_client = "pub-1935178089639399";
google_ad_width = 728;
google_ad_height = 15;
google_ad_format = "728x15_0ads_al";
google_ad_channel = "";
google_color_border = "CCCCCC";
google_color_bg = "CCCCCC";
google_color_link = "000000";
google_color_text = "333333";
google_color_url = "666666";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Learn more about Google AdSense

Google AdSense delivers relevant ads that are targeted to your site and your site content. To learn more about Google AdSense, go to http://www.google.com/services/adsense_tour/

Related topics

See also