Integrate the Church Site Tips into to your site

You can easily integrate our tips page content into your site by copy/pasting some code onto your page. It is particularly suitable for church-related websites, such as church directories and pastors’ resources. It will blend seamlessly into your page, and will draw additional visitors to your site. The ‘Tell-a-friend’ and news-release links allow your site visitors to tell others about it, and their recommendation messages will contain your own URL. (This content is also available to reproduce in printed publications.)

Here are some of the best sites using this resource – we can add yours too. So please tell us when you have added this resource. Current users include:
Church123 | Cybermissions | FishtheNet | WordSeekers

Instructions and code

Don’t be worried, these instructions are easier than they look! If you have problems, ask us for help. There are three ways of doing it.

Simplest method: javascript and CSS

This is how it will look on your site. Just copy/paste [help] the following block of code into the location on your page where you wish the topic to appear. Add your normal page header and menu, include a headline and introduction to the topic, and your normal footer information at the end of the page. Note: for the external link tooltips to work correctly in Internet Explorer, your page needs a valid doctype at the very top, before anything else, such as: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> and this meta tag just below the head:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Without these, some browsers will operate in ‘quirks mode’ and not position the information boxes correctly.

<link rel="stylesheet" href="" media="screen" type="text/css" />
<link rel="stylesheet" type="text/css" href="" media="print" />
<style type="text/css" media="screen">
@import "";
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

There are perhaps 200,000 English-language church websites. But sadly, the vast majority have been written only with Christians in mind. Yet it is possible to design, or transform, a site, such that it can be an effective outreach into the community.</p>
<a href="">Tips for making effective church websites</a>
<div id="churchpop"><script language="JavaScript" src="" type="text/javascript">

And that’s it! You have a new page of content. This code will draw down the latest Church Tips content into your page.

