untuk demo bisa liat di sidebar kanan ada search box ,nah itu dia contohnya
langsung aja dehh
1.Masuk ke blogger >> Rancangan >> Edit HTML dan centang expand template widget
2.Letakkan kode berikut diatas ]]></b:skin>
Search Box on Dark Background
#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 Box on Light Background
#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;}
Dan terakhir untuk kode pemanggilnya nih
<form method="get" action="/search" id="search"><input name="q" type="text" size="40" placeholder="Search..." /></form>
Silahkan kreasikan sendiri yahh semoga bermanfaat
sumber
oh iya sob, itu url backgroundnya apa memang seperti itu?
BalasHapusatau adakah file yang bisa didownload lalu di simpan di image hosting?
mohon pencerahannya sob :)
Sukses gan, cihuyyyy .. nice info :)
BalasHapus