Kotak Pencarian Show Hide Search Form & Full Screen di Navigasi Menu

Kotak Pencarian (Search Box) merupakan widget wajib pasang di blog atau website. Kotak pencarian ini untuk memudahkan pengunjung dan admin sendiri mencari tulisan yang dibutuhkan. 

Berikut ini beberapa kode kotak pencarian model baru, lagi trend, tidak seperti kotak pencarian biasa atau standar. Kotak Pencarian Show Hide ini untuk dipasang di Navigasi Menu, sejajar dengan nama-nama menu atau kategori.

Kotak Pencarian Simple Responsive Show Hide Search Form

Kotak Pencarian Simple Responsive Show Hide Search Form

Kotak Pencarian Simple Responsive Show Hide Search Form

CSS:
Simpan di atas kode ]]></b:skin>

/* Show Hide Search Form */
form#searchid{position:absolute;right:0px;top:0px;padding:0 20px;margin:0;overflow:hidden;z-index:100}
#searchid label,#searchid input[type="submit"]{display:none}
#searchid input[type="text"]{position:relative;font-family:'Roboto';margin:0;border:0;border-radius:5px;font-size:1.1rem;outline:none;color:transparent;height:30px;width:30px;text-indent:30px;background:transparent;}
#searchid input[type="text"]:focus{background:#fff;color:#111;text-indent:10px;width:100%;}
.idsearch{position:relative;font-family:fontawesome;margin:0;color:#fff}
.idsearch:before{content:'\f002';font-family:fontawesome;position:absolute;top:0;right:0;font-size:1.5rem}


HTML:
Simpan di samping navigasi menu, misanya di bawah kode </ul> </nav> atau kode penutup navigasi menu.

<form action='/search' id='searchid' method='get'>
<label for='name'/>
<p class='idsearch'><input id='name' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...'/></p>
<input name='max-results' type='hidden' value='10'/>
<input type='submit' value='Submit'/>
</form>

Kotak Pencarian Show Hide plus Link Media Sosial

Kotak Pencarian Show Hide plus Link Media Sosial

Kotak Pencarian Show Hide plus Link Media Sosial
(Cara pemasangannya sama sperti yang di atas)

CSS:


.search-bsdprofile {
  position: relative;
  width: 249px;
}
#search-box {
  width: 100%;
  padding-right: 37px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#search-box form {
  position: absolute;
  top: 0;
  right: 37px;
  display: block;
  height: 31px;
  padding: 0;
  margin: 0px;
  border: 1px solid #80C8FE;
  border-radius: 3px;
    line-height: 31px;
  background: #fff;
}
#search-form,
.search-bsdbutton {
  border: none!important;
  line-height: 29px
}
#search-form {
  color: #80C8FE;
  width: 100%;
  padding: 0 29px 0 9px;
  height: 28px;
  font-size: 13px;
  margin: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.search-bsdbutton {
  padding: 0 9px;
  text-align: center;
  margin: 0;
  top: 1px;
  right: 1px;
  font-size: 15px;
  color: #80C8FE;
  position: absolute;
  background: none;
  cursor: pointer;
}
#search-form:focus,
#search-form:hover,
.search-button:focus,
.search-button:hover {
  border: none;
  outline: 0;
  color: #00477D
}
.bsdprofile {
  position: absolute;
  top: 2px;
  right: 37px;
}
.bsdprofile ul {
  padding: 0!important;
  margin: 0!important;
}
.bsdprofile li {
  display: inline-block;
  margin-left: 5px
}
.bsdprofile a {
  color: #80C8FE;
  font-weight: 500;
  font-size: 23px
}
.bsdprofile a:hover {
  color: #00477D!important
}
#search-box,
#close-icon {
  display: none;
}
.search-icon {
  color: #00477D;
  float: right;
  cursor: pointer;
}
.search-icon .fa-search,
.search-icon .fa-times {
  color: #fff;
}

JavaScript:

<script type='text/javascript'>
//<![CDATA[
 function openbsdprofile() {
    var e = document.getElementById("bsdprofile");
    "none" !== e.style.display ? e.style.display = "none" : e.style.display = "block";
    var e = document.getElementById("search-box");
    "block" !== e.style.display ? e.style.display = "block" : e.style.display = "none";
    var e = document.getElementById("search-icon");
    "none" !== e.style.display ? e.style.display = "none" : e.style.display = "block";
    var e = document.getElementById("close-icon");
    "block" !== e.style.display ? e.style.display = "block" : e.style.display = "none";
  };
  //]]>
</script>

HTML:

