If you would like to use the Blue Letter Bible's search capabilities from your own site, here are instructions on how to do it. Basically, we will teach you how to create a form like this (which you can then modify to suit your needs):

Putting our search tool on your site allows your users to search the Bible for passages of Scripture, for individual words or combinations of words, for phrases, and even by Strong's numbers. Searches turn up results using all of our available tools, linking your users' search requests to lexicons, concordances, a variety of reference works (e.g. Easton's Bible Dictionary and the International Standard Bible Encyclopedia), and more.

Simple code means you can customize the look of our search box on your site however your imagination (and technical abilities) will allow.

Introduction

Step 1 - The Basics

Step 2 - Determining Translation

Step 3 - Range

Installing our Bible search on your site will require a very basic understanding of HTML (e.g., how to insert our code into your website's code), but we'll take it slow. Probably, if you've got a website into which you plan on inserting these HTML snippets, you're already somewhat familiar with how HTML works. We'll presume you know where in your site's code you want to put the search box.

Step 1 - The Basics

We'll begin with the very simplest, most stripped-down version of our Bible search tool and move on from there. At its most basic level, we need just an input box and a submit button. Like so:

This simplified version will allow users to search the Bible but will not allow them to define which Bible translation they'd prefer to search and does not allow them to limit their search to a particular section of Scripture. Go ahead, try it out. The code you'll use for this is pretty simple. We'll show it now and break down each piece.

The first thing we'll look at is the <form> tag. Your search tool needs to be enclosed within the opening and closing <form> tags. For example:

Inside the opening <form> tag, we see two attributes. The first one, action, tells the tool where to send the information it gathers from the user. With our tool, we're sending your users' search terms to http://blb.org/search/preSearch.cfm for processing. For the second attribute, method, we use the term get. This helps our site process the information your users will be sending us.

So then, we begin with the form container like this:

Next, we will add in the <input> that will let users type in their search terms.

Our <input> here has two attributes, one that tells the browser what kind of input it's looking at and one that attaches a name to the particular information that the browser will send along to be processed. For the type, we specify text. This means that the user will get a single line to type information into. For name, we use Criteria. This is the name that our program will recognize. If you change this name, the search tool won't work.

If we were to leave our code at this stage and put in on a website, it would liook like this:

It's perfectly usable in this form. You can type in a search term, hit your ENTER key, and the search will work out just fine; but a lot of us are used to seeing a submit button next to form fields, so some users might not know what to do next. So, to help them out, we can add a submit button to the code just below the <input> we just added. That will make our code look like this:

Using an <input> and giving it an attribute of type="submit" will put a submit button into the mix. Just make sure your submit <input> is in between <form> and </form>. And then we have, as above:

Now depending on which browser you're viewing this in, the submit button will probably say something obnoxious like Submit Query. We can change that by adding a value attribute to the submit tag. Whatever value you give it, that is what will be displayed. So you can have a button that says Go! or Launch or Knowledge Awaits!. For our purposes though, Search might just be the best option. Here's how that will look in your code and then how it will display in your browser.

Step 2 - Determining Translation

If we want, now we can choose to have the search use a particular translation. This is useful for if our users are strong proponents of a single translation and will always want to search that particular version. (For example, if your site is a church website and the pastor only uses the New American Standard Bible, so you'll want your congregants tracking with him as he preaches; or maybe you believe one particular translation has the greateast degree of fidelity to the original manuscripts.) We can force the translation by using an <input> tag with three attributes set as so: type="hidden" name="t" value="ABBREVIATION". The hidden type of input means that it will send our program information that the user will never see. For ABBREVIATION there, you would substitute one of our BLB-used Bible abbreviations. These are:

What this would look like in your code is as follows:

Now we've set the tool to search Young's Literal Translation, so you can test it out below:

---

And that's all good and fine but what if we want to add the ability for your site's users to choose for themselves which translation of the Bible they'd like to search. Here's an example of what that will look like. You can even select what the default translation is going to be, in case you'd like to prompt users toward your favourite translation.

KJV NKJV NLT NIV ESV RVR60 NASB RSV ASV YLT DBY WEB HNV VUL

Here is the code from the previous version with the select box inserted.

Now this is only slightly more complex than what we did before. Here we are making use of the <select> tag. We put an opening one at the beginning of our dropdown code and a closing one at the end of our drop down code. All our selectable options will fall between these two tags. Like this:

And just like we did with our text input, we have to give our <select> tag a name so that our program will know how to process the choices your users' select—in this case, we use name="t".

Next we'll look at how to populate the drop down with a list of choices. We're going to be making use of the <option> tag for this. The basic format here will be to use <option> and give it a value attribute using the translation's abbreviation (for example, value="KJV"). This tag will be immediately followed by whatever text you want to use to identify the choice in the eyes of your user (the value we previously added was only for the program to see. In our case here, we've stuck to abbreviations for the dropdown as well, but we could have just as easily spelled out the translation names without damaging the program. Then we simply add a closing </option> and we're finished with that option line and ready move on to the next.

Very quickly, here is a select box with just four examples, so you can see how it works. I'll follow it with how that code will render in a browser.

King James New King James New Living New International

As well as providing a good example of how to use the <option> tag to add choices to a select box, this also demonstrates that you don't have to use all our available translations in your own site's dropdown. Say you have five favourites? Just use those five as your dropdown options.

As well, if you like, you can make certain a particular option is always the default translation by adding the selected attribute to the appropriate <option> tag. In the below example, we'll use this trick to make the New Living Translation our default.

KJV NKJV NLT NIV

Step 3 - Range

Determining a range for one's searches may not be the most common thing you'll want to do, but we support your desire to do it if you wish. Let's say you wanted to find all the instances of the word war (and its related terms) in the New Testament, you could do that with our range options. Clicking Search with the settings used below will perform that very task.

KJV NKJV NLT NIV ESV RVR60 NASB RSV ASV YLT DBY WEB HNV VUL

Range Options:

e.g. Gen;Psa-Mal;Rom 3-9

In order to add the ranging option, we'll have to add another line or two to our search tool's size as well as a fair amount of code. So let's take a look:

So the first thing you'll notice is that I've put the Range options in a new <p> tag. This isn't necessary, strictly speaking, but it makes for a little bit better formating. After that, we've included the emboldened text, Range Options, followed by a line break. Next is the <input> tag. For this one we only need two attributes (though we can add more attributes to to customize the feel later). So, the two attributes and the values we'll give them: type="text" (tells the <input> tag to display as a text box) and name="cscs" (sends the information to the Blue Letter Bible program in a way that the program can use).

The text on the next line is just some examples for your users to help them understand how to use the Range option.

This code will display like this:

Now we can go with a couple other options too, especially if you want to drop the Range Option idnetifier and the example text and fit everything on one line. Let's look at the following additions/changes:

As you can see, we've moved the range <input> up before the Search button. This will stick it between the Bible version dropdown and the Search button when we view the page in a browser.

Of the four new attributes, two are actual attributes and two are javascript commands. The first attribute we'll look at is title. This is pretty similar to the example text we used previously, though more detailed. With the title text in place, users will see this text when they hover their mouse over the range input box.

The other three, value, onFocus, and onBlur all work together. These make it so the Range Option input says "Optional Verse Range" until a user clicks in it to enter a range. If the user enters a range, their range stays in the box; if the user doesn't enter a range, the words "Optional Verse Range" will return when the users clicks outside the box.

Lastly, we'll need to add a bit of code to the <form> tag so that if someone elects not to enter an Optional Verse Range, the program won't think that Optional Verse Range is actually the range they've chosen. That addition looks like this: onSubmit="if(this.cscs.value=='Optional Verse Range') this.cscs.value='';"

This code then will create a search feature that looks something like this:

KJV NKJV NLT NIV ESV RVR60 NASB RSV ASV YLT DBY WEB HNV VUL

The one thing to make certain of is that you remove the line breaks between "Optional" and "Verse" in both the onFocus and onBlur javascript attributes. If you don't, the words "Optional Verse Range" will not disappear when you click in that box.