BERIKUT ini cara kembuat kotak pencarian (Search Box) blog mirip Yahoo, yakni Kotak Pencarian Yahoo Indonesia. This is a Yahoo! Search Box Style!
Fungsi meniru atau menyerupai tampilan sebuah situs web terkenal adalah, selain biar tampak keren dan profesional, juga agar blog kita "user friendly", dikenal dengan istilah UX (User Experience). Pengguna jadi terbiasa dan tidak merasa asing.
Kotak pencarian mirip Yahoo! Search Box ini bisa ditampilkan di header sebelah nama blog (logo), bisa juga di atas atau di bawah posting. Penampakannya seperti di gambar di atas.
CARA MEMBUAT KOTAK PENCARIAN MIRIP YAHOO!
Fungsi meniru atau menyerupai tampilan sebuah situs web terkenal adalah, selain biar tampak keren dan profesional, juga agar blog kita "user friendly", dikenal dengan istilah UX (User Experience). Pengguna jadi terbiasa dan tidak merasa asing.
Kotak pencarian mirip Yahoo! Search Box ini bisa ditampilkan di header sebelah nama blog (logo), bisa juga di atas atau di bawah posting. Penampakannya seperti di gambar di atas.
CARA MEMBUAT KOTAK PENCARIAN MIRIP YAHOO!
1. Template >Edit HTML
2. Capas kode berikut ini di atas kode]]>
2. Capas kode berikut ini di atas kode]]>
padding: 10px;">.searchform {background: url(https://lh6.googleusercontent.com/-_1OwVk5Mg6w/VK6wR9-Yf3I/AAAAAAAAJTM/4hlGeo2ddFQ/w550-h47-no/yahoo%2Bsearch.png) no-repeat; width:468px;height:47px;
display: inline-block;zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;border: solid 0px #ccc;padding: 0px;}
.searchform input {font: normal 12px Arial, Helvetica, sans-serif;padding:6px;}
.searchform .searchfield {background: #fff;width: 457px;outline: none;margin: 5px 7px 0px 10px;border-top: 1px solid #888;border-left: 1px solid #888;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;}
.searchform .searchbutton {background: #3775dd;box-shadow: 0 2px #21487f;border: 0;height: 27px;width: 75px;padding: 5px;font: 500 15px sans-serif;color: #fff;border-radius: 4px;}
Catatan:
DemikianCara Membuat Kotak Pencarian Blog Mirip Yahoo! Biar keren dan user friendly! Good Luck!
reff : http://www.contohblog.com/2015/01/cara-membuat-kotak-pencarian-blog-mirip-yahoo.html
display: inline-block;zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;border: solid 0px #ccc;padding: 0px;}
.searchform input {font: normal 12px Arial, Helvetica, sans-serif;padding:6px;}
.searchform .searchfield {background: #fff;width: 457px;outline: none;margin: 5px 7px 0px 10px;border-top: 1px solid #888;border-left: 1px solid #888;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;}
.searchform .searchbutton {background: #3775dd;box-shadow: 0 2px #21487f;border: 0;height: 27px;width: 75px;padding: 5px;font: 500 15px sans-serif;color: #fff;border-radius: 4px;}
Catatan:
- 468px = ukuran lebar kotak ini untuk ditampilkan di samping logo/nama blog.Bisa diubah.
- 360px = ukuran lebar kotak entry teks, sesuaikan dengan lebar kotak.
Kembali ke Dashboard:
4. Layout > Add a NewGadget di samping logo header > pilih "HTML/Java Script"
5. Copas kode berikut ini:
5. Copas kode berikut ini:
6. Save!!!
DemikianCara Membuat Kotak Pencarian Blog Mirip Yahoo! Biar keren dan user friendly! Good Luck!
reff : http://www.contohblog.com/2015/01/cara-membuat-kotak-pencarian-blog-mirip-yahoo.html
0 comments:
Post a Comment