S obat blogger, ketika kita mengunjungi sebuah situs website pernah kita jumpai sebuah kotak pencarian yang telah disediakan oleh si empuny...
Sobat blogger, ketika kita mengunjungi sebuah situs website pernah kita jumpai sebuah kotak pencarian yang telah disediakan oleh si empunya web tersebut, tetapi ada juga yang memang sudah tersedia dari sononyo, alias bawaan dari template website tersebut, fungsi nya adalah untuk mempermudah pengunjung mencari artikel yang diinginkan pada sebuah website dengan kata kunci tertentu, sehingga pengunjung tersebut tidak sulit untuk menemukan artikel yang dimaksud.
 |
| Cara Memodifikasi Kotak Pencarian Di Blog |
Kotak pencarian ini secara default bagi yang menggunakan flatform blogger biasanya sudah tersedia, tetapi tampilannya tentulah sederhana saja, nah jika sobat ingin membuat tampilan kotak pencarian pada blog sobat menjadi "lebih indah dan menarik", saya ada solusinya sob... masih berhubungan dengan template yang saya gunakan saat ini, tampilan kotak pencarianya sedikit berbeda dari biasanya, silahkan sobat Klik Tombol Pencarian pada blog ini dipojok kanan atas atau pada tombol demo dibawah ini.
Bagaimana sob..tampilannya berbeda dengan tombol pencarian pada umumnya kan... dan sebenarnya cara membuat kotak pencarian seperti ini tidaklah sulit-sulit amat sob, jika sobat mengikuti langkah-langkah dibawah ini dengan benar dan teliti, sudah pasti dan saya jamin akan bisa dipasang diblog kesayangan sobat.
Cara Memodifikasi Kotak Pencarian Di Blog Agar Lebih Keren
Langkah Ke-1: Masuk ke menu Template>>Edit HTMLTambahkan Kode Javascript dan Css berikut sebelum kode </head> , jika sudah ada abaikan saja sob... <link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> Langkah Ke-2: Ganti semua kode css Kotak Pencarian (#Search) yang ada pada blog sobat dengan kode dibawah ini.
Catatan:
Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !
Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !
<style>
/* CSS Fixed Search Button */
.lyco-search {position:relative;padding:0;height:0;margin:0 auto;}
ul li.searchbutton {background:#434e52;margin:0;padding:3px 18px;display:inline-block;text-transform:Capitalize;line-height:44px;cursor:pointer;z-index:93;float:right;}
ul li.searchbutton.active {background:#ea5c35;color:#fff;}
ul li.searchbutton:after {content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;color:#fff;position:relative;}
ul li.searchbutton.active:after {color:#fff;}
.search-form {display:none;position:fixed;bottom:0;background:#fff;
padding:5px 0;width:100%;z-index:91;margin:0 auto;}
.searchform {margin:0 auto;text-align:center;line-height:45px;}
.searchbar {background:transparent;border:none;width:70%;padding:0 10px;font-weight:400;font-size:20px;font-family:'Open Sans',sans-serif;color:#999;margin:0 auto;outline:none;line-height:45px;transition:background-color 1s ease-out 0s;}
.searchbar:focus {color:#666;}
.searchsubmit {background:#848889;border:none;outline:none;cursor:pointer;
color:#fff;padding:0 25px;text-transform:uppercase;font-weight:400;font-size:16px;
font-family:'Oswald',sans-serif;line-height:45px;border-radius:2px;
transition:background-color 1s ease-out 0s;}
.searchsubmit:hover {background:#fff;color:#666;box-shadow: inset 0 0 0 1px #848889;}
.searchsubmit:active {background:#ea5c35;color:#fff;box-shadow:none;border:none;outline:none;}
form.searchform {margin:0;}
</style> Langkah Ke-3: Tambahkan kode HTML dibawah ini tepat dibawah kode <body> atau jika sudah ada didalam template sobat ganti saja semua dengan kode ini.
<div class='lyco-search'>
</div>
<div class='search-form'>
<form action='/search' class='searchform' method='get'>
<input class='searchbar' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here'/>
<input class='searchsubmit' type='submit' value='Search'/>
</form>
</div>
<div class='clear'/> <li class='searchbutton'/> <script type='text/javascript'>
//<![CDATA[
$(function(){
$('.searchbutton').click(function(){
$(this).toggleClass('active');
$('.search-form').slideToggle('normal');
});
});
//]]>
</script> Kredit untuk: Arlina Design
