The Earth is the Lord's,
and the fulness thereof;
www.Christ.com
Bible Verse of the Day
The Bible Verse of the Day is a free app/widget that loads the daily verse on your own website. Help spread the Word of God with a daily verse on your own site.
Christian Webservants:
Install the Bible Verse of the Day on Your Web Site!
Free: Bible Verse of the Day
Put it on Your Website!
Help Spread the WORD
The Bible Verse of the Day is a free short passage (about 1-4 verses max) in the KJV, NASB, and NIV translations. The Bible Verse of the Day is intended for use on actual websites or home pages (this is NOT a daily email message)..
Remember, To Use This Service: You Need A Web Site, Not Just E-Mail
It takes only a few minutes to install the Bible Verse of the Day on your site (just a few lines of code and an optional small graphic image for the basic installation)!
Installation Instructions:
We have a few suggested formats for the verse, but feel free to use any formatting or colors you feel appropriate for your site. Some users don't want the graphic version, or have problems installing the Bible image, so we have both a text-only version and a graphic version with the Bible image. Some examples are below:
Graphics Version
Text-Only Version
Before launching into a detailed description, you might want to look at the following simple example page: (Be sure to look at the source code for the page)
Programming Tip:
The Only difference in coding between the two versions (graphics version, text-only version) is that the graphic version uses the variable "votdtext" in the document.write statement, while the Text-Only version uses the variable "votd1".
The remainder of this page provides the details for installation.
HTML Requirements:
A small section of HTML should be placed in the code for your web page to initialize the script, download the verse, and print the verse on your page. The code you need to insert is in red. (older versions of the code are fine, and don't need to be changed. The new code is just easier to read)
This example places the verse text in a "<div>" container with yellow background and black text.
Example code:
<html>
<head>
<title>.... your title goes hear</title> other stuff...
</head>
<body>
... this is where your main web page HTML goes...
... insert the bible votd code (in red) where you want the verse to show up on your page ...
<script type="text/javascript">
var votdtext;
votdtext = null;
</script>
<script type="text/javascript" src="http://votd.Christ.com/biblevotd/votd-kjv.js">
</script>
<script type="text/javascript">
if (votdtext != null) {
bordervars = 'border-width:3px; border-color:#c0c0c0; border-style:ridge; ';
textvars = 'color:#000000; font-size:15px; text-align:left; ';
containervars = 'background-color:#ffffcc; margin:0 auto; padding:3px; padding-left:5px; width:300px; ';
document.write('<div style="' + bordervars + textvars + containervars + '">' + votdtext + '<' + '/div>');
}
</script>
The above code is used to load the daily verse from the KJV translation into the browser's memory (it is stored in a variable called "votdtext" if you are curious). We have three major translations available for use (KJV, NIV, NASB). Note that the only difference in code among the Bible translation versions is the name of the JavaScript file name. For example, use votd-kjv.js for the KJV version, and votd-niv.js for the NIV version. Replace the above code with the code below to get other translations. The only difference between the three versions is the verse file:
To complete the installation, you may wish to transfer one of the images at the bottom of this page to your website. When you upload the image be sure to name the image "biblevotd.gif". This image file must be in the same directory on your server that you use for your web page (the page containing the Bible Verse of the Day). A more detailed discussion of images is available at the end of this page.
Verse Display Options:
In this section we give a few suggestions for HTML to embed the verse in box-like containers with colored backgrounds and fonts. Feel free to change colors, fonts, or even eliminate the containers completely. Some examples use box containers wrapped around the entire script, while other examples use a "<div>" box container that is written inside the "document.write" section of code to allow for design options.
Note that the code inside the document.write(...) section is ALL ON ONE LINE. This is one of the most common errors in JavaScript. When you copy the code into your page, make sure that there are no carriage returns or line feeds in this "document.write" section. As a convenience, we have put this section of JavaScript inside a text box to make it easier to copy and paste.
Examples:
Example of Verse Text, No Image, Yellow Background,
"DIV" Container Around Entire Script
Set border color to #c0c0c0; or light gray. Choose any value between #000000 (black) and #ffffff (white)
border-style:ridge;
Set border style to "ridge" which gives a 3-d appearance. Do a search for other values of border-style, like "solid" and others.
Container Properties:
background-color:#ffffcc;
Set the background color of the container (box) to #ffffcc or light yellow.
margin:0 auto;
Set the margin around the container to 0 (zero), and center it on page (auto).
padding:3px;
Set default padding between border edge and text to 3px, or any value greater than or equal to zero.
padding-left:5px;
Set padding between the Left border edge and text to 5px, a bit larger than default to make it easier to read.
width:300px;
Set the width of the container to 300px; or pixels.
Text Properties:
color:#000000;
Set the text color to #000000 or black. Any color between #000000 and #ffffff is ok.
font-size:15px;
Set the font size to 15px or 15 pixels.
text-align:left;
Align the text on the left. Another popular option is to center the text with "text-align:center;".
Cascading Style Sheet (CSS) Class Options:
While the text size and color can be easily changed using standard HTML tags and style sheets, the image of the Bible has a special Class name associated with it to allow sizing. The image has an embedded class name of "christcombiblevotdimg". The default image size in pixels is height=65px width=200px. You can resize this using a <style> section in the <head> section of your page. Below we give a style section that will reduce the size by 25%:
Example code:
<html>
<head>
<style>
img.christcombiblevotdimg {height: 48px; width: 150px}
</style>
<title>.... your title goes hear</title> other stuff...
</head>
<body>
... this is where your main web page HTML goes...
... insert the bible votd code (in red) where you want the verse to show up on your page ...
<script type="text/javascript">
var votdtext;
votdtext = null;
</script>
<script type="text/javascript" src="http://votd.Christ.com/biblevotd/votd-kjv.js">
</script>
<script type="text/javascript">
if (votdtext != null) {
bordervars = 'border-width:3px; border-color:#c0c0c0; border-style:ridge; ';
textvars = 'color:#000000; font-size:15px; text-align:left; ';
containervars = 'background-color:#ffffcc; margin:0 auto; padding:3px; padding-left:5px; width:300px; ';
document.write('<div style="' + bordervars + textvars + containervars + '">' + votdtext + '<' + '/div>');
}
</script>
Code Validation: Tech Details
(This section is a bit "techie", and may be skipped)
It is important to follow coding guidelines and standards when creating a web page. One of the tools to test pages for properly coded HTML is the "validator" provided by the World Wide Web Consortium (W3C). It allows developers to enter the URL of a page and have it checked. When I use this tool I choose "Show Source", and "Verbose Output" under "Options":
Javascript (and other dynamic code) is notorious for causing problems with the W3C Validator. If you look at the code listings for this page, you will see sections in the "document.write" portion that split perfectly valid html tags into smaller portions, so the Validator doesn't see the code as an actual tag. For busy complex pages this is a good idea, and allows you to check other parts of your page without getting spurious error messages from the validator:
Changes to help validation:
document.write(...stuff... + '</div>') ==> document.write(...stuff... + '<' + '/div>')
Notice how I changed '</div>' by splitting it up into two parts added together: '<' + '/div>'
This split turns the code into something the Validator can check. IMPORTANT: The code is fine and perfectly valid HTML without the split, but the split makes it pass validation by the checker. Developers need to remember this little trick when validating using the W3C checker.
One further note: This page is using the "4.01 Transitional" DOCTYPE at the start of the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
I use 4.01 Transitional since I am (like most developers) slowly migrating from 4.01 to 5.0. This page validates fine under 5.0, and shows a few errors (due to Google Ads) under 4.01.
Graphics Options:
Below we have a collection of different colored images for the Bible Verse of the Day. Feel free to copy any image that fits with your webpage. Once you copy the image, be sure it is named biblevotd.gif on your web server, even though it has a different name below!
Transparent Background:
Note: The second and third images in the first row (transparent background with white or yellow letters) are shown in black table cells so the white and yellow letters can be seen. The transparent background images, including the ones with white and yellow letters, can be used with any background, including gif image backgrounds.
