Cara Membuat Kotak Pencarian Di Blogger dan Cara Memasangnya
Jenis-Jenis Kotak Pencarian (Search Box) Keren Simple Responsive untuk Blogger dan Cara Memasangnya.
KOTAK Pencarian (Search Box) merupakan elemen atau widget penting dalam sebuah blog. Menurut pakar web usability, kotak pencarian wajib dipasang di situs web atau blog. "Kotak pencarian harus mudah dilihat dan sederhana," kata si Ucil di Group.
Fungsi kotak pencarian
Fungsi kotak pencarian adalah memudahkan pengunjung mencari informasi atau tulisan di blog sekaligus untuk meningkatkan pageviews.
Kotak pencarian juga sangat berguna untuk kita sebagai admin ketika akan membangun tautan internal (internal link building) sebagai salah satu elemen seo blog.
Admin sudah mencoba beberapa kali memasang kode searching box yang dipasang di sidebar blog ini dan blog admin lainnya. Berikut admin kompilasikan untuk memudahkan pembuatan kotak pencarian yang sesuai dengan tema blog.
Kotak pencarian simple responsive dan keren salah satunya admin pasang di sidebar blog ini.
Gaya Kotak Pencarian (Search Box) untuk Blogger dan Cara Memasangnya
Berikut ini jenis-jenis kotak pencarian untuk dipasang di sidebar blog. Cara memasangnya sangat mudah:
Layout > Add a Gadget > pilih HTML/JavaScript
Judul widget kosongkan
Copas salah satu kode kotak pencarian simple responsive di bawah ini.
Save!
1. Kotak Pencarian Simple Responsive
<style>.serching{margin:-20px 0 5px 0;width:100%;}.serching form{border:1px solid #ddd;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:14px}.serching form input{display:block!important;margin:0;border:0;padding:5px 0;outline:0;height:20px;line-height:20px;font-size:13px;border-radius:0!important}.serch{float:left;width:85%!important;text-indent:10px}.serchg{float:right;width:15%!important;height:30px!important;padding:0!important;background:#48d;color:#fff;border:0!important;font-size:12px!important}</style><div class='serching'><form action='/search?q='><input class='serch' name='q' placeholder='Cari...' title='Cari Tulisan di Sini' type='text'/><button class='serchg' type='submit'> GO </button><span style='clear: both;display:block'/></form></div>
2. Kotak Pencarian Simple Artistik
<style>
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
/* Form wrapper styling */
.search-wrapper {
width: 288px;
margin:10px 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
/* Form text input */
.search-wrapper input {
width: 190px;
height: 20px;
padding: 10px;
float: left;
font: bold 14px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #EEE;
border-radius: 3px 0 0 3px;
}
.search-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.search-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.search-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.search-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.search-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 78px;
font: bold 14px/35px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: white;
text-transform: uppercase;
background: #D83C3C;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
.search-wrapper button:hover{
background: #e54040;
}
.search-wrapper button:active,
.search-wrapper button:focus{
background: #c42f2f;
outline: 0;
}
.search-wrapper button:before { /* left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.search-wrapper button:hover:before{
border-right-color: #e54040;
}
.search-wrapper button:focus:before,
.search-wrapper button:active:before{
border-right-color: #c42f2f;
}
.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
</style>
<form action="/search" class="search-wrapper cf">
<input type="text" method="get" name="q" placeholder="Search here..." required="" />
<button type="submit">Search</button>
</form>
3. Kotak Pencarian Mirip Yahoo
<style>
#search-box {
position: relative;
width: 100%;
margin: -15px 0px -20px 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;
}
</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>
4. Kotak Pencarian Plus Media Sosial
<!-- 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 -->Ganti ID yang berwarna merah dengan kepunyaan Anda kemudian Save!
<!-- 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/kang ihsan' rel='nofollow' style='margin-right: 15px;' target='_blank'> <img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisNzh-AYvizHF5SA5gRB9nBClizTDHuOHBs24HdV1sVtEWgA9dDVY54inF3ifTa_Bl5qaiZ9Z57DlKviN9z2bN1sbXLtWY7e55I-J1WhEXc4Hq4hfniuIReD0BGLSkU0-NAYjfOzaA4dc/s1600/facebook.png'/></a>
<a href='http://twitter.com/kang ihsan' rel='nofollow' style='margin-right: 12px;' target='_blank'> <img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUM24JKPmFRz3fDllFyVemtQNqTtF-eGSLihJB5fA0FGCXM8eRnRQ4yeFAC17yrhQlzrVbOCVj5t2-QyCgbJnmF4Y29vIFlzAKy1jnddInNvtvp64ch0Jzbjp5s0SmEjFqkxKoCuZdsbA/s1600/twitter.png'/></a>
<a href='https://plus.google.com/106869251529186655236/posts' rel='me' style='margin-right: 12px;' target='_blank'> <img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKxCP_fMpGedueCd308Jm999EZlCsOs04xgonpZZbdAHIhQc0v0pvro8ACZXYmDTOvEQm_0L2DtbmjFkN01-l9r73r48Auf-5RgBu44IDxmyiKtzQJ-7d2QcQ433Yp85LXer7NBrqqkws/s1600/gplus.png'/></a>
<a href='http://www.pinterest.com/kang ihsan' style='margin-right: 12px;' target='_blank'> <img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinJ-sPXy197OLVo6uxo2bpkTL7rILmj5Jh4VaOzJpJ5Df8wuq_1VdQI6xzXeYVkMZkJ5BMA7AqopVKdW5mShoyM-bPulLciOvjxg2kNLiVjMQthR3e4Qp-7SXC9JsB1Mk3Q1WVLjKmA5o/s1600/pinterest.png'/></a>
<a href='http://feeds.feedburner.com/kang ihsan' rel='nofollow' style='margin-right: 12px;' target='_blank'> <img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI8L9uZ-_7ZbuxAQV8kfDjrpYxSxxa-2UftrLzBvb7EMcZZd7JUtUi2qvbvMhcSzIyC4oDunpyBhSx5cPkOagIFUHAbIL5pzg6UANcCT6sSzEhD8sjKJj4wsC_Ko21HZoyaxAm3MHeAtY/s1600/rss.png'/></a>
<a href='http://www.linkedin.com/in/kang ihsan' rel='nofollow' style='margin-right: 12px;' target='_blank'> <img alt='Linkedin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivt7q4YlnTUfuNxx8_RiX21PHJfZrd8BocY6qrYUIxAJeemPUxCXYCBDcLVYm_tVB0wQ1UY9QABGuK8DB1vBmJfFvrbolH0X4MYOnVz5xqZ4QrlQowBUgwBvdtSXJFeMcHAGYJsuI5eRI/s1600/linkedin.png'/></a>
</center> </div> </div></div><!-- SOCIAL PROFILE END -->
Sebenarnya banyak banget gaya atau model cara Membuat Kotak Pencarian Di Blogger. Namun saya kira empat contoh ini sudah saya anggap cukup. selebihya shobat bisa mengembangkan sendiri atau cari di mbah google. jika shobat tertarik silahkan copas saja dan tempel di blog shobat. semoga berhasil.
Share this
Muhammad Ihsan: Kang Santri Paud berasal dari Boyolali, tinggal di Kedunggobyak, Sobokerto, Ngemplak Boyolali Jateng. Saya baru belajar mendesain blog sekaligus menjadi admin blog ini.