6 Widget Search untuk Blogger Simpel dan Keren Banget Gaes

Baru nemu nih gan. Ada 6 Widget Search untuk Blogger Simpel dan Keren Banget Gaes. Cara membuatnya cukup mudah kok, anda hanya menambahkan widget seperti biasa atau seperti langkah yang akan saya sebutkan dibawah ini:

Cek it dot caranya ya?

• Masuk Akun blog anda
• Masuk tata letak lalu tambahkan widget HTML/ Javascript
• Masukan kode yang saya berikan ini.
• Simpan
• Dah gitu aja

-----------------------------

Intermezzo sejenak

Rekomendasi Peluang bisnis booming 2019

Bisa 3 bulan dapat mobil. Cara termudah dapat mobil cash tanp nyicil. Gabung dengan bisnis sinergy eco racing KLIK DISINI

Reseller Kopi Koka. Bisnis variasi Kopi tidak akan pernah ada matinya. Penikmat kopi akan menyambar apapun yang berbau kopi. Pengharum kopi, parfum kopi, sabun kopi, tasbih kopi, gelang kopi dll. Kopi koka open reseller KLIK DISINI.

Bisnis PayTren KPN. Bisnis digital PayTren. Gabung dengan komunitas KPN KLIK DISINI. Tim Kampung Paytren di Indonesia dan dunia KLIK DISINI.

Bisnis Sinery Eco Racing Otobest. Bisnis penghemat bahan bakar Sinergy ER. Gabung dengan we otobest, belasan kata kunci halaman 1 google. Biar google yang bekerja untuk anda. KLIK DISINI

---------------------------

Nanti gambarnya akan seperti pilihan dibawah ini

6 Widget Search untuk Blogger Simpel dan Keren Banget Gaes

SearchBox Model 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/AVvXsEirJi1Kil0ikDSOvh75ygJHXSmbG-ExiPWTmFkTJts-dWU-eDyvoHnjxJ-lVIY58tSwzqXQKB5BbO3u29muCZT7-Xb6u502MxNncyNcWeLI6dq1EqTWhl4UUGEef2lxNKQg0sUYdvoOEX5H/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>


6 Widget Search untuk Blogger Simpel dan Keren Banget Gaes

6 Widget Search untuk Blogger Simpel dan Keren Banget Gaes

SearchBox Model 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/AVvXsEirJi1Kil0ikDSOvh75ygJHXSmbG-ExiPWTmFkTJts-dWU-eDyvoHnjxJ-lVIY58tSwzqXQKB5BbO3u29muCZT7-Xb6u502MxNncyNcWeLI6dq1EqTWhl4UUGEef2lxNKQg0sUYdvoOEX5H/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/AVvXsEhtiWUglEh2lNVb8lZJUud7Joj9r_vhBJ5fhRvn9DQbV6sCMuJ30FLYJHnK7zTZ30iWFEOMH1TmH5dB8oiXRYhZXXOjtcE8PmACbB8iCwRev0A7_Ub-_67fX2daiKLQhGcvRnbqXBhA4lSN/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>


SearchBox Model 3

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTWBsgMyKc8aPL7JNEhGhOTtJLjPT0nAsxwbd0nad9ils6cojvyGicWllZpbuwYO9Kh6irUeWXEXY_ziF4n6yJkfPTyGMl3CrpiOvPPTgsLW3moxEFxoW1V0utaM-SowuogdefjQDJZdy7/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/AVvXsEh5agMAlW-9wosIvHEjrQlfIAUwHtsX4DvrqqFAbgTMmFNhpoxxvgNkKEe9g6NshVmGO2Ga8i1w6C24gjwMepQjyoiacKiKA1XNdGG9OT139mhU7s6HedmnRKCUa9_U8QXazreTI3vy0Vyx/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/AVvXsEislnRmdxn_3u49lkO1HICBxxjYCEn4QHpteOXzeIctSZsyeqIH1YgFyWzgRA2E34ZKnBvxYY3KpPJk8cIe_z_NcXGKP6FArWpVZVs-4csSrXMSBpkGN0Q7eIQ7-6kQ876x8htWnbJIx03W/s1600/magnifier-hover.png) no-repeat;
    }
    #button-submit:active {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEislnRmdxn_3u49lkO1HICBxxjYCEn4QHpteOXzeIctSZsyeqIH1YgFyWzgRA2E34ZKnBvxYY3KpPJk8cIe_z_NcXGKP6FArWpVZVs-4csSrXMSBpkGN0Q7eIQ7-6kQ876x8htWnbJIx03W/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>


