Sabtu, 07 Februari 2015

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

Cara Memasang Search Engine Fixed Di Blog

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 Anda 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 Anda lihat dengan mengklik tombol demo berikut ini


Jika Anda 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 Anda 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 Anda, 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 Anda..</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 Anda. 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 Anda
<div class='searchbutton'></div>

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

Misalnya didalam template blog Anda 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 Anda gunakan

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

Cara Memasang Search Engine Fixed Di Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

32 komentar:

  1. makasih mba search engine fixed di blognya..tinggal pasang, manteb hasilnya

    BalasHapus
    Balasan
    1. iya sama-sama
      jangan lupa bayar

      Hapus
    2. mongo-mongo... akan diterima dengan senang hati :D

      Hapus
  2. ibu membuat loading blog kita....

    BalasHapus
    Balasan
    1. maksudnya loading blog akan lama gitu mas? tidak mempengaruhi mas..

      Hapus
  3. form pencarian di blogku juga begini... nice info mbak :)

    BalasHapus
    Balasan
    1. iya mas, sama.. sudah bawaan templatenya ya mas :)

      Hapus
  4. wah jadi full gitu yambak,asyik juga nih bila diterapkan diblog.
    tp gimana dengan loadingnya mbak berpengaruh apa enggak ya,sebab kode2 nya banyak banget

    BalasHapus
    Balasan
    1. silahkan mas Yanto.. untuk loading blog tidak akan mempengaruhi kok..

      Hapus
    2. bagus tuh kalau nggak mempengarui loading.
      saya simpen dulu deh kode scriptnya mbak

      Hapus
    3. wah responsive bener jawabannya.patut ditiru nih mbak..
      btw pantesan saya selalu ketinggalan update artikelnya ternyata saya cek belum follow blognya toh.
      sekalian izin follow yambak

      Hapus
    4. hehee biasa saja mas..
      silahkan mas Yan,, terimakasih banyak..

      Hapus
  5. Tampilannya jadi elegant ya mabk, perlu di coba ni di blog saya yang baru saya buat, terima kasih!

    BalasHapus
    Balasan
    1. silahkan di coba mas.. terimakasih juga ya.. :)

      Hapus
  6. keren mbak, kapan2 aku coba terapkan di blog baruku :)

    BalasHapus
    Balasan
    1. boleh mas, sampai kapan pun artikel ini tetap selalu ada buat mas Indra :)

      Hapus
  7. keren juga mbak Search Engine Fixed Di Blognya, saya ijin simpan scriptnya dulu ya mbak, trims

    BalasHapus
    Balasan
    1. silahkan mas Hari disimpan dulu, jangan sampai lupa ya..

      Hapus
  8. waw lumayan panjang juga kode search engine fixed nya sekiranya dipasang pada blog butut saya valid HTML5 ngga bu? maklumsaya sedang maniak dengan HTML5,apapun kode kalau ngga valid berat untuk memasangnya...maaf ya bu

    BalasHapus
    Balasan
    1. sebenarnya tidak panjang mas, kalau digabungkan bisa jadi pendek kok.. :)
      sudah saya cek mas, dan kode diatas valid html5..

      Hapus
  9. Sepertinya bisa menjadi pilihan alternatif bagi yang sedang memerlukannya nih kode untuk memasang search engine fixed di html blog-nya

    BalasHapus
    Balasan
    1. bisa mas, sesuai minat dan keinginan masing-masing.. :)

      Hapus
  10. wah blog panduan blog ini. kualitas fitur seolah-olah nggak berharga kalau justru efeknya bikin berat blog. tapi kalau nggak kenapa tidak dicoba betul betul???

    BalasHapus
    Balasan
    1. kode diatas tidak membuat loading blog berat kok mas.. awalnya saya ingin memasang di blog ini tapi saya lagi malas ganti kolom pencarian yang sudah ada..

      Hapus
  11. Balasan
    1. silahkan di tiru dan dipraktekkan mas.. :)

      Hapus
  12. wah kodenya banyak ya mbak,hehe
    ijin simpan scriptnya dulu ya mbak :)

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia