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

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
(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>

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).*

Related posts:

Cara Memindahkan Isi Blog Blogger ke WordPress

Ciri-Ciri Blog yang Bisa Diterima Jadi Publisher Google Adsense

Cara Aktivasi Newspaper WordPress Theme Versi 8 9 10

NewsMag WordPress Theme – Link Download Free dan Cara Aktivasi

SEO Blog Dasar: Pengertian Search Intent

Plugin WP Magic Post Thumbnail – Menampilkan Gambar Thumbnail Otomatis di Postingan