6 Cara Menciptakan Custom Search Engine Blogger

Custom Search Engine/Box merupakan ketentuan tidak tertulis yang perlu dimiliki setiap web. Kotak pencarian memperlihatkan donasi pada tema situs Anda, serta memperlihatkan beberapa manfaat kepada pengunjung dan Anda sebagai admin Blog.

Kotak pencariaan tidak hanya membantu dalam meningkatkan desain web tetapi juga memperlihatkan kenyamanan kepada pengunjung tetap situs Anda. Dengan adanya kotak pencarian memperlihatkan kesepatan kepada pembaca untuk menelusuri banyak sekali link, kalau Anda tidak merekomendasikan kotak telusur pada web atau Blog Anda, kemungkinan Anda sanggup kehilangan pengunjung.

Menambahkan gadget Custom Search Box pada web atau Blog memperlihatkan manfaat sebab sanggup melihat semua laman dalam satu daerah dan juga sanggup membantu dalam menganalisis situs dan SEO.

Dalam memasang kotak pencarian tentunya harus gampang di temukan oleh pengunjung dan untuk tampilan desannya semua sanggup di sesuaikan dengan tampilan web atau di sesuaikan dengan harapan Anda. Jikan Anda ingin menambahkan Custom Search Box untuk Blogger, berikut ada enam kotak penelusuran yang sanggup Anda pilih.

Custom Search Box # 1

<style>
#searchbox {
    background: #d8d8d8;
    border: 4px solid #e8e8e8;
    padding: 20px 10px;
    width: 250px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTrXJPkt72jhDotrtfPvNmjHvKJo1hxtfXjtgxOsdONGGgkoDI63Z2Ap2wtBApaRo4csSK-PkzmKfV3TdQJeMhzqp1Fz2uNuU6tWO0rHugCCD9ibutlhoaQhj9lPxhwm_Ekw3djAMevnLm/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}

#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}

#button-submit:hover {
    background: #4f5356;
}

#button-submit:active {
    background: #5b5d60;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>

Custom Search Box # 2

<style>
#searchbox {
width: 240px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTrXJPkt72jhDotrtfPvNmjHvKJo1hxtfXjtgxOsdONGGgkoDI63Z2Ap2wtBApaRo4csSK-PkzmKfV3TdQJeMhzqp1Fz2uNuU6tWO0rHugCCD9ibutlhoaQhj9lPxhwm_Ekw3djAMevnLm/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -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;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinsaNoWAjr4BK3N_JGNgsn69-y-cl8pRsJb5LRccN1VLO0jWL5p7iXj-WFUoVLjXo6rxAOh5rWSOxsdEqe84EoqNiH2VVGmqfqw4X8Dq2sKwNSQhFwEdlmLl4xQhPzhR6DrhqOPCTuK5Xh/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Custom Search Box # 3

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipODaNt8zg6QL1FYrXVxD9mO1yZFe-nNoY8KXizBJ0UXWjISL75fhCUxma9I6RTw1uwTCZA6K35sqNeZGPMWitqlpbhnkxphy7kALnc3HFQpm5ai3WYPfN6wjb4jXiezN5MqJgvoiHqOr2/s1600/searchbar.png) no-repeat;
    width: 208px;
    height: 29px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: transparent;
    margin: 3px 0px 0px 20px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    color: #828282;
    width: 70%;
    display: inline-table;
    vertical-align: top;
}
#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1cPBUqfN3GrQQm4mRSRjyMFV2cqcU1luxh4X2dPdU3CQGeCKk9OzqYj-72VhbfZRate-JxjrtqU7WKymMr3zpEVupEJHpQZ6G69Z0bk22ZWzSoTq55mUtQsmrBH6-Amq8A6Lk9LTb-q7B/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 4px;
    width: 21px;
    height: 22px;
}
#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgma_H3q7a-oT22jnAI5Jp1LwY7OogQCo3xQkmH5alG4PVYMiNo9TY6uexw7j-Rfz0ztrnnL2dulgLlSdYCpN6vnhbPn1n9Ys0Mi9szGdAiYV1YZmPVUT9XCivb3oHXNKBjIrf6dh7sZeYy/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgma_H3q7a-oT22jnAI5Jp1LwY7OogQCo3xQkmH5alG4PVYMiNo9TY6uexw7j-Rfz0ztrnnL2dulgLlSdYCpN6vnhbPn1n9Ys0Mi9szGdAiYV1YZmPVUT9XCivb3oHXNKBjIrf6dh7sZeYy/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="search..." />
    <input id="button-submit" type="submit" value="" />
</form>