SearchBox Model 4

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPKMyOQ3JwKP6CAJ8kt4xGve-CzycqU9viNB16BYW4TothMq3leqlhMx7yjlrVj_XRivgYpN1OteNbg-XcglYklmECOFQxq0ChnopZHPj93Y_iPWtR-V5j7Skgei9OECyp1E4eE5o1-x-d/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/AVvXsEiqDtIZKb8GOKxguKw1M4wcoNSvuYoxAa50d84exxMjocFNOf3l5JLYzztTsYlrmzwXqIrAdIV4rYQuB744QyiEUezqJhcSodQfAsb305alu6wQCWSBzA3WMavhC1TKEAKhWnXUSWiptx5K/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/AVvXsEhrcL7GCRdPcxBaQWP3jZ8echuZsuWxA-ucTv4pAygNwkMC-rY1NzN-9QH51oGuC_Z6LULrEIF9NTaP5CTnS_0mzSkO5MXZftgXDr-tLD5nFb2i894UzOnrevFCuoMsl2rXUwalykIrsHSu/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>



6 Widget Search untuk Blogger Simpel dan Keren Banget Gaes

6 Widget Search untuk Blogger Simpel dan Keren Banget Gaes

SearchBox Model 5

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3GcJ9lyjOKosTOQwoJ89u5oCzrt4xFrSFjje8qXnf6EPffTyT_3tipzG7gztcBhKXxj2L-OWzDP6GaqVzc2D533NnCmrin1-m_MtdjFpJhpmMSmz7h2Xtu-YvWnA2iPWGypcMJwfjikgm/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/AVvXsEhua5FkbZO_947Nw6swurdE1G2emMReX4QcWgKgZ9wA1DQfehO8qPpOa9aAw64kHGU5AThYk3lE7lkD57pTycnjbRETKfmMfQR9HeQZSghhRBydxVIAs2r5KyIYKiZmavDscbUqrhKTw1as/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/AVvXsEgEchZIkMVGrMMGh5vxX1PQ2kdVKIg8R2NhR_wtpH7gdymlHPDsOlIoAOUroUnMrhRfwF1T1yxRq8bETvIAwHDcoo6TqDf5BnexdyjzpvOXsxpGb5S-dgfi6p6kinvW-M1fCa1OEdTYFc8p/s1600/magnifier-hover.png) no-repeat;
    }

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

SearchBox Model 6

<style>

    #searchbox {

    width: 280px;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVQAOoFIK5gnui3F73ENqIfi5NZR9kTRaBGP4K3WSMOW-HyahOg9shOiQpl6ZY1r3jrjw3KSmetVLeZUP_PMtjE6wj_18Ws0GvoQ5JmwWzyN2UsaTnO29h88MPvxwB8PtpTkTKpmoxxej-/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/AVvXsEhAyiNQ-XL_yCXxkcOB0G7UZ2qIFE0OUYKCKKOiEHp9aUkUQhY7_l8BDLU0lpMKBHOoLL3LpE7r43ZTJQIDL6aI-VZddSH6zz58Hi3rb2TIsmEmD7FOg5FGijpKSE20cu-G-tCUIG4dikVB/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/AVvXsEhyImdNwVxAy41I82FQzSaxS56mnVz7zyV86LYj5k2wtTwYT4Akt5dWYyfXRTh7XJ46oa5TTiWSUsLaFHa10Gfdztp873jYkYtJFqI2nf8ZqFRle_SEt8PZScdahkLYJcAgkjgYq7XjCMje/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>

Dah itu aja..

Sekali lagi nanti bentuknya kayak gini gan.. Simpel dan keren khan?

Sumber: http://sharetipsdancara.blogspot.com

Demikian 6 Widget Search untuk Blogger Simpel dan Keren Banget Gaes. Share ke teman anda ya? Makasih.

Stop..!!. Bisnis Reseller Tanpa Modal, Produk Organik Alami Back to Nature, Potensi Jutaan Seminggu Pendaftaran Gratis Mau? SELENGKAPNYA KLIK DISINI