Add the Church Site Tips page to your site
The iframe method
You can easily add our tips page to 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 allows your site visitors to tell others about it, and their recommendation emails will contain your own URL. (This content is also available to reproduce in printed publications.)
We also offer an alternate method of insertion using Javascript/CSS. But the iframe method described below is simple, and just involves adding an iframe to your page which will automatically resize to fit its contents. It also has the advantage of working almost as well for users with Javascript disabled.
- 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.
- Copy/paste into this new page the code for this entire page from the text box below,
using a text editor or the text editing mode of your HTML editor.
- Use your normal CSS for the rest of your site, but though you may need
to adjust the values for left and right body margin and padding to less than normal, so
that the iframe extends to the edges of the page, if that is necessary within your page layout.
If you do this, you may then need to adjust margins or padding for header and footers.
But ensure that you use our own CSS specifications too.
- Create a page headline and introduction to the content. You can use similar wording to that
at the top of our Tips page.
- Ensure there is a navigation menu at the top or side of your page, or some other way for direct visitors
to access the rest of your site. You can also adjust the width of the iframe to less than 100%,
and position it to left or right of your page, so that you can insert your own left/right-hand
navigation menu or other margin content. The main body content will happily sit within
your own main page DIV and only expand to that width.
- This iframe method also allows you, if you wish, to link to this page using a Partner ID
which will place your name and URL on all pages of the IE Day site. All you need
to change in the code below would be the addition of
?partner=yourIDto the link within your iframe coding: more.
The code
Just copy/paste the entire code below into a new completely empty page (or copy different elements into your standard page template). Take care that you only highlight and copy text that is within this box. There are explanatory notes in red that you can hover for more information. Adjust the DOCTYPE and CHARSET to those you use on your site. Then customize it to your own requirements:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Your own title here</title>
<meta name="description" content="Add descriptive sentence or two here for benefit of search engines">
<style type="text/css" media="screen">
Further specific CSS for your page here
div#warning { display: none; }
</style>
<style type="text/css" media="print">
div#warning { display: block; color:black }
</style>
<noscript><style type="text/css">.iframe { height: 500em; }</style></noscript>
<script type="text/javascript">
/*******
This code is from Dynamic Web Coding at http://www.dyn-web.com/
See Terms of Use at http://www.dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
Of course, code can be placed in a separate JS file if you prefer
********/
function getDocHeight(doc) {
var docHt = 0, sh, oh;
if (doc.height) docHt = doc.height;
else if (doc.body) {
if (doc.body.scrollHeight) docHt = sh = doc.body.scrollHeight;
if (doc.body.offsetHeight) docHt = oh = doc.body.offsetHeight;
if (sh && oh) docHt = Math.max(sh, oh);
}
return docHt;
}
function setIframeHeight(iframeName) {
var iframeWin = window.frames[iframeName];
var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
if ( iframeEl && iframeWin ) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
if (docHt) iframeEl.style.height = docHt + 140 + "px";
}
}
function loadIframe(iframeName, url) {
if ( window.frames[iframeName] ) {
window.frames[iframeName].location = url;
return false;
}
else return true;
}
function call_print()
{ window.parent.ifrm.print(); }
</script>
</head>
<body>
Your page header/navigation here
<h1>Your choice of headline here</h1>
Your own introduction
<div id="warning">
<h3>Sorry! Printing error! To print these tips correctly, you must
click on the printer graphic at the end of the tips page</h3>
</div>
<img src="http://ied.gospelcom.net/atelltaleiframe.gif" width="1" height="1" border="0" alt="">
<iframe class="iframe" name="ifrm" id="ifrm" src="http://ied.gospelcom.net/churchtips-iframenomargin.php" scrolling="auto" frameborder="no" style="border:none;width:100%;margin:0 0 0 0;padding:0;">
<h3>Church Site Tips</h3>Ideas to make church sites reach into the community<br>
<a href="http://ied.gospelcom.net/church-site-tips.php">More</a>
</iframe>
<noframes>
Find out how to build church websites that are evangelistic: <a href="http://ied.gospelcom.net/church-site-tips.php">Church site tips</a>
</noframes>
Your optional page footer
<a name="end"></a>
</body>
</html>
Adding a print button
Because you cannot print the contents of an iframe by just pressing the browswer print button, it will help your site visitors if you add a print button in your page footer. If you wish to add this function, use the following code in your page footer (or anywhere else on the page):
<span onclick="call_print();"><img src="http://ied.gospelcom.net/images/printer.gif" style="vertical-align: text-bottom; cursor: help; margin-left: 8px; margin-top: 6px;" alt="printer graphic" title=" To print this printer-friendly page, click here " border="0" height="16" width="23"></span>
Alternate styles available
The code above will create mouseover text within the page. If you would like this mouseover content appear in the left or right margin of the page, look for the line of code on your page that starts<iframe class="iframe" and change the
page file name churchtips-iframenomargin.php to one of the file names shown below (click on link to view style):• pale brown left margin:
churchtips-iframeleftbrown.php• pale blue left margin:
churchtips-iframeleftblue.php• pale blue right margin:
churchtips-iframerightblue.php• pale brown right margin:
churchtips-iframe.php
In addition, we can add extra text in the page which is customized for your site, and will amend or amplify any of the numbered points to fit your own needs. Please write about this.
If your site has a framed structure, you can call up our page
http://ied.gospelcom.net/churchtips-iframenomargin.php within your main frame.
Top of page
