6 Cara Membuat Custom Search Engine Blogger

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

Kotak pencariaan tidak hanya membantu dalam meningkatkan desain web tetapi juga memberikan kenyamanan kepada pengunjung tetap situs Anda. Dengan adanya kotak pencarian memberikan kesepatan kepada pembaca untuk menelusuri berbagai link, jika Anda tidak merekomendasikan kotak telusur pada web atau Blog Anda, kemungkinan Anda bisa kehilangan pengunjung.

Menambahkan gadget Custom Search Box pada web atau Blog memberikan manfaat karena bisa melihat semua laman dalam satu tempat dan juga dapat membantu dalam menganalisis situs dan SEO.

Dalam memasang kotak pencarian tentunya harus mudah di temukan oleh pengunjung dan untuk tampilan desannya semua dapat di sesuaikan dengan tampilan web atau di sesuaikan dengan keinginan Anda. Jikan Anda ingin menambahkan Custom Search Box untuk Blogger, berikut ada enam kotak penelusuran yang bisa 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/AVvXsEhJsEHWcO_uBBgWQnRa1W0M7bQ4q82xrv0zR_BtBaYDCg6U62oajdLQn1i-o8BWDo2yuSxbYa-7VSuuZWyv6hMZZy21Q3blQbfJzIlghvZw6GUI9X_wmzFpfhx8UpuF8kmr7BVV0eRPhP-S/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/AVvXsEhJsEHWcO_uBBgWQnRa1W0M7bQ4q82xrv0zR_BtBaYDCg6U62oajdLQn1i-o8BWDo2yuSxbYa-7VSuuZWyv6hMZZy21Q3blQbfJzIlghvZw6GUI9X_wmzFpfhx8UpuF8kmr7BVV0eRPhP-S/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/AVvXsEj7KGbM3_PKwjsA7pYDNWYRGmJY5E83_-UcqEW63G1VeLzUpeRiHOakj92yFS3p5CDykh52VBx6MxVAwqOPYcUfipYIEQuOli7S4IwX9sVdA64yQmPGviGp41inVpdgazayxRCeRZl0M_sJ/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/AVvXsEhIOj8xWXY6Nk-0bqoWrnXX73OV9KXQDhnsg-PbTDr-3Q2Mjh0maY-GuHb8pbClZMqiWW1ABm4GA1TfyLaoP2vZ-FQxvE-reP9RxBvBrc4I6DmLsZJEeQXaplUxLTRXXBB-TlUJ-RuUo1gT/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/AVvXsEjvZYoVYMbSEAVA0TqP8NNybRrKSvnRFuAq22CAveHp36EFbHSW6iIkphIvRRKno9Z0VpOd93aDuSl1wMDD4jvoz_bN2KsymwWPuiAj8Nt_vpzDTKK2GmbVLU5pV_Dj2bVSlE1KZXZLtl2P/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/AVvXsEhGriF_8UITfXz-lpcRD5VAKSbptVJwfpipqdXIShOFLP5vrNqat2FOdfC_ZgjWfVBtcQtmgArRrsku6o-yIfsFHcPSFfsMTadEf4iS4sjO_EDjuY4Lm8Z-FzbkKEer4nF4JouYyIHa1Uel/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGriF_8UITfXz-lpcRD5VAKSbptVJwfpipqdXIShOFLP5vrNqat2FOdfC_ZgjWfVBtcQtmgArRrsku6o-yIfsFHcPSFfsMTadEf4iS4sjO_EDjuY4Lm8Z-FzbkKEer4nF4JouYyIHa1Uel/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/AVvXsEgmKjRt2Fsc2-a8aXms_9V2VGM-F9jbzs7ZQsyRw9DnWRCZQ72i-dgDWpQ8PyEoys4SazmP2aAaPX2q0oW1S6_Bw_9G6t6qe0Fa_lroIBuwVzKcT_QE9Rv58_thFrvHCBYZ2QtEwCRjTK9z/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/AVvXsEjcCWM6kLXFKEvrzbLOPRVb-X16GP3khvHi_Kz41xdE5lDKlN0LN-gq_IHvcp7TBAXvPNC745dNI0qWUv0YEVEbV8D15C7EjSFCrYWkBE1NLy2g6dWVigam4k6U6s0GDwRAPRfTiwLQRhwz/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/AVvXsEhwhnPySvEsWfJNLLFA5J1C5afHI_TqePkOwOAzvcIhEwEiNIEc4CB4dxZRaDJXLfCj9RRQ_246wo4M3irLzEaVseYPOXSC4QJgrADON1G_S4xrsfLXIx-jmaV5VGVU3EjVv-_LZcrUn5YS/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/AVvXsEgAGaisobk5V6fauVk2EEhaftlI4sS_U_VBez_hSZWnyo7xZj-A2Ik-1wrXOyqciC0pCr8lfqRTs-qxwdkUD75OJ143qu5toKWo5yozoPRhxhSSkldLhmSvPGJ4kPoJh4Rd27jGLB6VmyNv/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/AVvXsEj0fg_UexRzMQRZSJfpEjP7tvVeSTmF8uvY3uZW9e6kan3g_A_igzKTP6hrcleM4KZ6S-12G3kM1eO0tEE8rGZXeTqgUT4thsvlxwKH4Zp5f6nYE0rZehHMNOOao4h6WnQ6n7NIbCD7ooiU/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/AVvXsEhf8kZ7IwLMYGitORZyo6nC5W26VAkLwhT_6JhgZ0tovmbkvOcNR88Qf9-eimU9xSpXlH_Pd4EAtW_bWD_nN7OvftrSUzbRwA4QYks2arXndocBDLYffOGng66nvwsxjtWcRtbPQMKuAB_3/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf8kZ7IwLMYGitORZyo6nC5W26VAkLwhT_6JhgZ0tovmbkvOcNR88Qf9-eimU9xSpXlH_Pd4EAtW_bWD_nN7OvftrSUzbRwA4QYks2arXndocBDLYffOGng66nvwsxjtWcRtbPQMKuAB_3/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/AVvXsEjVgwsSiuHGqBoNGjPx0GQHh4oEphZnOgFLcG6rKomdvDuffRLzE-xBNlxwflHGwxI1DN7uIwajMykAYozsyaCMHKWxzuxaAS5_fy-ZZIB3ChiE4_RyvbpEreS5acnyAxZaaP6f14ODyAHD/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/AVvXsEhz4buX9-Eps_Llhv8lKyVJDodo_cKuhG2IhWpXK5KHmmdAZaJs8OoIJUdSG336Ip-Q6RucUk3fKo2zNGdA-7WiqEgwY9SszZAm5sKDzhEis-EN6jhNBxQ5JQncyqCqOUCQwIJ62oSQpGJs/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/AVvXsEhasTBlHlNA96JL2jFuEk69-T3SGOkpkMYpRhIE1H0PzXTraMy2dQ1LY_A9SWZ3BQOHU_gKp4LvUHkWjlE4HXNAP0LJL9pLOb10VnIJQqDFIf2QtYJjQ4v1Jbdx8tLftqpIwGbPwvuoFA4W/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, kemudian copy kodenya dan pastekan pada kotalom tersedia
6. Klik tombol Simpan

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

Bagikan Artikel ini