MEMBUAT SEARCH BOX KEREN
Membuat Search Box Keren - Search box adalah kolom kotak pencarian yg disediakan untuk pengunjung bermanfaat mencari konten artikel yg mereka butuhkan, eksistensi widget search box ini sangat berguna, tetapi sayangnya widget search box bawaan google tampilannya dari para blogger kurang menarik, nah buat itulah aku akan share membuat search box ini sebagai keren caranya pun cukup gampang tinggan masukkan widget kemudian tambahkan kodenya lalu simpan, ttinggal anda letakkan widget tersebut sinkron harapan anda seluruh:
Semua widget search ini cara membuatnya hampir sama yaitu:
1. Log in ke blogger
2. Masuk rapikan letak
3. Tambahkan widget pilih HTML/ Javascript kemudian tambahkan kodenya
4. Simpan
Membuat Search Box versi 1:
#search-box
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
target='_top'>
placeholder='Search Keyword Here....' type='text'/>
type='submit'>Search
gg Ganti kode sesuai kode warna pada gambar diatas sinkron warna kesukaan anda
Membuat Search Widget versi dua:
#mediablogger-searchbox border-radius: 5px; background: url(//4.bp.blogspot.com/17dWPUuCMEE/UQr5WvW2inI/AAAAAAAAAWM/xWAzhlw4ez0/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent; width: 307px;height: 50px;disaply: block;
form#mediablogger-searchform display: block; padding: 9px 16px; margin: 0;
form#mediablogger-searchform #s padding-left: 24px !Important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent; form#mediablogger-searchform#sbutton margin: 0; padding: 0; height: 40px; width: 74px; vertical-align: top; border: none; background: transparent;
Ganti kode yang aku blog dengan warna hitam dengan url gambar kesukaan anda dibawah ini:
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8NCpvvsE7L-mpoSFU2DD6w1b66hFJb983TI1W2GWlEsmKhBEoSB2Dp45cNqpmUWPn0MbFwmHb1h429EvzbicBFkFtMPvykRCQiByjzt8BgwJDSeftSCArJ058nqWVDzicRuwhfmWdTZz0/s1600/impoint.blogspot.com-red.png
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-_SoP4MZg2Yj7e7ZcTBGV165EPkD0XsRJm2znusXT0mQwFa5QOr9RK_C_jmB1IHjUWdpD71hY756TUZ_fadwtiHgrxx2lLXA1q01goMEaYVq9gusiUH36HnsLuvcAQdEytl9yNUn0YV3M/s1600/impoint.blogspot.com-blue.png
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrFdIr8A2Cg-cBr719XzZ-sdbapiko6x3bRHhWDtjki4fZDhyphenhyphen4FhAUgxC-zOffdtOnHWiCPDlU9JPKNbyeQoEq6TxcLWLxztss-soeD8YqUkbj4JS-3fEbtzXxO7kt-A4W5qCh1D78pwIr/s1600/impoint.blogspot.com-orange.png
Membuat Search Widget Versi 3
#a-searchboxbackground:url(//lh5.googleusercontent.com/Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;
form#a-searchformdisplay: block;padding: 10px 12px;margin:0;
form#a-searchform #apadding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;
form#a-searchform #abuttonmargin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;
Ganti url yg aku blok sinkron dengan warna yg anda inginkan dibawah ini:
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98A6LwfgmBrB_nwvDkYLexa1TpgpmyUwevB3WbKDNeYKdOWBy8vfOsx8qcmZjVbP9D0kvcQOo69c7IK3h7kIN7dP96qVcRnoGccUkGDYJg9ew2nV20Nb_dSj_aDyOx4QZ4kvPASa1-n8V/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzIf51CjAGO8YjXPdQQB917rNkStcwXSMQzXXyGpLVRW4kv9OMQQHHUzcmQCg_D3w7TaCEybN0YwF2xBzopiahJRBkKXTGkmnegO0RsUrzvjaiL7M2vGQcfPoYo14jTBqwUtoaji_R0qIT/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMmSaF4U5HKGMGK0Z4hqnrNTedjSCsaTuOx8zadh3KLp9604DEyRzERHPUAtNLHPSatv5ZHawj7uzM8LjPKClKAqK_9GUM0wKcRG0YquSG67QUwlvAzTY92RbX_7uAEBKokx_bDVHt4re0/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfi3-XRFFd0Y1lTEpgCI8qnHyKOa_XZ6XyRNhrkaokglsYLGSwkxP82ORrzPWJU_uZn1jYwJBEeB2e2aGcCab56z_04rPbcZEi1OPZeHVYx3EIt5ybbf7tNOUudOs1JFZgA7PBIKqCHKYl/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFVa4obNLgYdklGB6utlNo8w78z9lHbmQ43O7BQU_fzEY_vh1skIqfet8voKAbXUSaFqs4naqL_MBy9o3L5kfVfGgvLu4j2b_OoHacPsgLs-gGtVcUmAE6QqPToVUmX6lOX5-YwDfWJG5f/
Demikian tutorial cara menciptakan search box keren, mungkin anda pula perlu membaca:
Membuat bermacam-macam popular post keren
Membuat Label keren
Menghias link kredit footer
Membuat Navigasi angka pada bawah halaman
Membuat Header 2 kolom
Semua widget search ini cara membuatnya hampir sama yaitu:
1. Log in ke blogger
2. Masuk rapikan letak
3. Tambahkan widget pilih HTML/ Javascript kemudian tambahkan kodenya
4. Simpan
Membuat Search Box versi 1:
#search-box
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
target='_top'>
placeholder='Search Keyword Here....' type='text'/>
type='submit'>Search
gg Ganti kode sesuai kode warna pada gambar diatas sinkron warna kesukaan anda
Membuat Search Widget versi dua:
#mediablogger-searchbox border-radius: 5px; background: url(//4.bp.blogspot.com/17dWPUuCMEE/UQr5WvW2inI/AAAAAAAAAWM/xWAzhlw4ez0/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent; width: 307px;height: 50px;disaply: block;
form#mediablogger-searchform display: block; padding: 9px 16px; margin: 0;
form#mediablogger-searchform #s padding-left: 24px !Important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent; form#mediablogger-searchform#sbutton margin: 0; padding: 0; height: 40px; width: 74px; vertical-align: top; border: none; background: transparent;
Ganti kode yang aku blog dengan warna hitam dengan url gambar kesukaan anda dibawah ini:
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8NCpvvsE7L-mpoSFU2DD6w1b66hFJb983TI1W2GWlEsmKhBEoSB2Dp45cNqpmUWPn0MbFwmHb1h429EvzbicBFkFtMPvykRCQiByjzt8BgwJDSeftSCArJ058nqWVDzicRuwhfmWdTZz0/s1600/impoint.blogspot.com-red.png
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-_SoP4MZg2Yj7e7ZcTBGV165EPkD0XsRJm2znusXT0mQwFa5QOr9RK_C_jmB1IHjUWdpD71hY756TUZ_fadwtiHgrxx2lLXA1q01goMEaYVq9gusiUH36HnsLuvcAQdEytl9yNUn0YV3M/s1600/impoint.blogspot.com-blue.png
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrFdIr8A2Cg-cBr719XzZ-sdbapiko6x3bRHhWDtjki4fZDhyphenhyphen4FhAUgxC-zOffdtOnHWiCPDlU9JPKNbyeQoEq6TxcLWLxztss-soeD8YqUkbj4JS-3fEbtzXxO7kt-A4W5qCh1D78pwIr/s1600/impoint.blogspot.com-orange.png
Membuat Search Widget Versi 3
#a-searchboxbackground:url(//lh5.googleusercontent.com/Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;
form#a-searchformdisplay: block;padding: 10px 12px;margin:0;
form#a-searchform #apadding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;
form#a-searchform #abuttonmargin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;
Ganti url yg aku blok sinkron dengan warna yg anda inginkan dibawah ini:
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98A6LwfgmBrB_nwvDkYLexa1TpgpmyUwevB3WbKDNeYKdOWBy8vfOsx8qcmZjVbP9D0kvcQOo69c7IK3h7kIN7dP96qVcRnoGccUkGDYJg9ew2nV20Nb_dSj_aDyOx4QZ4kvPASa1-n8V/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzIf51CjAGO8YjXPdQQB917rNkStcwXSMQzXXyGpLVRW4kv9OMQQHHUzcmQCg_D3w7TaCEybN0YwF2xBzopiahJRBkKXTGkmnegO0RsUrzvjaiL7M2vGQcfPoYo14jTBqwUtoaji_R0qIT/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMmSaF4U5HKGMGK0Z4hqnrNTedjSCsaTuOx8zadh3KLp9604DEyRzERHPUAtNLHPSatv5ZHawj7uzM8LjPKClKAqK_9GUM0wKcRG0YquSG67QUwlvAzTY92RbX_7uAEBKokx_bDVHt4re0/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfi3-XRFFd0Y1lTEpgCI8qnHyKOa_XZ6XyRNhrkaokglsYLGSwkxP82ORrzPWJU_uZn1jYwJBEeB2e2aGcCab56z_04rPbcZEi1OPZeHVYx3EIt5ybbf7tNOUudOs1JFZgA7PBIKqCHKYl/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFVa4obNLgYdklGB6utlNo8w78z9lHbmQ43O7BQU_fzEY_vh1skIqfet8voKAbXUSaFqs4naqL_MBy9o3L5kfVfGgvLu4j2b_OoHacPsgLs-gGtVcUmAE6QqPToVUmX6lOX5-YwDfWJG5f/
Demikian tutorial cara menciptakan search box keren, mungkin anda pula perlu membaca:
Membuat bermacam-macam popular post keren
Membuat Label keren
Menghias link kredit footer
Membuat Navigasi angka pada bawah halaman
Membuat Header 2 kolom
Comments
Post a Comment