Custom Search Box # 4

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQaB7RI1X4SPHgE-Cud3_lqf_-d_zZsY3Bz7VWbheos7EAVFgvRowlMquL3CrVkvjvzDVXzeJx8BRha6rUqTk91ZxF1pBLQ1ZC78lQ__nvwA2WVk3EHwn0NbiLI4YSS5b3K8wZ-xQFI477/s1600/search-box.png) no-repeat;
    height: 27px;
    width: 202px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    margin: 0px 0px 0px 12px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    width: 77%;
    color: #828282;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWt6D_N7TMN8ENKcLz4Vhmg5DyVZWH-Fu4RmmqwvId1SpvypzrF6CRhzfrmE8ti8JZ4H99AbKleQWm7Guil7rhzJydEEBmDi4fT5f08B7tEyoWBS1XqrivI7eIgQX3ySH950YOmt4bQiCh/s1600/search-button.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    width: 30px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DxI6iGVuvxSl0RLKp9yOye1B0jZvGdblsLGIiNfb9N5SVyNe66QioTdla8MFqQQi-5hNw_DvWs9t1yHn76W0495-KB74P_5vsxtcu1MEmiXp0g4kL9Ib2ymIHOa9mLy8vLmpqARCpOu9/s1600/search-button-hover.png) no-repeat;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>

Custom Search Box # 5

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsHElNMwHMrlHV17gsQa9qRgHI7akPd0Z5wx2YksSw9FcM4Ek4OVRnNov-0gUoYCnZTPtLEfJlpEKq_T0JqDndCab13EnsqbNPKxjWgZbItVE_uj1DGUbi8Cix4CiMGNxvWlPR0eR8XhKL/s1600/search-box1.png) no-repeat;
    width: 250px;
    height: 65px;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus:-moz-placeholder {
color: transparent;
}

input:focus::-moz-placeholder {
color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    padding: 5px 0px 5px 20px;
    margin: 10px 15px 0px 0px;
    border-width: 0px;
    font-family: "Brush Script MT", cursive;
    font-size: 12px;
    color: #595959;
    width: 65%;
    font-weight: bold;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY_KCrxe8MejJ1OYJcR5mJqZaPoTj4xLCKMa3sKuZmobv2cyvGPGZE81irxtWmgUJtJuGbHaF3kdznaAb7uYeIjE-G6JezGBFDaC1YTY9QhxRaOJprOW_SJpLEYQLjGga5QtqEZSu3_KYc/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 19px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJV-Vd0yEwIInMmHZKq5pbxL_TV4jN1RJP1LpXrszivhBdn803LZ75b2n6nwamTl95wRr9ZbNRZG5yPPHtFA3M7-W5ybI4TdCcQWp4ui_qF92cIPUH3SUR8OjCgY40hnZhDho5fcYMqM5w/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJV-Vd0yEwIInMmHZKq5pbxL_TV4jN1RJP1LpXrszivhBdn803LZ75b2n6nwamTl95wRr9ZbNRZG5yPPHtFA3M7-W5ybI4TdCcQWp4ui_qF92cIPUH3SUR8OjCgY40hnZhDho5fcYMqM5w/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
    <input id="button-submit" type="submit" value="" />
</form>

Custom Search Box # 6

<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOO2gHi_sr1wdr9bR-GabvlfaTXeQNL6DIF54Jawtnix8MAed65FRTNWee3E_dy9Qv_6hyphenhyphenfa6R-FrR5HzC2-t3S5w1ZVu0_uIJSHPYSoMMEb430jN8YhJfjb_9pa_bheZ4ZKWTXr0I6Gyy/s1600/search-box.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3QvQWB0qBcE1dFKmPWyoexp2l3MDrtVjvWbSBjlJNyeLrmmfacRMyEujQXO4KrQUN-d8vKXG736WzIi5rtC7yjFEPZRqXkP1fpliPsL9LnfzcqaeftjJdwKqf10aNCN8qzH1sYKSDASr4/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNt0V_WnMl_ZF6kjXNfkHs_D9mRjpZEPxKmrmn5ZeQJxN4H_wXcucz75q21tW6qsGaBhwP8cGOHgvba_2rNyIp4fA0dmgzfu4uBPW76zfF4nuR6a3TlwcMTyxGmLQ-Ngn2Qp3CIgQgsXJ7/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Langkah-Langkah Pemasangan Custom Search Box

1. Log-in ke akun Blogger
2. Pilih Layout/Tata letak
3. Lalu klik tombol Add a Gatget
4. Kemudian pilih HTML/Javascript
5. Pilih salah satu Custom Search Box di atas sesuai dengan keinginan, lalu copy kodenya dan pastekan pada kotalom tersedia
6. Klik tombol Simpan

Dengan menambahkan kotak pencarian pada web atau blog, penggunjung sanggup menavigasi semua halaman web Anda dalam satu tempat. Demikian saya sampaikan enam cara membuat Custom Search Box Untuk Blogger, terima kasih sudah berkunjung dan supaya bermanfaat.

Sumber http://www.websiteedukasi.com/