Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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!


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 «


2 komentar:

  1. Mau nanya sekalian BlogWalking
    Kalo bikin search engine pake form search di atas di Rancangan > Edit HTML gimana ya?

    Soalnya Saya udah punya search engine dari templatesnya, tapi kurang bagus formnya.

    BalasHapus
  2. tx..
    langsung ke tkp..
    eh..jangan lupa follow me ya..
    ane da follow agann nii

    BalasHapus

 
GR | Edited by | gubhug reyot