BLB Web Search Tool_abg欧博官网|登陆|游戏|

If you would like to use Blue Letter Bible's search capabilities from your own site, here are instructions on how to do it. We will teach you how to create a form, which you then can 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 for 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, 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

Installing our Bible search on your site will require a basic understanding of HTML (e.g., how to insert our code into your website's code), but we will take it slow. If you have a website and you are planning on inserting these HTML snippets, you should be already somewhat familiar with how HTML works.

Step 1 - The Basics

We will begin with the simplest, most basic version of our Bible search tool, an input box and a submit button, and move on from there:

This simplified version will allow users to search the Bible but will not allow them to define which Bible translation they would prefer to search and does not allow them to limit their search to a particular section of Scripture. Let us break down each piece.

</form>

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

<form>

...

Search Tool Inputs Go Here

...

</form>

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, your users' search terms are sent to https://www.blueletterbible.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 send us.

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

</form>

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

</form>

Our <input> here has two attributes, one that tells the browser what kind of input and the second attribute 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 will not work.

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

It is perfectly usable in this form. You can type in a search term, hit your ENTER key, and the search will work, 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. We can add a submit button to the code just below the <input> we just added. Now are code looks like this:

</form>

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 are viewing this in, the submit button will probably say something 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. This is how that will look in your code and then how it will display in your browser.

</form>

Step 2 - Determining Translation

If we want, now we can choose to have the search use a particular translation. (For example, if your site is a church website and the pastor only uses the New American Standard Bible, so you will want your congregants tracking with him as he preaches.) We can force the translation by using an <input> tag with three attributes set as so: type="hidden" 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 the following Bible translation abbreviations:

KJV = King James Version

NKJV = New King James Version

NLT = New Living Translation

NIV = New International Version

ESV = English Standard Version

CSB = Christian Standard Bible

NASB20 = New American Standard Bible 2020

NASB95 = New American Standard Bible 1995

LSB = Legacy Standard Bible

AMP = Amplified Bible

NET = New English Translation

RSV = Revised Standard Version

ASV = American Standard Version

YLT = Young's Literal Translation

DBY = Darby Translation

WEB = Webster's Bible

HNV = Hebrew Names Version

VUL = Latin Vulgate

NAV = Open New Arabic Version

WLC = Westminster Leningrad Codex

LXX = Septuagint

mGNT = Morphological Greek New Testament

TR = Textus Receptus

SVD = Smith Van Dyck Arabic Bible

BES = Brenton's English Septuagint

RVR09 = Reina Valera 1909

RVR60 = Reina-Valera 1960

BBE = Bible in Basic English

CHT = Chinese Traditional Union

EM = Espanol Moderno

KOR = Korean Holy Bible

LS = Louis Segond

LUT = German Luther

RST = Russian Synodal Translation

SE = Sagradas Escrituras

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

</form>

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

What if you would like to add the ability for your site's users to choose the translation of the Bible they would like to search? Here is an example of what that will look like. You can even select the default translation.

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

</select>

</form>

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 drop down code and a closing one at the end of our drop down code. All of our selectable options will fall between these two tags. Like this:

<ETC.>

</select>

</form>

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 will look at how to populate the drop down with a list of choices. We will use 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 would like 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 have stuck to abbreviations for the drop down as well. Then we add a closing </option> and we are finished with that option line and ready to move on to the next.

Here is a select box with four examples, so you can see how it works. Note: You can limit the available translations in your site's drop down.

<option value="KJV">King James</option>

<option value="NKJV">New King James</option>

<option value="NLT">New Living</option>

<option value="NIV">New International</option>

</select>

</form>

This is how that code will render in a browser:

You can set the default translation by adding the selected attribute to the appropriate <option> tag. In the below example, we will use this to set the NLT our default.

</select>

</form>

Step 3 - Range

Another feature is being able to support a search range. If you would like to find related terms in the New Testament, you can do this with our range options. Clicking Search with the settings used below will perform this task.

In order to add the ranging option, we will need to add another line or two to our search tool's size as well as a fair amount of code. Take a look:

<p>

</select>

</p>

<p>

<strong>Range Options:</strong><br />

<input type="text"

name="cscs" />

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

</p>

</form>

Range options are set in a new <p> tag in bold followed by a line break. Next is the <input> tag. The two attributes and the values for the next step are: type="text" (tells the <input> tag to display as a text box) and name="cscs" (sends the information to Blue Letter Bible program in a way that the program can use).

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

This code will display like this:

This is what you would need to do, if you want to drop the Range Option identifier and the example text and fit everything on one line:

<form action="https://www.blueletterbible.org/search/preSearch.cfm"

onSubmit="if(this.cscs.value=='Optional Verse Range')

this.cscs.value='';"

method="get">

<p>

</select>

<input type="text"

title="Use semicolons to separate groups -

Gen;Jdg;Psa-Mal;Rom 3-12;Mat 1:15;Mat 5:12-22"

value=""

placeholder="Optional Verse Range" />

</p>

</form>

As you can see, we have moved the range <input> up before the Search button. This will place it between the Bible version drop down and the Search button when we view the page in a browser.

There are three attributes we will discuss. The first attribute we will look at is title. This is similar to the example text we used previously, though more detailed. With the title text in place, users will see this text when they mouse over the range input box.

The other two attributes, value & placeholder work together. These make it so the Range Option input says "Optional Verse Range" though it is only there as a hint of what the user should type in.

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

We hope that this will be a tool that is helpful to your users as they study God's Word.

← Back to Apps & Tools

(责任编辑：)

搜索

热门标签:

BLB Web Search Tool