How To Add A Search Bar To Your Tumblr Blog

HOW TO MAKE A SEARCH BOX

Want an easier way to search through your tags? Utilizing Tumblr's search box can aid you with that. In this tutorial I will show you how to create a simply search box and style it, as well as add images to spice up the appearance.

SEARCH BOX DRAW BACKS

First off, I want to put out there that this search box is not fail proof. Meaning if you think the search box will search through key words. You would be incorrect. This search box provided by tumblr only searches through TAGS, nothing else. If you want a wider search box, this is not something I would utilize.

Also as another drawback about this search box the searcher would have to know the specific tag to search. Let's say they wanted to search a particular celebrity with the first name of Ryan. Searching just Ryan would mean it would only pull up posts that were specifically tagged #ryan. Any tags like #ryan gosling or #ryan reynolds would NOT pull up. In that case they would specifically have to search "ryan gosling" or "ryan reynolds".

In this sense it's probably just as convenient and efficient as having a tags page. But if you still would like a search bar - on with the tutorial!

Step 01 - BASIC STRUCTURE

We can find most of the basic tumblr code in the tumblr docs for custom themes.. They even have an example - which is the exact one I use as the base. So the simple code looks like:

HTML

<form action="/search" method="get">     <input type="text" name="q" value="{SearchQuery}"/>     <input type="submit" value="Search"/> </form>

This is what a search box would look like without styling:

Not that attractive right?

Step 02 - STYLING THE SEARCH BOX

Before we even start adding CSS to the search box we need to call a class to the form. Simply we can add any class or id and the HTML will look like:

HTML

<form action="/search" method="get" class="sfm">     <input type="text" name="q" value="{SearchQuery}" id="sf"/>     <input type="submit" value="Search" id="sb"/> </form>

As you can see I added - class="sfm" to the form, id="sf" to the search form, and id="sb" to the search button. I added the last two for future stylyings as far as images go. Only once we've done this now can we style through CSS. You're going to flip realizing how easy this really is - now you just add your styling.

CSS

.sfm input {background-color: #f5f5f5;      font-size: 8px;      border: 0px;      text-transform: uppercase;      margin-top: 0px;      color: #999;      letter-spacing: 1px;      padding: 4px 8px;     font-family: calibri, helvetica, arial;}

The most important CSS here is to have border: 0px; or else there will be an ugly border. If you'd like to have a border - you can keep it and just make sure to set the parameters for it. (ie. borer: 1px solid #000, etc.) This is what the search box looks like with styling:

Second important coding bit, is the padding - I would play around with it or width. If you want to have the search box stretch to fit a certain with or squeez into a certain area you will definitely have to mess around with those. Keep in mind that the preview width WILL NOT be the same as the blog - it's annoying, I know.

You can make the obvious customizations with color, font, etc. As well as in the form you can change the value="Search" to something else if it suits your theme. So if you changed value="Search" to value="Query" the search button would say that instead. But let's say you want to fancy it up with images instead...

ADDING IMAGES TO THE SEARCH BOX

It is very possibly to add images to the search box. You can very well add a magnifying (search icon) for the search button instead or have it in the background. You can even use images for the search form area's background to make it really pop. In this tutorial however, I'm just going to show you how to replace the "SEARCH" words with an image and have one in the search form background.

SEARCH BUTTON IMAGE

Essentially it's all the same thing but for

HTML

            <input type="submit" value="Search" id="sb"/>

You'll need to change it to:

HTML

            <input type="image" value="Search" src="imageurl.png" id="sb"/>

So the full new HTML would look like:

HTML

<form action="/search" method="get" class="sfm">     <input type="text" name="q" value="{SearchQuery}" id="sf"/>     <input type="image" value="Search" src="imageurl.png" id="sb"/> </form>

When I replace "imageurl.png" with an actual image url it looks like:

Of course this is when you would add CSS additions to adjust.

CSS

#sb {height: 10px; vertical-align: top;}

After adding the adjustment CSS it looks neater:

SEARCH FORM IMAGE

One style you can do is having a search icon in the search form and when the user hits enter it will search for that tag. First off you will need to have the script/HTML.

HTML

<script language="javascript"> function send() {document.theform.submit()} </script>  <form action="/search" method="get" class="sfm" name="theform">     <input type="text" name="q" value="" id="sf"/> </form>

Notice how in the script it says "theform" and the name of the form is added as name="theform". Obviously you can change this to something else as long as you keep these two things the same. Also pay attention to the fact that we removed the search button line as well. If we had kept our original CSS it would simply look like:

To make it more obvious as a search box we can add a background image to it. Simply with CSS.

CSS

#sf {background: url('https://static.tumblr.com/f1skqpy/Oxbn13qun/search_icon.png') #f5f5f5 left center no-repeat; background-size: 10px 10px;}

We need to make sure to red-add thekground color in the code to keep that, otherwise if you notice without it, it'll be transparent. And it ends up looking like:

If you click in it, the cursor is too close to the image but you can fix that with the padding. And make the image's padding in PS or whatever differnt so it's not butting up against the left like that. I also had background-size because I was too lazy to resize the image, so you really don't need that. Another way you can denote it's a search bar without an image is just to say 'Search' in the form. You can do this by putting 'Search' for the blank value="". So it would look like this:

HTML

              <form action="/search" method="get" class="sfm" name="theform">     <input type="text" name="q" value="SEARCH"/> </form>

And appear like so:

The only annoying then is then users would have to delete the word "search" to replace with what they want to search.

SEARCH BOX COMPLETE

So there you have it, that's how you make a search box. You can add all this anywhere you please - whether the description or somewhere else. Easy peasy right?