Membuat Widget Kotak Search Terlengkap Tanpa Edit HTML

Mungkin pada keseluruhan template yang ada saat ini kotak pencarian atau kotak search sudah terpasang pada edit HTML yang template kamu gunakan,namun jika template yang kita gunakan belum terpasang kotak pencarian atau kotak search maka menjadi masalah tersendiri bagi kita sebagai pemilik blog yang belum terpasang kotak pencaharian.

Sebelum mempelajari tentang edit mengedit tentunya kita harus membuat blog terlebih dahulu kita membuat blog di blogspot untuk lebih mudah baca juga " Cara membuat blog di blogspot lengkap dengan gambar ". 

Kembali kepembahasan sebelumnya untuk mempermudah pemasangan kotak search,disini Ngescript akan menjelaskan langkah dan kode HTML/Javascript nya. Untuk lebih jelasnya lihat langkah dan kode script dibawah ini.

Langkah-langkah memasang kode script ke dalam widget HTML/Javascript 

Kode Script dan gambar :

1.

Kode gambar diatas

<style type="text/css">#blr_torn_page_search {   background:rgba(0,0,0,0) url('http://2.bp.blogspot.com/-WOtFhkqSuwM/Un9kXYdUhGI/AAAAAAAAC5k/P2F5OeupizU/s1600/torn_page_image.png') scroll 50% 50% no-repeat;   width:340px;   height:58px;   display:block;}#blr_torn_page_search_box {   display:block;   padding:14px;   margin:0;}#blr_torn_page_search_input {   padding:6px;   margin:0;   width:266px;   font-size:14px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}#blr_torn_page_search_submit {   margin:0;   padding:0;   height:25px;   width:25px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}</style>

<div id="blr_torn_page_search">    <form expr:action="/search" method="get" id="blr_torn_page_search_box">        <input type="text" name="q" placeholder="Search this site..." id="blr_torn_page_search_input" />        <input type="image" id="blr_torn_page_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />    </form></div>

2. 

Kode gambar diatas

<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/AVvXsEhk8t0Mpz43u_x5BP2f9XdR-_rwJ-lN-3SBfV3Vq8GbORf5Vdi1oGhAUCDeACPPnoolSguBLRfSYEJSrwlkKqmeKmVAGdoAR1VqbuieO4Lw1zTCChn9bCksDmuHvG_g06VIxwh3vLVPIOnj/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/AVvXsEiEWw1CG8hP4L3-w9pvpKBDFc9ssY9cllDu1OZpNgK5tadOW1c8wE1XQfEdo2TKoPyNRn16zOiZEJLDFPkf1O-r6uhUe0eomNrs19Tn_4cq1rGUphgSRyQogyDKXTgaiMe836sKRja-Djos/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>

3.

Kode gambar diatas

<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.

Kode gambar diatas

<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>

5.

Kode gambar diatas

<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'/></span></form></div>

6.

Kode gambar diatas

<form action=”/search” style=”display:inline;” method=”get”>
<input id=”s” name=”q” type=”search” placeholder=”cari artikel disini”/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
 width: 200px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
 position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8aHiJC8cSwGctQhvO1iZiYerAG5u-yanrIvakwG_EPcgoLcuYX2dOjfWBR53bhQKksQyfFLRNhAKZkfjGXZeniYSJbOuqunoHjIzUSO7a5CQJTw1Mz9xpzC1sGk75oDUemQaT6FspflI/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

7.

Kode gambar diatas

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgilKzChu-VZ7Oz6zeo01_Lu026vmAPplcAEPbH4C16r-humck9fsRNSVM_WxryFy5ZBRlntfy6ynm6_7kq2u4iIgfdefo5U6HGK6CDNVts7QF429YiBQshmiqSw8J3wKaKUXGdwcCHj7Tq/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/AVvXsEh-Pk7LRIld9rVr8DWCZjwqSXOb5hyBxqpAhVoKlKnwkJiuzguVvpEi_pM9l89oukLWCqQK4w6GG6ZF7CdLsPiV1KaCtMF1VB2gbtooH09Jz3IV2wc9gvSCv_SLCOQ0jt5X4Q5O0FkOvNd2/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/AVvXsEi42krk8FWkgXaoH8Icmc4QPLMRFtjXIwzcH3o5vieNJAFwPHQHLE0lNwi3xB7V4UTyFQkkPZJkGz6GaCwBi1WrjEcZWgCkGLdKd_FlqUi0ii9a8LaMZQx4fHOTOd38qkSzr0yX94shRMw8/s1600/magnifier-hover.png) no-repeat;
    }
    #button-submit:active {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42krk8FWkgXaoH8Icmc4QPLMRFtjXIwzcH3o5vieNJAFwPHQHLE0lNwi3xB7V4UTyFQkkPZJkGz6GaCwBi1WrjEcZWgCkGLdKd_FlqUi0ii9a8LaMZQx4fHOTOd38qkSzr0yX94shRMw8/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>

8.

Kode gambar diatas

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw9cJhNlvX1jKJooc9QC5LgnWrvk8Hmg0s7O-tTgzj-OkS0kU0mfTkU3wfIBZ9Ve-4Mfkhdv1uuqhMkm-xlESU7zOQciUyaIV3ONj-q76Km-6AOR3tRBcplyXULuXx7Faao3tptGIyjpgF/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/AVvXsEifAxeuX7FJB0g4zYx03suhAB9Ya_jnhC2umOQFya7FThQOJVNYZa6U2iNaBe3hhyoFl-SC_MF1ik6wqmTroEF4ZMS82-ofMFCUN-oR6szovXy6m2o-d-kncz9AwIKlUZ_eoCLgzJNfeMHE/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/AVvXsEgwanRIZRVARkRRtnpzPKIX_jaH3IJ6BwwdbqYu-DRO0ci5JF7b1dsMK11-ZDYM60tSHqPfS3vSmVWPSUi4pSdBHuh1M4CzWWQH6nKr0pv6-vtj5Id_fwd0zFcYQwGIm_AI3IEofTHONJ9z/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>

