CARA MEMBUAT KONTAK PENCARIAN PLUS MEDSOS DI SIDEBAR BLOG - Untuk KOTAK Pencarian (Search Box) dalam suatu merupakan salah satu menu utama yang wajib ada dalam sebuah situs web atau blog.
Cara Membuat Kotak Pencarian plus MEDSOD di Sidebar Blog
 |
| CARA MEMBUAT KONTAK PENCARIAN PLUS MEDSOS DI SIDEBAR BLOG |
Sebab dengan Kotak pencarian ini memudahkan pengunjung dan admin blog sendiri untuk mencari informasi yang dibutuhkan.
Kotak pencarian harus mudah dilihat, misalnya di header atau sidebar paling atas. Search Box ini terkait dengan User Experience (UX) atau pengalaman pengguna.
Blog yang tidak dipasangi kotak pencarian termasuk kategori yang buruk dan tidak ramah pengguna (user friendly).
Sobat bisa ikuti langkah langkahnya di bawah ini :
1. Buka Layout > Add a Gadget di sidebar paling atas.
2. Lalu Copy + Paste kode berikut ini di kolom "Content". Kolom judul biarkan kosong.
<!-- SEARCH BOX -->
<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {height: 30px;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: 7px 0 12px 1em;color: #333;outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 32px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 32px;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;}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
<!-- SEARCH BOX END -->
<!-- SOCIAL PROFILE END -->
<div class='widget-content'>
<style>
#socialwidget {width: 300px;margin:10px 1px 10px 1px;}
.TZ-social{padding:0 5px 15px;}
.TZ-social img:hover{opacity:0.8}
.googleplus {background: #ffffff;border-top: 1px solid white;border-bottom: 1px solid #ebebeb;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
.TZ {background: #ffffff;border-top: 1px solid white;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
.TZ span {color: #000;font-size: 11px;position: absolute;margin: -12px 100px;width: 310px;}
#widgetbox .author-credit a {font-size: 10px;font-size: 10px;letter-spacing: 1px;color: #1E598E;text-decoration: none;}
.TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
</style>
<div id='socialwidget'>
<div class='TZ-social'>
<!-- social ico -->
<center>
<a href='http://facebook.com/username' rel='nofollow' style='margin-right: 15px;' target='_blank'>
<img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-vtxm9urzUaZ5Ev1L3_YjiSrg8W8JUuBWnkYVF7YvQ30YacMIhkdy2t4eoEdrfeTxwfL51fKJpQByRkI6983uXImRAS7x6OrjDhNxlf1ZANh8Br6oeiQNmUuDqGl3AVXPsXEMsR2XLVo/s1600/facebook.png'/></a>
<a href='http://twitter.com/username' rel='nofollow' style='margin-right: 12px;' target='_blank'>
<img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyDd76tQ_O03WU1acc5RwzdQsseGRe4EoJ1_rllYtGWUjPur4VvTIPwVXbmvCFlqng_PuJFtS024xDY6FQ7YzuRwiuSU070sTIxThN4mHjlC6TNsrOTeCueXHnzbeJtrXD4IJAjZAGUu4/s1600/twitter.png'/></a>
<a href='https://plus.google.com/ID Number/posts' rel='me' style='margin-right: 12px;' target='_blank'>
<img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiee_UzBozPMGcPdOEjYLYz_8Wi1LEYvJGK_3VLnaC8huZ_eOaWqofkqayghF0RtZPXsWGmn4Juluu6RnokqNQQquqADCzqe4ZE5DP3wkUkeQDILSmQfrtf6dIxaCYxxsaZZYH6JFJNg7c/s1600/gplus.png'/></a>
<a href='http://www.pinterest.com/username' style='margin-right: 12px;' target='_blank'>
<img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGAK5dOjSQnQuiQltPnFUTHXv69mlbMY01kdHW405lQOsRIMIHHrEVTltAq8_e-hkKD9I2gbeW6fVH8atzhxQg-iyYqa2BnIk8Gke3vuWMWx4QxVDEzbcHITzPtzNmtc0rwwHGEKCssc/s1600/pinterest.png'/></a>
<a href='http://feeds.feedburner.com/Feedburner ID' rel='nofollow' style='margin-right: 12px;' target='_blank'>
<img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-xRCdRoVnfYRJBw2SACPuzz6x8hZJbA8OW-3IvhaiBfZGBWDFaSjlHlzLULLSmZT3Lm801DPnUGKMMR2Ol4p0GRSg0uE4SWO82aW7f04gFJry7CvUHz5hy76poCuF_sq6J_ZFlTpaT4/s1600/rss.png'/></a>
<a href='http://www.linkedin.com/in/username' rel='nofollow' style='margin-right: 12px;' target='_blank'>
<img alt='Linkedin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK7WnDVcYjKuBmuuY5YQD8SnkZpqqZNrsf2CurY7b62HtAPFz83vNAMpXMP-e3JW9PxFLj5gtjck4WHVdjYed3BGBSK_ALSOu3ZEBg007PPdrLUiyrCBndRZIkAJnkMDm90LFm_1G4rew/s1600/linkedin.png'/></a>
</center>
</div>
</div>
</div>
<!-- SOCIAL PROFILE END -->
<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {height: 30px;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: 7px 0 12px 1em;color: #333;outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 32px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 32px;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;}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
<!-- SEARCH BOX END -->
<!-- SOCIAL PROFILE END -->
<div class='widget-content'>
<style>
#socialwidget {width: 300px;margin:10px 1px 10px 1px;}
.TZ-social{padding:0 5px 15px;}
.TZ-social img:hover{opacity:0.8}
.googleplus {background: #ffffff;border-top: 1px solid white;border-bottom: 1px solid #ebebeb;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
.TZ {background: #ffffff;border-top: 1px solid white;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
.TZ span {color: #000;font-size: 11px;position: absolute;margin: -12px 100px;width: 310px;}
#widgetbox .author-credit a {font-size: 10px;font-size: 10px;letter-spacing: 1px;color: #1E598E;text-decoration: none;}
.TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
</style>
<div id='socialwidget'>
<div class='TZ-social'>
<!-- social ico -->
<center>
<a href='http://facebook.com/username' rel='nofollow' style='margin-right: 15px;' target='_blank'>
<img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-vtxm9urzUaZ5Ev1L3_YjiSrg8W8JUuBWnkYVF7YvQ30YacMIhkdy2t4eoEdrfeTxwfL51fKJpQByRkI6983uXImRAS7x6OrjDhNxlf1ZANh8Br6oeiQNmUuDqGl3AVXPsXEMsR2XLVo/s1600/facebook.png'/></a>
<a href='http://twitter.com/username' rel='nofollow' style='margin-right: 12px;' target='_blank'>
<img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyDd76tQ_O03WU1acc5RwzdQsseGRe4EoJ1_rllYtGWUjPur4VvTIPwVXbmvCFlqng_PuJFtS024xDY6FQ7YzuRwiuSU070sTIxThN4mHjlC6TNsrOTeCueXHnzbeJtrXD4IJAjZAGUu4/s1600/twitter.png'/></a>
<a href='https://plus.google.com/ID Number/posts' rel='me' style='margin-right: 12px;' target='_blank'>
<img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiee_UzBozPMGcPdOEjYLYz_8Wi1LEYvJGK_3VLnaC8huZ_eOaWqofkqayghF0RtZPXsWGmn4Juluu6RnokqNQQquqADCzqe4ZE5DP3wkUkeQDILSmQfrtf6dIxaCYxxsaZZYH6JFJNg7c/s1600/gplus.png'/></a>
<a href='http://www.pinterest.com/username' style='margin-right: 12px;' target='_blank'>
<img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGAK5dOjSQnQuiQltPnFUTHXv69mlbMY01kdHW405lQOsRIMIHHrEVTltAq8_e-hkKD9I2gbeW6fVH8atzhxQg-iyYqa2BnIk8Gke3vuWMWx4QxVDEzbcHITzPtzNmtc0rwwHGEKCssc/s1600/pinterest.png'/></a>
<a href='http://feeds.feedburner.com/Feedburner ID' rel='nofollow' style='margin-right: 12px;' target='_blank'>
<img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-xRCdRoVnfYRJBw2SACPuzz6x8hZJbA8OW-3IvhaiBfZGBWDFaSjlHlzLULLSmZT3Lm801DPnUGKMMR2Ol4p0GRSg0uE4SWO82aW7f04gFJry7CvUHz5hy76poCuF_sq6J_ZFlTpaT4/s1600/rss.png'/></a>
<a href='http://www.linkedin.com/in/username' rel='nofollow' style='margin-right: 12px;' target='_blank'>
<img alt='Linkedin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK7WnDVcYjKuBmuuY5YQD8SnkZpqqZNrsf2CurY7b62HtAPFz83vNAMpXMP-e3JW9PxFLj5gtjck4WHVdjYed3BGBSK_ALSOu3ZEBg007PPdrLUiyrCBndRZIkAJnkMDm90LFm_1G4rew/s1600/linkedin.png'/></a>
</center>
</div>
</div>
</div>
<!-- SOCIAL PROFILE END -->
3. Ganti ID yang Berwarna Biru dengan kepunyaan Anda.
4. Save.Simpan Perubahan
Sangat mudah bukan Kini Kotak Pencarian plus Media Sosial sudah muncul di sidebar blog Anda,semoga bermanfaat.
Belum ada tanggapan untuk "CARA MEMBUAT KONTAK PENCARIAN PLUS MEDSOS DI SIDEBAR BLOG"
Post a Comment