How to Add a Search Bar to Tumblr

Search box is just for any blogs whether they are on Blogger or WordPress. Google Search box is also very useful. Here I will share search bar codes which you can use on your blog.

Got it? It is a Google custom search box for websites such as our blog. However, there are so many other codes and design which you can try.

How to Add Search Box to Tumblr

How to Put Search Box on Tumblr

I will still prefer to recommend Google Search box comparing to Tumblr Search bar. There are mainly one reason and that is, Google search whole blog via search term, while Tumblr search box will search only tags and if your search term miss particular tag, It will show blank page.

Still, there are many guys who request me to share the codes which i have used in my blog. Look at them…

1. Binarryworld asked: Hey, Your search box is awesome, Please give me that codes. I can buy your customization services, if any.

2. Ponydan asked: Your search bar looks too cute. Is there any CSS codes which help to decorate our search bar like yours? I checked your theme source file but couldn’t find such codes. Please, I want that search bar codes.

3. Someone asked: Can you share your search bar codes?

My Reply: Sure, I will share. My loyal readers first. In this post, I will share the trick, how to put it on your Tumblr blog.

As i said earlier, You can either use Google Custom search widget or the codes which i am going to share.

There are many things can be used while creating our own bar including CSS, JavaScript and HTML codes. Below are all part of that. First of all, We will talk about CSS.

Paste below CSS codes just before </style>

nav search CSS
#nav-search {  float: left;  margin-left: 25px  }
#nav-search input[type="text"] {  background: #f6f6f6 url("") no-repeat 16px center;  border: 0;  color: #a7a7a7;  font-size: 14px;  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;  padding: 8px 20px 8px 35px;     width: 50px;    border-radius: 20px;  -moz-border-radius: 20px;  -o-border-radius: 20px;  -webkit-border-radius: 20px;  }
#nav-search input[type="text"]:focus {  color: #272727;  }
input, textarea {    font-family: Georgia,"Times New Roman",Times,serif;  }

Now, Add below HTML codes where you want to show Tumblr Search

<form action='/search' id='nav-search' method='get'>
<input name='q' type='text' value='Search...' value='{SearchQuery}'/>

Now Save your theme and everything has been done.

Related Posts For "How to Add a Search Bar to Tumblr" are:

Show / Hide all 23 notes

Why we are here:

About updates Tumblr help tutorials time to time to customize Free Tumblr Themes, HTML Codes, Cute Backgrounds, Layouts, Widgets and Cool Quotes 2013.
Find us on Google+, Facebook and Twitter

Alexa About Us