<div class='search-bsdprofile'>
  <div id='search-box'>
    <form action='/search' method='get'>
      <input id='search-form' itemprop='query-input' name='q' placeholder='Type here.....' required='required' type='text' />
      <button class='search-bsdbutton' title='Search' type='submit'><i class='fa fa-search'></i></button>
    </form>
  </div>
  <div class='bsdprofile' id='bsdprofile'>
    <ul>
      <li><a href='https://www.facebook.com/' target='_blank' title='Facebook'><i class='fa fa-facebook-square fa-lg'></i></a></li>
      <li><a href='https://twitter.com/' target='_blank' title='Twitter'><i class='fa fa-twitter-square fa-lg'></i></a></li>
      <li><a href='https://plus.google.com/' target='_blank' title='Google+'><i class='fa fa-google-plus-square fa-lg'></i></a></li>
      <li><a href='id.linkedin.com/in/' target='_blank' title='LinkedIn'><i class='fa fa-linkedin-square fa-lg'></i></a></li>
      <li><a href='//www.youtube.com/c/' target='_blank' title='Youtube'><i class='fa fa-youtube-square fa-lg'></i></a></li>
    </ul>
  </div>
  <div class='search-icon' onclick='openbsdprofile()'>
    <div class="fa-stack" id="search-icon">
      <i class="fa fa-square fa-stack-2x"></i>
      <i class="fa fa-search fa-stack-1x"></i>
    </div>
    <div class="fa-stack" id="close-icon">
      <i class="fa fa-square fa-stack-2x"></i>
      <i class="fa fa-times fa-stack-1x"></i>
    </div>
  </div>
</div>


Kotak Pencarian Full Screen

Kotak Pencarian Full Screen


CSS:
Simpan di atas kode ]].</b:skin>

#hide{display:none}
#search_icon{background:#212121;width:99px;height:58px;display:inline-block;float:right;position:absolute;right:0;top:0;bottom:0;z-index:9999}
#search-wrapper{width:90%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:shownow 0.3s ease-in-out;-moz-animation:shownow 0.3s ease-in-out;animation:shownow 0.3s ease-in-out}
@keyframes shownow{0%{transform:scale(0.9)}50%{transform:scale(1.01)}100%{transform:scale(1)}}
#search-wrap{clear:both;width:75%;margin:0 auto;padding:0;display:block;overflow:hidden}
#search{border-bottom:3px solid rgba(63,63,63,.8)}
#searchform{color:#111;width:100%;margin:0 auto;overflow:hidden;position:relative;}
.search-button,.search-button:hover{clear:both;background:none;border:none;color:#3f3f3f;width:40px;height:40px;line-height:40px;padding:0;text-align:center;font-size:23px;cursor:pointer;position:absolute;top:5px;right:10px;font-weight:700}
.search-button:active{border:none;outline:none;background:none;}
#formsearch{background-color:transparent;width:100%;height:57px;line-height:57px;padding:0 60px 0 20px;-moz-box-sizing:border-box;box-sizing:border-box;border:none;font-weight:700;font-size:25px;color:#fff!important}
#formsearch{-webkit-box-sizing:border-box}
#formsearch:focus{border:none;outline:0;color:#fff;}
#searchform:focus{border:none;outline:0;color:#3f3f3f}
#boxsearch{margin:0 auto;display:none;padding:60px 0 0;width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);background-color:rgba(0,0,0,.94);text-align:center;-webkit-transition:all ease-in-out .25s;-moz-transition:all ease-in-out .25s;-ms-transition:all ease-in-out .25s;-o-transition:all ease-in-out .25s;transition:all ease-in-out .25s;}
#hide span.smallbutton{color:#fff;font-weight:700;padding:0;text-align:center;cursor:pointer;font-size:20px;height:35px;width:35px;line-height:35px;border-radius:99em;border:3px solid #fff;float:right;overflow:hidden;display:block}
#hide span.smallbutton:hover{color:#eee;border-color:#eee}
#boxsearch p{font-size:14px;margin:15% auto 70px;color:#fff;letter-spacing:2px;text-transform:uppercase}
.search-icon span{font-weight:normal;width:45px; height:60px;line-height:60px;position:absolute;top:0;right:20px;cursor:pointer;font-size:22px;color:#fff}
@media screen and (max-width:737px){
#boxsearch{padding:25px 0 0;}
#search-wrapper{width:100%;margin:0 auto;padding:0 20px}
#search-wrap{clear:both;width:90%;}
#boxsearch p{font-size:14px;margin:8% auto 50px;}}
@media screen and (max-width:480px){
.search-button,.search-button:hover{width:auto;text-align:right;font-size:20px;right:0;}
.search-button:active{border:none;outline:none;background:none;}#formsearch{padding:0 20px 0 0;}}

Kode HTML:
Simpan di mana saja, misalnya di samping kanan menu atau header.

<div class='search_icon' id='search_icon'>
<div class='search-icon'>
<div id='show'><span class='smallbutton' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-search'/></span></div>
</div> </div>

Kode HTML & JavaScript:
Simpan di atas kode </body>

<div id='box'>
<div class='search-wrapper' id='search-wrapper'>
<div id='hide'><span class='smallbutton' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-times'/></span></div>
<div id='search-wrap'>
<p>Start typing and press Enter to search</p>
<div id='search'>
<form action='/search' id='searchform'>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='formsearch' name='q' placeholder='Search here....' required='required' type='text'/>
<button class='search-button' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form>
</div>
</div>
</div></div>

Karena kotak pencarian ini menggunakan font-awesome, maka pastikan ada link ke Awesome Font. Jika belum ada, pasang kode berikut ini di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Demikian koleksi kode Kotak Pencarian Simple Responsive Show Hide Search Form & Full Screen. (Blogger Bandung).*

0 Response to "Kotak Pencarian Show Hide Search Form & Full Screen di Navigasi Menu"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel