Cara Memasang Search Engine Fixed Di Blog

Cara Memasang Search Engine Fixed Di Blog - Dengan menggunakan fungsi transisi pada css saya akan sedikit membuat perubahan pada kolom search engine di blog yaitu kolom pencarian artikel. Dalam penggunaan CSS transition pada search engine akan merubahn tampilan kolom pencarian tersebut menjadi fixed atau full layar secara penuh dan menutupi tampilan blog. Namun jika pada efek transisi kita biasanya menggunakan syntax ease, ease-in, ease-out, ease-in-out and linear, maka pada efek transisi pada search ini menggunakan fungsi dari cubic beizer

Penggunaan cubic beizer sebenarnya hampir sama dengan penggunaannya dengan syntax ease, ease-in, ease-out, ease-in-out and linear namun pada syntax cubic beizer menggunakan syntax seperti berikut ini: cubic-bezier(P0,P1,P2,P3); atau lebih lengkapnya sobat bisa melihat perubahan dan penggunaan syntax cubic beizer ini di hongkiat dan penggunaan css transisi pada cubic beizer sudah terpasang pada search engine fixed yang hasilnya bisa sobat lihat dengan mengklik tombol demo berikut ini

Lihat Demo

Jika sobat sudah melihat demonya dan tertarik untuk memasang search engine atau kolom pencarian fixed di blog ini silahkan gunakan kode berikut dibawah ini. Namun sebelumnya, selain penggunaan kode css juga digunakan font awesome dan sedikit script untuk memaksimalkan fungsinya.

Kode Font
Salin kode font berikut tepat dibawah kode <b:skin><![CDATA[ atau <style type='text/css'> Namun jika sobat tidak ingin menggunakan kode font ini, silahkan ganti jenis font yang terdapat pada kode CSS

@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'), local('OpenSans'),url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans Semibold'),local('OpenSans-Semibold'),url(http://fonts.gstatic.com/s/opensans/v10/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');}

Kode CSS
Salin kode css berikut ini kedalam template blog sobat, salin sebelum kode ]]></b:skin> atau sebelum kode </style>

.searchbutton {
background:transparent;
margin:0;padding:0 20px;
display:inline-block;
text-transform:Uppercase;
height:55px;
line-height:55px;
cursor:pointer;
z-index:93;
float:right;
margin-right:20px;
transition:all 600ms cubic-bezier(0.23,1,0.32,1);
}

.searchbutton.active {
background:transparent;
}

.searchbutton:after {
content:"\f002";
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
text-decoration:none;
position:relative;
font-size:16px;
color:#eb5200;
}

#search {
z-index:99;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(255,255,255,255.9);
opacity:0;
visibility:hidden;
transform:scale(1.2);
transition:all 600ms cubic-bezier(0.23,1,0.32,1);
}

#search span {
float:left;
color:#eb5200;
font-size:20px;
margin:250px 0 0 -170px;
width:calc(100% - 100px);z-index:100;
}

#search.active {
opacity:1;
visibility:visible;
transform:scale(1);
z-index:100;
margin:0;
}

#search .input {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:95%;
height:100px;
margin:auto;
max-width:1100px;
}

#search .input .search {
float:left;
width:calc(100% - 100px);
height:100px;
padding:0;
margin:0;
border:none;
border-bottom:2px solid #eb5200;
outline:0;
background:transparent;
font-family: 'Open Sans', sans-serif;
font-size:60px;
color:#eb5200;
font-weight:700;
line-height:100px;
text-indent:50px;
transition:all .3s ease-out;
}

#search .input .submit {
cursor:pointer;
float:left;
width:100px;
height:100px;
padding:0;
margin:0;
border:0;
outline:0;
background:transparent;
font-size:60px;
color:#eb5200;
text-align:center;
line-height:100px;
transition:all .3s ease-out;
}

#search .input .search:focus,#search .input .submit:hover {
color:#292929;
}

#search #close {
cursor:pointer;
position:absolute;
top:30px;
right:30px;
width:50px;
height:50px;
padding:0;
margin:0;
border:0;
outline:0;
background:transparent;
font-size:30px;
color:#eb5200;
text-align:center;
line-height:50px;
}

Kode From Search
Setelah itu, cari kode <body> dan salin kode form search berikut tepat dibawah kode <body>

<form action='/search' id='search' method='get'>
<span>Gunakan kolom pencarian untuk mencari artikel favorit sobat..</span>
<div class='input'>
<input class='search' 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='Cari disini...'/>
<button class='submit fa fa-search' type='submit' value=''/>
</div>
<button class='fa fa-times' id='close' type='reset' value=''/>
</form>

Kode Script
Selanjutnya salin kode script untuk search engine fixed ini kedalam kode template blog sobat. Cari kode </body> dan salin kode script berikut ini tepat diatas atau sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function(){$(".searchbutton").on("click",function(){$("#search").addClass("active").find(".search").focus()});$("#search").on("click",function(){$(this).find(".search").focus()});$("#close").on("click",function(){$("#search").removeClass("active")})})
//]]>
</script>

Kode HTML
Dan untuk melihat hasilnya masukkan kode HTML untuk kolom pencarian fixed ini kedalam blog sobat

<div class='searchbutton'></div>

Penggunaan pada menu horizontal
Jika sobat ingin menerapkan pemasangan kolom pencarian fixed ini kedalam menu horizontal, maka yang perlu sobat lakukan adalah cukup menyesuaikan penggunaan margin padding yang digunakan serta menambahkan kode tag dari menu horizontal yang sobat gunakan kedalam kode CSS kolom pencarian fixed diatas

Misalnya didalam template blog sobat menggunakan tag menu horizontal dengan class id menu, maka penambahan kodenya adalah cukup menambahkan id class menu sebelum tag searchbutton yang terdapat pada kode css diatas
.menu li.searchbutton {}
.menu li.searchbutton.active {}
.menu li.searchbutton:after {}

Dan untuk kode HTML juga diganti menjadi <li class='searchbutton'></li> dan terpasang pada akhir list menu horizontal yang sobat gunakan

Tertarik untuk menggunakan dan memasang search engine atau kolom pencarian fixed di blog sobat? Silahkan di coba menerapkan kode-kode yang telah saya jelaskan pada artikel diatas. Semoga berhasil!