If you want to make your page very printer-friendly, enclose other page elements such as menu, footer etc, which need not appear when printed, within class="hide" tags. (If these items already have a class, you can add two class items together thus: class="menu hide".) This, in conjunction with our own provided print style, will make the Tips page print correctly for the many people who wish to keep it for reference.

  • Alternate method: an iframe insert

    This places the tips content seamlessly into your page within an iframe. The advantage is that it works even for your site visitors with Javascript disabled. Instructions here.

  • Javascript and CSS with control over your page appearance

    This method is explained below. It gives you more options and control over page appearance than method a), but will take longer to set up.

    1. Create a new page in your website, with an easy short file name such as ‘tips’, ‘ideas’ or ‘church’ – not too long because it is printed in the custom ‘tell a friend’ email and news release. Link to it from your normal navigation system. Include your normal page elements – header, footer, navigation bar, etc. (Please don’t simple copy the article content onto a web-page: reasons and help.)

    2. Copy/paste (insert cursor, and drag down the box to highlight all the code) the following style code into the head of your page using a text editor or text-editing mode of an HTML editor. [Help]

      You can make changes to this CSS coding in your page head to adjust positions, color, etc. Values that you may particularly want to change are shown in red, with a mouse-hover tooltip explaining their use. You can adjust the CSS to change the color size or other attributes of the h3 subheadings if you wish. For mixing your own colors with a code output use these color mixers: online | [] download.

      If you have an external style sheet link in your page head, leave it intact and add this extra CSS to your page head below the link to that sheet. (If your style sheet is set out in full in your page head, amalgamate the first “screen” code below with that existing code, and remove from the amalgamated code any duplicate values which are specified in the new code.) No changes are needed to your site-wide CSS sheet – the CSS below over-rides it on this page only.

      This code creates a right-hand margin for the mouseover popups. If you prefer a left-hand margin, or no margin, use the code offered in Point #3 instead.

      <style type="text/css" media="screen">
      body { font-family: verdana,helvetica,sans-serif,arial; margin:0px; padding-right:0px; }
      p.first:first-letter {font-family:serif; font-size:1.7em; color:gray; font-weight:bold; }
      .startcap {font-size:170%; font-family:serif; color:gray; font-weight:bold; }
      h3 { font-family: helvetica, sans-serif, arial; color: #8f7770; font-size: 140%; margin-bottom: 0.3em; margin-left:-1.8em; line-height:normal; }
      #webopedia { position:absolute; top:110px; right:0px; font-family:helvetica,arial,sans-serif; width:230px; margin:0px; background-color:#ffffb7; align:center; z-index:3; }
      li { margin-top: 0.3em; }
      #churchpop { border-right: 230px; #e5dfc5 solid; padding-right:10px; margin-left:20px; margin-top:0px; margin-right:0px; line-height:150%; z-index: 1; }
      div#churchpop a { color:blue; text-decoration:none; }
      div#churchpop a:hover {color:red; background:transparent; }
      div#churchpop a acronym { display:none; }
      div#churchpop a:hover span
      position:absolute; right:6px; margin-top: -100px;
      width: 200px !important; width: 200px; width/**/:/**/200px;
      margin-left:5px; padding:6px;
      color:black; background:#fbecc2; ; text-decoration:none; border:1px solid gray; -moz-border-radius:10px; filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#666666,strength=2; }
      .hiddenlinks { display: none; }
      #loadMessage {
      position: absolute;top:300px;right:50px;color:red;font-size:150%;

      <style type="text/css" media="print">
      h1 {margin-left: 3em; }
      div#webopedia { display: none; }
      li { margin-top: 0.6em; }
      .church { cursor:help; }>
      div#churchpop { width: auto;
      font-family: verdana,helvetica,sans-serif,arial;
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 0px;
      padding: 0px;
      border: 0px;
      float: none !important;
      color: black;
      background: transparent none;
      div#churchpop a span { position: relative; display: inline;
      color:black; font-weight: normal; text-decoration: none; background: transparent none;
      }, {
      color: black;
      background: transparent;
      font-weight: normal;
      text-decoration: none;
      .hiddenlinks { color: black; display: inline; background: transparent none; }
      .hide { display: none; }

      <script language="javascript" type="text/javascript">
      //Hide status bar msg II script- by
      //Visit JavaScript Kit ( for script
      //Credit must stay intact for use

      function hidestatus(){
      return true

      if (document.layers)
      document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT)

      <script language="javascript" type="text/javascript">
      var tid;
      function showContent () {
      if (document.all) { = 'hidden'; = 'visible';
      else if (document.getElementById) { = 'hidden';
      document.getElementById('churchpop').style.visibility = 'visible';

      <script language="javascript" type="text/javascript">
      function setBookmark(url,str){
      if (document.all)window.external.AddFavorite(url,str);
      else alert('Please press CTRL and D (at the same time) to add a bookmark for Church Site Tips');

    3. Alternatives

      You can make the mouseover text appear in the left-hand margin, or within the body of the text if you prefer. These options are better if your right margin is already in use for something else. The page will appear like this: left margin or text in body.

      To do this, you just change the values in the CSS line div#churchpop a acronym { position: .... Copy these ready-made changes from here:
      Left margin
      No margin

    4. If you wish to use the headline and information box we have, which includes the offer of a search box to help with understanding technical terms, add this coding to your page body and adjust the wording to your own needs. These should be added AFTER the opening
      <div id="churchpop"> in the code shown in point 4) so that the left and right hand margins match the main content. Alternatively, write your own headline and introduction at this point.

      <h1>70+ tips for effective church sites</h1>
      <blockquote style="line-height:1.3em;">
      <p class="first">
      &#8220;A church is the only organization that exists primarily for the benefit of non-members<acronym class="startcap">&#8221;</acronym>
      <acronym style="float:right;font-style:italic;">– William Temple</acronym>
      <br style="clear: both;">
      <p class="first">
      &#8220;Week in, week out, more visitors turn up at our church on a Sunday because of the website, than anything else<acronym class="startcap">&#8221;</acronym>
      <acronym style="float:right;font-style:italic;">– King&#8217;s Church, Kingston UK: a site using these principles</acronym>
      <br style="clear: both;">
      <acronym style="font-size:80%;border:1px solid #9f141a;width:95%;display:block;padding:5px;line-height:1.3em;"> This page is primarily about strategy. However it does include a few technical terms when discussing implementation. If you are not sure of any meanings, use the Webopedia search box at the top right of the <acronym class="hiddenlinks">online version of this </acronym>page. <br><br> The &#8216;More&#8217; hover-link displays more information in the right margin. An &#8216;Extra&#8217; green link, when shown, opens up a new frame with detailed information on this topic. If you have questions, please email us.</acronym>

      <div id="webopedia">
      <form style="margin:0px;padding:5px 0px 10px 10px;border:2px solid silver;background-color:#ffffb7;" method="post" action="" target="popup" onsubmit="var'blank.php', 'popup', 'width=700,height=400,top=0,left=0,resizable,scrollbars'); aWin.focus();" style="margin:0px;padding:0px;">
      <acronym style="color:#9f141a;"><b>What&#8217;s that mean?</b></acronym><br><acronym style="font-size:80&;">Find information on<br>computer-related terms:</acronym><br><input class="text" style="width:165px;height:1.5em;" name="Term" maxlength="512" type="text"><input type="submit" name="submit" class="button" value="go" onmouseover="this.className='button1'" onmouseout="this.className='button'">

    5. Copy/paste the following code into the place on your page where you wish the content to appear. Make sure the code which includes the link (i.e. up to </script>) is all on one line.

      <div id="churchpop">
      [Insert your own introduction, or our introductory words from the previous scrollable code block, here. We do recommend some explanation of how the ‘More’ and ‘Extra’ links work. Delete this red wording, of course!]
      <script language="JavaScript" src="" type="text/javascript">
      <a href="">Tips for making effective church websites</a>
      There are perhaps 200,000 English-language church websites. But sadly, the vast majority have been written only with Christians in mind. Yet it is possible to design, or transform, a site, such that it can be an effective outreach into the community.

      [Add your own footer wording here, before the closing div. If you make this section quite deep, you will ensure there is room for the final tip to display in the colored right-hand margin. Of course, you should delete this explanatory paragraph on your finished page!]

    6. We also recommend the use of a ‘page loading’ advice for users on a slow dialup connection.

      Change the body tag, plus the following code immediately after it, to:

      <body onload="showContent()">
      <div id="loadMessage">Loading </div>
      <script language="javascript" type="text/javascript">
      if (document.all)
        tid = setInterval('document.all.loadMessage.innerText += "."', 1000);
      else if (document.getElementById) {
        var l = document.getElementById('loadMessage');
        tid = setInterval('l.firstChild.nodeValue += "."', 1000);

    7. If your Tips page is called up within a frame, we highly recommend some extra code to ensure that people arriving directly at the page via the ‘tell a friend’ link, news release, or a search engine, can continue to the rest of your site. Alternatively, you can achieve the same thing with a simple link to your main frame.

    8. If your page is of fixed pixel width, the mouseover text in the right margin may not display well at different screen resolutions. The best way to resolve this is to allow your page to be ‘liquid’ so that it flows into either 800 x 600 or 1024 x 768 resolutions. Do this by making table widths 100% rather than fixed width, and by linking to any large header graphic as a no-repeat background so that it cannot force the page to need scrollbars at 800 x 600.

    9. You may need to play around with CSS to get things looking nice. It is possible that some page structures may not be easily compatible with this insert. You may need to adjust the positioning of any page footer or header you have, using CSS margin-left and margin-right attributes, to get the best appearance. Please ask us for help if needed.

    10. To make the page appear nice when printed (which webmasters may well wish to do), please exclude all other elements on your page from being printed, by enclosing them in <div class="hide">. Or if they have an existing DIV class name, add to the CSS media="print" section (the second part, below the media="screen") in your header, after the appropriate DIV name, e.g.:
      .footer { display: none; }
      Then test your page by printing it. Only the tips should appear, without your own navigation or other page elements.

    11. If, for instance, you are a church CMS template provider, we can add or amend content in Point #45/46, which will appear only on your syndicated page. If you have some other area of expertise or other service that relates to church sites, we can also include this at the appropriate point in the list so that appears in your own version for your particular readers.

    12. Please give your feedback, with problems, comments and ideas for improvement.

    13. A PHP insert code (as an alternative to the Javascript insert) is also available to achieve the same thing – please apply for this if you would prefer it.

    14. You can also use any of our photos on your page; note they are too big for webpages in their current sizing, so download and resize for your needs.

    15. Our promise to you – offsite links will only include those which present a mainstream evangelical viewpoint, or an appropriate ethical secular page.
  • Worldwide total of web users: info icon More stats: World | Social networking

    Link here  Blog this/add to newsletters     Bookmark and Share Evangelism Day
    Add to
    your site?
    Printed from Internet Evangelism Day © Jul 2018
    Can be freely reproduced in print with attribution to
    Oops, Evangelism Day page formatting error! Click here to restore.
    FREE communication ebooks

    How Internet Evangelism Day can help YOUR church

    Free newsletter
    Please can you...
    Please share this page or about IE Day on
    – ready-made wording about this page
    Link  Blog