Daniel Site: Blog

Tampilkan postingan dengan label Blog. Tampilkan semua postingan

[Blog] Cara Membuat Form Search Melebar Saat di Klik (Seperti di Website Apple.com)

Ada yang pernah buka apple.com ?? atau lihat di kolom search ujung blog ini.. Coba kalian klik, kolom akan melebar, pingin seperti itu? saya kasih tau caranya :)

Langkah yang harus dibuat adalah, sebagai berikut :

1. Masuk ke blogger sobat.

2. Pergi ke Design / Rancangan - Page Elements / Elemen Laman - Add a Gadget / Tambahkan Gadget - HTML / Javascript

3. Paste Kode berikut didalamnya dan Simpan

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

4. Belum selesai, Pergi lagi ke Design / Rancangan - Edit HTML
5. Cari kode ]]></b:skin>, Paste kode - kode berikut, tepat diatasnya.

a. Untuk Search Form Dark Background

CSSnya :

#search {
}
#search input[type="text"] {
background: url(http://www.bloggermint.com/demos/css3searchbox/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;
}

b. Untuk Search Form Light Background

CSSnya :

#search { } #search input[type="text"]{ background: url(http://www.bloggermint.com/demos/css3searchbox/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; }

c. Untuk Style Apple.com

CSSnya :

#search { } #search input[type="text"] { background: url(http://www.bloggermint.com/demos/css3searchbox/search-white.png)
no-repeat 10px 6px #444; border: 0 none; font: bold 12px Arial,Helvetica,Sans-serif; color: #d7d7d7; 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 { background: url(http://www.bloggermint.com/demos/css3searchbox/search-dark.png)
no-repeat 10px 6px #fcfcfc; color: #6a6f75; width: 200px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); }

6. Terakhir, Simpan Template. dan Lihat hasil kerja sobat.

Silahkan modif sendiri CSSnya sesuai dengan keinginan sobat.
Kalau ada yang masih bingung, jangan segan - segan bertanya dengan berkomentar dibawah.
Sekian Cara Membuat Form Search Melebar Seperti Apple.com

Sumber : MyHavies

Add Comment

Label: Blog

Memasang Widget Burung Twitter Terbang

Buat yang suka Twitteran ama Blogging , Bisa juga pasang Profil twitternya di blog masing-masing :D Nah , Ane akan Menjelaskan cara menambahkan Widget Burung Twitter Terbang Di Blog agan , Seperti Ini :

Caranya :

1. Login akun Blogger agan.
2. Klik Tata Letak > Klik Tambah Gadget > Pilih HTML/JavaSript

Nah , Masukkan kode berikut :

<script type="text/javascript" src="http://tateluproject.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3cVAQex7v4Fl0IeKZWEGImyxVguQa34eadj3JOReui4ub6HHrbvG8v9HVHPb4r0Ug7IgB0bGXXCDiJG5Ccvby5LfjOFJak0pIP7Pqgz0gRdHeo8qUnggn-YWcOcbJVLdAw4pMYqWDu_8/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Username";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>

Nah , tulisan "Username" bisa diganti dengan Username agan ... Warna Burung-nya pun juga bisa diganti , tinggal ganti tulisan "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3cVAQex7v4Fl0IeKZWEGImyxVguQa34eadj3JOReui4ub6HHrbvG8v9HVHPb4r0Ug7IgB0bGXXCDiJG5Ccvby5LfjOFJak0pIP7Pqgz0gRdHeo8qUnggn-YWcOcbJVLdAw4pMYqWDu_8/s1600/burung+twitter+terbang.png " Dengan Kode Berikut :

Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH76FsXcnWqqc2KWVJflbx4i5PAKqQEq9YYIuUdQ1SnhFsOHYbcuWdHZk_ORO-x3PlIu3RCMgF9h0esEnuqQS5pHFV9G2_2rCaIRa9rO2M0ObV7ynQAvqYCs3D1RO-JXJRaM73Ee0KBKY/s1600/yellow+bird.png
Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4w6wQGErKsKzsYKxn1OZ1WP-Aw_aEbrSoMR6EF1xzp5X1MlOx6hhc-zLM_R4Uzu1z1tbNE-d6weMtelz2GFiRVprB4xkym59UkHAE3fLoEgfq2Tu0OWnjrpDIQ4FVcjYMuXL7Ka81-A4/s1600/black+bird.png
Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5DQ3_LToVBXANO5wJ23WLkgLFQedgCW-zv7ndQpuWXjyhUK4_tqUHeWZIUIo29JN5Pk0EXUqvWvHSvIjjOENLBOSsITgvSNV5DKTwy1MiXH1MoUq-rS-J2o5etRMq0kDSdRE-qU4rOIA/s1600/Blue+bird.png
Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_raaBb5ySvJUMhaFN5FnyGxOXO8IdIc6prBSQowluVHvo5-T6U52oDuu01EMzrLwdSFkftf3C3tljS1dErkshZ3Vlr46ooRw2xwZuYxjGo3FrdE3ttBs5tIongJ0YQyzO64rsyrpauUQ/s1600/brown+bird.png

Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy2m9latyOW6BTfiRQaQJP2HI7yxUyHM0o07DhhMVGU2x38rkJRSfxse6JzVT_U_5nTHZaIQeNBx5QrrIiTi_gqBSMnbiMYrrFUfLRnI5Cn0Br_nwq1apu_CaFt9WMBw_lPV9hwKaDSgE/s1600/Green+bird.png

Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivjsEpk3jip-KF5-tWabdMdr6Y3gWY4c3n15eYN-KHBUJwdfShBPIJLxxSA389_nFZqTuE9Vn7-p6R5TiiFjRjs9kHiqCBNrDiX2m6dH1q_MsILygwWVqw1Dsmyq9R7YTepFpdvLCskZ8/s1600/purple+bird.png
Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExGoztZv0LJNbi9MznPSu6BQogp9toYpJyak_gzengBPptqlDTdlBc7wY2d4Y_eqTo8ASJKGpUhuE6wvBgDdhpA-iAvZMClG7jwRt9ModwUE34ZYqEk6Bhay5YWG8SrVYHjQ4oEIZhqU/s1600/white+bird.png

Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6GuvEXZLuwOAKxO5RNtTCqiGSDjAh-HiciJw6omLWPAvGAhC64i5eTu5lmIpOLaEu8JuPkbZa8rXRMgKFVkTqM21mc7Z9ZEthITGLnt9-Q9L8r_QPtYp_5FjwSWKOYicNRj8piE9EHe8/s1600/red+bird.png