How to add a Responsive Search Box Widget on Blogger

 

 

Search Box is an important thing for blog/website. Visitors can search your blog and find a content from your blog they want. As you know Blogger has its own search box, but it's looking very simple. It will look more professional to add a more optimized and colorful search box to your blog.
Today I will share with you beautiful search boxes for Blogger.

Screenshot of Search Box:

Simply open up Blogger, go to Layout > "Add a new gadget".
Now in pop out window search and select for HTML/JavaScript.
And paste code on it:

 

01

<style>

02	#search-box {

03	position: relative;

04	width: 100%;

05	margin: 0;

06

}

07

08	#search-form

09

{

10	height: 40px;

11	border: 1px solid #999;

12	-webkit-border-radius: 5px;

13	-moz-border-radius: 5px;

14	border-radius: 5px;

15	background-color: #fff;

16	overflow: hidden;

17

}

18	#search-text

19

{

20	font-size: 14px;

21	color: #ddd;

22	border-width: 0;

23	background: transparent;

24

}

25

26	#search-box input[type="text"]

27

{

28	width: 90%;

29	padding: 11px 0 12px 1em;

30	color: #333;

31	outline: none;

32

}

33

34	#search-button {

35	position: absolute;

36

top: 0;

37

right: 0;

38	height: 42px;

39	width: 80px;

40	font-size: 14px;

41	color: #fff;

42	text-align: center;

43	line-height: 42px;

44	border-width: 0;

45	background-color: #ff6c00;

46	-webkit-border-radius: 0px 5px 5px 0px;

47	-moz-border-radius: 0px 5px 5px 0px;

48	border-radius: 0px 5px 5px 0px;

49	cursor: pointer;

50

}

51

</style>

52

53	<div id='search-box'>

54	<form action='/search' id='search-form' method='get' target='_top'>

55	<input id='search-text' name='q' placeholder='Search...' type='text'/>

56	<button id='search-button' type='submit'><span>Search</span></button>

57

</form>

58

</div>

 

And press on "Save" button.
Change some settings:
1) On line 4 you can change the 100% to any size you want to apply to the search box.
2) On line 45 change "#ff6c00" to any color you want for the search button.
3) On line 56 you can change the value of search button, in above code, the value is set to "Search".