9.

Kode gambar diatas

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_io1wpHT1BCROoWBglAoK2fTfduQqjmrwNyDPaP0i0qWSgUMyHobh_eQLNjPdaDlz2kCHPkD0ngk3L7LJ2SwKhk48eXYcXVWrTJAEaEdTLAVWVuwwglEy8IUrMlUK7EtPt8gEjH9yV1eN/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/AVvXsEikaV55wpvPNAYSZFd1xUJk0ZPcZQM2DqRw1tikwDHoLxzPeOCKCXIkomyU2yvP_fDUxlMOksEzVz4OdlNaYhITQAL3xzjauTVbCNM-1U229DTwBURha_uCQrHxg5AUy-v4l98fQJXnbbhq/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/AVvXsEgA10vnCAMSv8VrQo_fKibA1RDOdb2yMAeCL5rgq1g122Jx90PN1Dfv2P0C1SkJLyaQ1kUpsiBL_0kVYLcVMsZKaHvHVb826KM0OU2arZrVibMPtbQtLbOWIt0gO6qheutq4mhmEbWwDQLd/s1600/magnifier-hover.png) no-repeat;
    }

    #button-submit:active {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA10vnCAMSv8VrQo_fKibA1RDOdb2yMAeCL5rgq1g122Jx90PN1Dfv2P0C1SkJLyaQ1kUpsiBL_0kVYLcVMsZKaHvHVb826KM0OU2arZrVibMPtbQtLbOWIt0gO6qheutq4mhmEbWwDQLd/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>

10.

Kode gambar diatas

<style>
    #searchbox {
    width: 280px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim01G32DHV85IcXE9MCKcd3VBpfEzEYu_wsXY6KphPV0IgESfbUVhgxtkJXO7JbX1UNTdiyCPYqPY2eU0l_HSawJoPRWhs49NTfYB-SxzLcI_HGqH69Ee8qp8ccK7EccIo9sOVxZeOzl7U/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/AVvXsEi3vbYsXvDfRIRC3zJueVXzUMGDGEvw3yxJ3OwMoqb9E2iiZhYg_0ZiM9rUV5owFOO_geGc406HCQD3Zy-R7cGVa_xVaxP_Z2i_jiKFEnUEF0RD-SRPDSoNSh_uO-uuK1nqqee20comHna5/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/AVvXsEimzS0W8OMteeFu6q3sLsF7kdRTp-zup5NeNSq2ysfo98YST_EMQ3TfFCKtYMqxor4c9vCbuCFbrTBL3uPePAy0IJqZ04IcSOcZIjOBiWvn7AyZhlMoiN7M9sDTUZpV0STYeHCPRgbU_woO/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>

11.

Kode gambar diatas

<form action="http://nama-blogmu.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

12.

Kode gambar diatas

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiffOndkPqglQJi-7P4zYjCpWHuj2vHKhyjH7UOA42afqxVNKVYNBlxumf0zGnZHyGuTuniZle78xiGbaG3xoK0C5TiHga6Jibmr-hm7ftiIupAPsC_SZbCy9UNpsUPkx9NDaX0QcRD2uav/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get">    <input type="text" id="a" name="q" value="Search Here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>

13.

Kode gambar diatas

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Search Here...."/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
 width: 300px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
 position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8aHiJC8cSwGctQhvO1iZiYerAG5u-yanrIvakwG_EPcgoLcuYX2dOjfWBR53bhQKksQyfFLRNhAKZkfjGXZeniYSJbOuqunoHjIzUSO7a5CQJTw1Mz9xpzC1sGk75oDUemQaT6FspflI/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

14.

Kode gambar diatas

<style type="text/css">#mediablogger-searchbox {    border-radius: 5px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBauBxJ1GRsEAwyHPBTjzVis-K8nimAvfy3KivXqJioU4cM8Gr2nSCQS6iO8beENpnSNslHRCRsgBtrT2Qshy7NsQjT5Xrv3GiVR-maRj6_2g_OenNL9HOW11_8I-HI2rJWjgsetnvXiik/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-family: georgia;    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;}</style><div id="mediablogger-searchbox">    <form id="mediablogger-searchform" action="/search" method="get">        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'        onblur='if (this.value == "") {this.value = "Search...";}' /></form></div>

15.

Kode gambar diatas

<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwuPJG2lNTPMsW1OO7rtPsiukLwTcuyI8Aj2i5xXCZeMdNw_7VooKP9rdhktz9_huJ-IX9oeR6j8b4mHhGKaLRgG-5ESVvz23xy_UqP67pWiFdW85KohEJj61_w1ha9V7oSal8qseI4ILI/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form>
</div></center>

16.

Kode gambar diatas

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" value="Search this Site" type="text" id="searchBox" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q" /> <input id="searchButton" value="Go" type="submit" /></form>

Nat itulah Cara Membuat Widget Kotak Search Terlengkap Tanpa Edit HTML,semoga kamu dapat menemukan widget yang sesuai dengan keinginan kamu disini ya. Semoga kedepannya Ngescript dapat menambah lagi Kode Script untuk membuat kotak searching atau kotak pencarian lebih bagus lagi.

Semoga dengan pembahasan kali ini dapat menambah pengalaman kita tentang edit mengedit seputar blog ya dan terima kasih sudah berkunjung ke blog yang sederhana ini,jika ada saran dan komentar jangan sungkan untuk menyampaikannya di kolom komentar yang sudah disediakan.Terima Kasih.

Salam 

Ngescript