Please can someone help me with the box search with the menu?


#1

How do I put a search box with the menu? I can not find any tutorial for that, someone help?

That’s my template I’m trying to do: http://templateparis.blogspot.com



#2

add this above </nav>

<div style="float: right;" id="CustomSearch1_form"><form accept-charset="utf-8" class="gsc-search-box"><table class="gsc-search-box" cellpadding="0" cellspacing="0"><tbody><tr><td class="gsc-input"><input title="search" name="search" class=" gsc-input" size="10" autocomplete="off" type="text"><input id="bgresponse" name="bgresponse" type="hidden"></td><td class="gsc-search-button"><input title="search" class="gsc-search-button" value="Search" type="submit"></td></tr></tbody></table><table class="gsc-branding" cellpadding="0" cellspacing="0"><tbody><tr style="display: none;"><td class="gsc-branding-user-defined"></td><td class="gsc-branding-text"><div class="gsc-branding-text">powered by</div></td><td class="gsc-branding-img-noclear"><img class="gsc-branding-img-noclear" src="http://www.google.com/uds/css/small-logo.png"></td></tr></tbody></table></form></div>

#3

Error when I added, view the image.

Can you help me again?


#4

You just need to add a / at the end of input tag. Use this code instead:

<div style="float: right;" id="CustomSearch1_form"><form accept-charset="utf-8" class="gsc-search-box"><table class="gsc-search-box" cellpadding="0" cellspacing="0"><tbody><tr><td class="gsc-input"><input title="search" name="search" class=" gsc-input" size="10" autocomplete="off" type="text"/><input id="bgresponse" name="bgresponse" type="hidden"></td><td class="gsc-search-button"/><input title="search" class="gsc-search-button" value="Search" type="submit"/></td></tr></tbody></table><table class="gsc-branding" cellpadding="0" cellspacing="0"><tbody><tr style="display: none;"><td class="gsc-branding-user-defined"></td><td class="gsc-branding-text"><div class="gsc-branding-text">powered by</div></td><td class="gsc-branding-img-noclear"><img class="gsc-branding-img-noclear" src="http://www.google.com/uds/css/small-logo.png"></td></tr></tbody></table></form></div>

#5

sorry for that because the html parses :pensive:


#6

Hi Shivansh, I hope you have patience with me! Unfortunately I couldn’t, reported this error:

I’m beginner to blogger :smile:


#7

use this code finally :sweat:

<div style="float: right;" id="CustomSearch1_form">
  <form accept-charset="utf-8" class="gsc-search-box">
    <table class="gsc-search-box" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td class="gsc-input">
            <input title="search" name="search" class=" gsc-input" size="10" autocomplete="off" type="text" />
            <input id="bgresponse" name="bgresponse" type="hidden"/>
          </td>
          <td class="gsc-search-button" />
          <input title="search" class="gsc-search-button" value="Search" type="submit" />
          </td>
        </tr>
      </tbody>
    </table>
    <table class="gsc-branding" cellpadding="0" cellspacing="0">
      <tbody>
        <tr style="display: none;">
          <td class="gsc-branding-user-defined"></td>
          <td class="gsc-branding-text">
            <div class="gsc-branding-text">powered by</div>
          </td>
          <td class="gsc-branding-img-noclear"><img class="gsc-branding-img-noclear" src="http://www.google.com/uds/css/small-logo.png"/></td>
        </tr>
      </tbody>
    </table>
  </form>
</div>

#8

Unfortunately it did not work @Nafees Nafees, thank you for your dedication. Thank you very much! :unamused:


#9

Add this to the custom_functions.php file contents:

function add_search_to_wp_menu ( $items, $args ) {
	if( 'primary' === $args -> theme_location ) {
$items .= '<li class="menu-item menu-item-search">';
$items .= '<form method="get" class="menu-search-form" action="' . get_bloginfo('home') . '/"><p><input class="text_input" type="text" value="Enter Text &amp; Click to Search" name="s" id="s" onfocus="if (this.value == \'Enter Text &amp; Click to Search\') {this.value = \'\';}" onblur="if (this.value == \'\') {this.value = \'Enter Text &amp; Click to Search\';}" /><input type="submit" class="my-wp-search" id="searchsubmit" value="search" /></p></form>';
$items .= '</li>';
	}
return $items;
}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);

Add this to the custom.css file contents

.custom .menu-item.menu-item-search { float:right; width:260px; }
.custom .menu-search-form { float:right; padding-top:3px; width:250px; }
.custom form.menu-search-form { width:auto; }
.custom form.menu-search-form #s { background:#fff; border:1px solid #000; font-size:11px; margin:0 2px 0 0; padding:2px; width:180px; float:left; }
.custom .menu-search-form input#searchsubmit.my-wp-search { background:#000; color:#fff; cursor:pointer; float:right; padding:2px; text-transform:uppercase; }

#10

check out this for blogspot search box
Blogspot Search box addition