Membuat Popup Search Box With Keyframe Effect

Membuat Popup Search Box With Keyframe Effect

Untuk anda yang ingin mengganti kolom pencarian blog anda dengan tampilan yang berbeda dari biasanya, bisa mencoba Popup Search form with Keyframe yang akan saya share pada kesempatan kali ini.

Nah langsung saja, untuk penerapannya bisa anda ikuti langkah-langkah di bawah ini:

Membuat Popup Search Form With Keyframe


Tambahkan CSS berikut di atas </style>

/* Search Button With Keyframe */
#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)}
#searchformku{color:#111;width:100%;margin:0 auto;overflow:hidden;position:relative;}
.button-searchku,.button-searchku: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}
.button-searchku:active{border:none;outline:none;background:none;}
#search-formku{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}
#search-formku{-webkit-box-sizing:border-box}
#search-formku:focus{border:none;outline:0;color:#fff;}
#searchformku:focus{border:none;outline:0;color:#3f3f3f}
#box{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.tombolkecil{color:#fff;font-weight:700;padding:0;text-align:center;cursor:pointer;font-size:20px;height:35px;width:35px;line-height:35px;float:right;overflow:hidden;display:block}
#hide span.tombolkecil:hover{color:#eee;border-color:#eee}
#box p{font-size:14px;margin:15% auto 70px;color:#fff;letter-spacing:2px;text-transform:uppercase}
.icon-searchku span{font-weight:normal;width:auto; height:50px;line-height:50px;position:absolute;top:0;right:15px;cursor:pointer;padding-left:5px;font-size:23px;color:#fff}

Kemudian tempatkan HTML berikut di atas </body>

<div id='box'>
<div class='search-wrapper' id='search-wrapper'>
<div id='hide'><span class='tombolkecil' 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>Ketik dan Tekan Enter</p>
<div id='search'>
  <form action='/search' id='searchformku'>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-formku' name='q' placeholder='Cari artikel lainnya....' required='required' type='text'/>
<button class='button-searchku' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form>
  </div>
  </div>
</div>
</div>

Dan terakhir letakan kode html berikut di tempat yang anda inginkan seperti misalnya di samping navigasi menu atau yg lainnya.

<div class='icon-searchku'>
<div id='show'><span class='tombolkecil' 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>

Pastikan anda sudah memasang Font awesome sebelum menerapkan kode diatas.

Demikian semoga tutorial blogger pada artikel kali ini, semoga dapat mempercantik tampilan blog anda dan tentunya agar tetap seo dimata mbah google.
Advertisement
Advertisement

Tidak masalah seberapa lambat kau berjalan, asalkan kau tak berhenti.