Archive Pages Design$type=blogging

Cara Memodifikasi Kotak Pencarian Di Blog Agar Lebih Keren

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.

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

COMMENTS

BLOGGER: 4
Loading...
Nama

Animasi Blogger Button Css Javascript jQuery Sider Sosial Media Syntax Highlighter Template Tips Tutorial Windows 10
false
ltr
item
Simple Tutorial: Cara Memodifikasi Kotak Pencarian Di Blog Agar Lebih Keren
Cara Memodifikasi Kotak Pencarian Di Blog Agar Lebih Keren
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjebAYlViv8U990zAAE60r8zR4-2Pgkci1mFIMuOebFzViCk5uGYPSiTM2UKd-U6iXUQOhgbAGWBxoDSePOiqpQVucDCAIiB5vFZ2zI6l7IyUKfxLloRQvKntopaSnmQD3eUaLZ3RwkFSEm/s400/icon-search-anton.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjebAYlViv8U990zAAE60r8zR4-2Pgkci1mFIMuOebFzViCk5uGYPSiTM2UKd-U6iXUQOhgbAGWBxoDSePOiqpQVucDCAIiB5vFZ2zI6l7IyUKfxLloRQvKntopaSnmQD3eUaLZ3RwkFSEm/s72-c/icon-search-anton.jpg
Simple Tutorial
https://mirandahardy.blogspot.com/2015/08/cara-memodifikasi-kotak-pencarian-di.html
https://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/2015/08/cara-memodifikasi-kotak-pencarian-di.html
true
4419251694985783704
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago