Cara Membuat Search Engine Box Keren Untuk Blogger

Kali ini om ridwan akan share tutorial blog nih untuk sahabat semua. Nama tutorial blog kali ini yaitu Cara Membuat Search Engine Box Keren Untuk Blogger. Jika sahabat ingin mencoba. Silahkan sahabat  ikuti langkah - langkah di bawah ini.

• Log-in ke Blogger
• Lalu masuk ke template
• Klik Edit HTML
• Lalu klik Lanjutkan
• Ceklis Expand Template Widget
• Lalu cari kode ]]></b:skin>, Copy kode di bawah ini tepat di atas kode ]]></b:skin>

Search Engine Box Keren Berwarna Hitam :

#search {
}
#search input[type="text"] {
background: url(search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#search input[type="text"]:focus {
width: 200px;
}

Search Engine Box Keren Berwarna Putih :

#search {
}
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#search input[type="text"]:focus {
width: 200px;
}

• Pilih salah satu kode di atas ini sesuai dengan keinginan warna yang sahabat inginkan
• Untuk langkah terakhir
• Masuk ke Tata Letak
• Lalu Tambah Gadget
• Klik HTML / JavaScript
• Copy kode di bawah ini dan pastekan di HTML / JavaScript

<form method="get" action="http://xbalzt.blogspot.com/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>

• Jangan lupa ubah yang berwarna merah di atas dengan URL blogger sahabat sendiri
• Selesai

Jika ada yang tidak di mengerti hubungi om ridwan software