Add Floating Seach Box on Header Menu for Blogger

There are many ways to add interesting features and make it easier for visitors to explore our blog or web.

One of them is adding a search box feature or search box. Well we can put an interesting search box with floating search box with jquery.

Floating search box with this jquery I found when strolling to dynamicdrive.com. I found a menu with a floating search box that is quite interesting. From there then I took its search box feature just to make it easier to add it to the menu already in the blog.

Quite interesting is not it? If you want to try it please follow the steps below.

Please copy the following CSS code and save above </ head>

 <style type='text/css'>
/*<![CDATA[*/
label#search-label {
    cursor: pointer;
}
label#search-label svg{
    width:24px;height:24px
}
label#search-label svg path{
    fill:#666
}
div#ddsearchcontainer div {
    padding: 5px;
    color: #efefef;
    text-align:center;
}

div#ddsearchcontainer form {
    display: none;
}

div#ddsearchcontainer form input[type="text"] {
    width: 100%;
    top: 0;
    left:0;
    z-index: 99;
    padding: 10px;
    border: none;
    border-bottom: 4px solid black;
    outline: none;
    font-size: 3em;
    background: #eee;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
html.opensearch div#ddsearchcontainer {
    position:fixed;
    top:0;
    width:100%;
    height:100%;
    left: 0;
    opacity: 1;
    -webkit-transform: scale(1) translate3d(0, 0, 0);
    transform: scale(1) translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform .5s, opacity .5s, left 0s 0s;
    transition: transform .5s, opacity .5s, left 0s 0s;
    z-index:9999;
}
html.opensearch div#ddsearchcontainer .search_wrapper{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
    padding:10% 5% 0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
html.opensearch div#ddsearchcontainer:before{
    content:"";
    background:rgba(0,0,0,.7);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
}
html.opensearch div#ddsearchcontainer form {
    display: block;
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
} /*]]>*/
</style>

Then please save the html code and the following script above </ body>

 <div id="ddsearchcontainer">
<div class="search_wrapper">
    <form class="zoomIn" id="search" action='/search' method='get'>
    <input name='max-results' type='hidden' value='8'/>
    <input type="text" name="q" id="search-terms" placeholder="Enter search terms..."/>
    <div>Press Enter to Search</div>
    </form>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var fixedsearchbox=function(e){var n,o,t,a=e(document.documentElement),r=null!=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),s=r?"touchstart":"click",c=100,i=27,u={init:function(){n=e("#ddsearchcontainer"),o=e("#search-terms"),t=e("#search-label"),t.on(s,function(e){n.css("top","px"),a.toggleClass("opensearch"),a.hasClass("opensearch")?(n.css("zIndex",c++),o.focus()):o.blur(),e.preventDefault(),e.stopPropagation()}),o.on(s,function(e){e.stopPropagation()}),e(document).on(s+" keyup",function(e){"keyup"==e.type&&e.keyCode!=i||(a.removeClass("opensearch"),o.blur())})}};return u}(jQuery);fixedsearchbox.init();
//]]>
</script>

Then the last one please save the following search button icon wherever you want to display it.

 <label id="search-label" title="Search">
  <svg viewBox="0 0 24 24">
    <path fill="#000000" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
</label>

And make sure you have installed any version of Jquery Library on your blog.

Good luck....