Lengkapi Blog dengan Search Form-Box Manis: Creating a Search Form using CSS3

Search form manis yang semanis si hitam manis ini amat pas dengan trend blog saat ini. Sebuah search form mungil yang terbangun dari paduan sedikit script untuk menciptakan tampilan dinamis dan CSS3 yang memberikan tampilan elegan yang terlihat manis. Membuat search form atau search box dengan cara seperti ini akan sangat efisien untuk sebuah blog daripada menggunakan kode html "nggedabyah" (bahasa Indonesia:sangat banyak) plus perlu loading lama untuk inventarisasi posting. Sampeyan hanya perlu menyimpan semua kode melalui "Add a Gadget" atau "Tambah Gadget" di "page Elements (Elemen Laman)", maka tanpa "ba bi bu", si Search Form akan nongol dan siap melaksanakan perintah semua pengunjung termasuk sampeyan yang tentu saja sekali-sekali pasti juga akan menggunakannya selain saat mencoba! He ... he ... Apa perlu nyoba? Ha .... ha ...boleh, dong! Yang nggak boleh dicoba khan cuma' calon isteri (he ... he ... itu kalau nggak di ijinkan, ya?!). He ... he tapi dasar sampeyan ..., uhuh .... biar nggak diijinkan sukanya pakai rayuan gombal. "Udah dek..., satu kali saja, dah... Entar mo minta apapun tak kasih, dah! Mo minta gunung? Mo minta tak seberangkan di Samodera Indonesia? Atau mo wisata ke bulan?". Hooo... hooo... Rayuan gombal, kuno, jadi senjata pamungkas!!!! He .... gadis-gadis...! Ingat pesan eyang! "Jangan sekali-kali berikan yang satu itu kepada siapapun sampai ajal menjemput mu!". (He? Apa-apaan 'tuh. Eyang gila kali, ya! Masa sampai ajal menjemput! Ah ... mungkin maksud eyang "sampai janur kuning menjemput mu, ya?!").

He ... heh ... gubhug reyot ngelantur lagi! Ayo balik ke tutorial! He ..eh ... demonya dulu, nih!

D E M O

Cara Menggunakan Kode Search Form

• Login : Login kee Blogger.
  • Tuliskan "User Name (Nama Pengguna)" atau bisa juga gunakan "Email Address".
  • Tuliskan "Password (Sandi)".
  • KLIK "Login".
• Sesaat setelah login maka akan terlihat halaman "Dashboard (Dasbor)".
• KLIK link "Design (Rancangan)"..
Bagian Design (Rancangan) yang akan terlihat setelah anda klik tadi adalah "Page Elements (Element Laman)", yang ditandai dengan terlihatnya beberapa box. Diantaranya bergaris putus-putus yang merupakan pola dasar bentuk halaman blog sampeyan.
• KLIK Add a Gadget pada "Add a Gadget" dimana search form nantinya akan akan ditampilkan (sidebar, di atas header atau yang lain). Tunggu beberapa saat!
• Akan terlihat beberapa pilihan widget yang menjadi pilihan untuk ditampilkan di blog. Pilih dan KLIK "HTML/Javascript".
• Masukkan semua kode HTML (CSS dan xHTML) dalam box yang tersedia.
• KLIK "SAVE Templates (Simpan Template)".
• Open your blog to see results!

Ada 2 buah search form yang aku sediakan, silahkan pilih yang sampeyan suka!

Search Form-1

