Cara Memodifikasi Kotak Pencarian Di Blog Agar Lebih Keren


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.

Memodifikasi Kotak Pencarian Di Blog
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.

DEMO

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 !

 <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:&quot;\f002&quot;;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:&#39;Open Sans&#39;,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:&#39;Oswald&#39;,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==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here'/>
  <input class='searchsubmit' type='submit' value='Search'/>
</form>
</div>
<div class='clear'/>   
Langkah Ke-3: Letakan kode HTML dibawah ini dimana sobat akan memunculkannya.
 <li class='searchbutton'/> 
Langkah Ke-4: Terakhir letakan kode jQuery berikut tepat diatas kode </body>
 <script type='text/javascript'>
//<![CDATA[
$(function(){
$('.searchbutton').click(function(){
  $(this).toggleClass('active');
  $('.search-form').slideToggle('normal');
});
});
//]]>
</script> 



Simpan template sobat dan SELESAI ! Selamat mencoba.
Kredit untuk: Arlina Design
Previous
Next Post »

2 komentar

Click here for komentar
Cilembu thea
admin
13 Agustus 2015 12.07 ×

liat demonya kotak pencarian hasil karyanya sungguh berbeda dengan pencarian pada umumnya, itu artinya kotak pencarian dari sini mah berbeda dan tidak umum, maka karena kitak umumannya itulah yang menjadikan kotakpencarian ala kang admin menjadi istimewa..dong yah

Reply
avatar
Antonius SP
admin
13 Agustus 2015 23.33 ×

kalo istimewa sih ga lah mang,,, agak beda aja gitu... :) btw makasih ya mang udah berkunjung ke blog baru saya....

Reply
avatar
Thanks for your comment
close