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=='')this.value=this.defaultValue;’ onfocus=’if(this.value==this.defaultValue)this.value='';’ 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('box').style.display='block';document.getElementById('hide').style.display='block'’><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('box').style.display='none';document.getElementById('hide').style.display='none';document.getElementById('show').style.display='block'’><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).*