<style type="text/css">
#GRcari-1 {
       padding: 1px 4px;
       float: left;
       background: #777;
       background: -moz-linear-gradient(top, #999, #555);
       background: -webkit-gradient(linear, 0% top, 0% bottom, from(#999), to(#555));
       border: 2px solid #222;
       border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
}
#GRsrc-1 {
       width: 170px;
       margin: 0 0 0 3px;
       font: 12px Tahoma;
       background: #eee;
       background: -moz-linear-gradient(top, #aaa, #fff); 
       color: #0066FF;
       text-shadow: 1px 1px 1px #000; 
       border: 1px solid #333;
       border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
       box-shadow: 1px 1px 6px #fff;
      -moz-box-shadow: 1px 1px 6px #fff;
      -webkit-box-shadow: 1px 1px 6px #fff;
       padding: 4px 3px 6px;
       margin: 4px; 
}
#GRbtn-1 {
       border: 0px solid transparent;
       outline: none; 
       width: 60px;
       margin: 0 3px 0 0;
       font: 11px Helvetica;
       background: #999;
       background: -moz-linear-gradient(top, #222, #aaa);
       background: -webkit-gradient(linear, 0% top, 0% bottom, from(#222), to(#aaa));
       color: blue;
       text-shadow: 1px 1px 1px #000;
       border: 1px solid;
       border-color: #444 #bbb #bbb #444;
       border-radius: 8px;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
       padding: 1px 3px 2px;
       text-align: center; 
       cursor: pointer;
      -o-transition: 0.8s ease-in;
      -moz-transition: 0.8s ease-in;
      -webkit-transition: 0.8s ease-in;
}
#GRbtn-1:hover {
       color: red;
      -o-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
}
#GRbtn-1:active {
       background: #999;
       background: -moz-linear-gradient(top, #555, #eee);
       background: -webkit-gradient(linear, 0% top, 0% bottom, from(#555), to(#eee));
       border: 1px solid #111;
       font-size: 10px;   
} 
span.bokenjero-1 {
       padding: 1px 2px;
       border: 1px outset #aaa;
       border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px; 
       display: block;
       float: left;
       background: #777;
} 
</style>

<form id="GRcari-1" action="http://gubhugreyot.blogspot.com/search" style="display:inline;" method="get">
<span class="bokenjero-1">
<input id="GRsrc-1" name="q" type="text" value="Search..." onfocus="if (this.value=='Search...') {this.value='';}" onblur="if (this.value=='') {this.value='Search...';}" />
<input id="GRbtn-1" value="Search" type="submit"/>
</span>
</form>

Search Form-2

<style type="text/css">
#GRcari-2 {
      float: left;
      width: 220px; 
      background: #eee;
      padding: 3px;
      zoom: 1; 
      margin-bottom: 1px;
      border: 1px outset #990000;
      border-radius: 6px;   
     -moz-border-radius: 6px;    
     -webkit-border-radius: 6px;
      box-shadow: 1px 1px 3px #111;
     -moz-box-shadow: 1px 1px 3px #111; 
     -webkit-box-shadow: 1px 1px 3px #111;
}
#GRsrc-2 { 
      width: 124px;
      border: solid 1px #990000;
      padding: 3px 5px 3px 10px;
      border-radius: 15px;   
     -moz-border-radius: 15px;
     -webkit-border-radius: 15px; 
      box-shadow: -1px -1px 1px #000, 1px 1px 10px #333; 
     -moz-box-shadow: -1px -1px 1px #000, 1px 1px 10px #333;      
     -webkit-box-shadow: -1px -1px 1px #000, 1px 1px 10px #333; 
      background: #999 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/blueGradV100H2.png) top left repeat-x;
      background: -moz-linear-gradient(top, #209cc2, #0f2151); 
      background: -webkit-gradient(linear, 0% top, 0% bottom, from(#209cc2), to(#0f2151));      
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#209cc2', endColorstr='#0f2151');
      font-family: Arial;
      font-size: 12px;
      color: #eee; 
}

#GRbtn-2 {
      border: 0px solid transparent;
      outline: none;
      cursor: pointer;
      color: #fff;
      font-size: 14px !important;
      border: solid 1px #99CCFF;
      padding-bottom: 1px;
      width: 65px;
      text-shadow: 1px 1px 1px #000;
      border-radius: 12px;
     -moz-border-radius: 12px;
     -webkit-border-radius: 12px;
      background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/gradGrayV40H2.png) bottom left repeat-x;
      background: -moz-linear-gradient(top, #000033, #ddd);
      background: -webkit-gradient(linear, left top, left bottom, from(#000033), to(#ddd));
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000033', endColorstr='#dddddd'); 
     -o-transition: all 0.8s ease-out;
     -moz-transition: all 0.8s ease-out;  
     -webkit-transition: all 0.8s ease-out;  
}
#GRbtn-2:hover {
      color: #FFFF00;    
      background: #555;
      box-shadow: 1px 1px 8px #000;
     -moz-box-shadow: 1px 1px 8px #000;
     -webkit-box-shadow: 1px 1px 8px #000;
}
#GRbtn-2:active {
      background: #666;
      background: -moz-linear-gradient(top, #fff, #000);
      background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000');  
      font-size: 12px;
      color: #FFCC00;    
}
.bokenjero-2 {
      display: block;
      float: right;
      background: #0099FF;
      padding: 2px; 
      margin: 2px 2px 1px 2px;
      border: 1px solid red;
      border-radius: 14px;
     -moz-border-radius: 14px;
     -webkit-border-radius: 14px;
      box-shadow: -1px -1px 12px #333;
     -moz-box-shadow: -1px -1px 12px #333;
     -webkit-box-shadow: -1px -1px 12px #333;
}
</style>

<form id="GRcari-2" action="http://gubhugreyot.blogspot.com/search" style="display:inline;" method="get">
<span class="bokenjero-2">
<input id="GRsrc-2" name="q" type="text" value="Search..." onfocus="if (this.value=='Search...') {this.value='';}" onblur="if (this.value=='') {this.value='Search...';}" />
<input id="GRbtn-2" value="Search" type="submit"/>
</span>
</form>

Catatan :

Ganti http://gubhugreyot.blogspot.com dengan URL blog sampeyan!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 


• 

» Happy Blogging - gubhugreyot «