5+ Widget Search Box Keren dan Sederhana Untuk Blogger

Selamat malam sobat blogger kali ini kami akan share 5+ Widget Search Box Keren dan Sederahan Untuk Blogger. Widget sangat penting untuk SEO dan Pengalaman Pengguna. Untuk alasan ini, kita harus pintar memilih widget mana yang harus kita gunakan di blog kita dan widget mana yang bisa kita hindari.

Menurut pendapat saya, widget kotak pencarian Blogger harus digunakan di setiap blog untuk meningkatkan pengalaman pengguna dan mengurangi tingkat bouncing.

Langsung saja berikut 5 widget search box keren namun sederhana untuk blog anda.



 <style> #search-box-danger {
    margin:0 auto;
    height: 36px;
    position:relative;
    width:100%;
    float:none;
}
 #bo-search-box{
    padding:0;
    background:#fff;
    height: 35px;
    position:relative;
    line-height:1.5em;
    font-weight:normal;
    margin:0;
    border-radius:5px;
    border:1px solid #ddd;
}
 .bo-sb-buttonwrap {
    border-top-right-radius: 5px;
    border: none;
    cursor: pointer;
    position: absolute;
    height: 35px;
    right: 0;
    border-bottom-right-radius: 5px;
    width: 14%;
    display: block;
    top: 0;
    background: #d9534f;
}
 .bo-sb-buttonwrap:hover {
    background-color: #c9302c;
}
 .bo-sb-submit {
    height: 35px;
    right: 50%;
    background: transparent;
    position: absolute;
    width: 35px;
    cursor: pointer;
    margin-right: -17.5px;
    margin-top: -17.5px;
    top: 50%;
    border: none;
}
 .bo-sb-submit:after {
    position: absolute;
    border: 2px solid white;
    left: 10px;
    height: 8px;
    content: '';
    top: 9px;
    width: 8px;
    border-radius: 50%;
    box-sizing: content-box;
}
 .bo-sb-submit:before {
    width: 2px;
    position: absolute;
    transform: rotate(-35deg);
    left: 21px;
    content: '';
    top: 19px;
    height: 8px;
    background: white;
}
 #bo-sb-input {
    outline: none;
    border-top-left-radius: 5px;
    padding: 0 15px;
    transition: all 0.5s;
    width: 84%;
    border: none;
    position: absolute;
    height: 35px;
    background-color: #fff;
    color: #333;
    border-bottom-left-radius: 5px;
}
 #bo-sb-input:focus {
    outline: 0;
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
 </style> <div id="search-box-danger"> <form action="/search" id="bo-search-box" method="get"> <input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/> <span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span> </form> </div> 


 <style> #search-box-info {
    position:relative;
    margin:0 auto;
    width:100%;
    height: 36px;
    float:none;
}
 #bo-search-box{
    height: 35px;
    border:1px solid #ddd;
    line-height:1.5em;
    margin:0;
    font-weight:normal;
    padding:0;
    border-radius:5px;
    position:relative;
    background:#fff;
}
 .bo-sb-buttonwrap {
    border-bottom-right-radius: 5px;
    width: 14%;
    background-color: #5bc0de;
    position: absolute;
    border: none;
    border-top-right-radius: 5px;
    right: 0;
    cursor: pointer;
    display: block;
    height: 35px;
    top: 0;
}
 .bo-sb-buttonwrap:hover {
    background-color: #31b0d5;
}
 .bo-sb-submit {
    background: transparent;
    top: 50%;
    cursor: pointer;
    right: 50%;
    height: 35px;
    position: absolute;
    margin-top: -17.5px;
    width: 35px;
    border: none;
    margin-right: -17.5px;
}
 .bo-sb-submit:after {
    border-radius: 50%;
    top: 9px;
    position: absolute;
    height: 8px;
    content: '';
    width: 8px;
    border: 2px solid white;
    left: 10px;
    box-sizing: content-box;
}
 .bo-sb-submit:before {
    transform: rotate(-35deg);
    position: absolute;
    content: '';
    width: 2px;
    left: 21px;
    height: 8px;
    background: white;
    top: 19px;
}
 #bo-sb-input {
    width: 84%;
    border: none;
    border-bottom-left-radius: 5px;
    position: absolute;
    padding: 0 15px;
    height: 35px;
    color: #333;
    outline: none;
    background-color: #fff;
    border-top-left-radius: 5px;
    transition: all 0.5s;
}
 #bo-sb-input:focus {
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    border-color: #66afe9;
}
 </style> <div id="search-box-info"> <form action="/search" id="bo-search-box" method="get"> <input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/> <span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span> </form> </div>


 <style> #search-box-primary {
    float:none;
    position:relative;
    height: 36px;
    width:100%;
    margin:0 auto;
}
 #bo-search-box{
    margin:0;
    padding:0;
    position:relative;
    background:#fff;
    height: 35px;
    border:1px solid #ddd;
    line-height:1.5em;
    border-radius:5px;
    font-weight:normal;
}
 .bo-sb-buttonwrap {
    cursor: pointer;
    height: 35px;
    position: absolute;
    border-bottom-right-radius: 5px;
    right: 0;
    border: none;
    width: 14%;
    background-color: #337ab7;
    top: 0;
    border-top-right-radius: 5px;
    display: block;
}
 .bo-sb-buttonwrap:hover {
    background-color: #286090;
}
 .bo-sb-submit {
    cursor: pointer;
    margin-top: -17.5px;
    position: absolute;
    top: 50%;
    background: transparent;
    right: 50%;
    width: 35px;
    height: 35px;
    border: none;
    margin-right: -17.5px;
}
 .bo-sb-submit:after {
    width: 8px;
    left: 10px;
    content: '';
    top: 9px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    box-sizing: content-box;
    border: 2px solid white;
}
 .bo-sb-submit:before {
    transform: rotate(-35deg);
    height: 8px;
    background: white;
    position: absolute;
    width: 2px;
    top: 19px;
    content: '';
    left: 21px;
}
 #bo-sb-input {
    border: none;
    width: 84%;
    color: #333;
    padding: 0 15px;
     height: 35px;
    position: absolute;
    border-bottom-left-radius: 5px;
    outline: none;
    background-color: #fff;
    border-top-left-radius: 5px;
    transition: all 0.5s;
}
 #bo-sb-input:focus {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    outline: 0;
}
 </style> <div id="search-box-primary"> <form action="/search" id="bo-search-box" method="get"> <input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/> <span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span> </form> </div> 


 <style> #search-box-success {
    height: 36px;
    float:none;
    position:relative;
    width:100%;
    margin:0 auto;
}
 #bo-search-box{
    background:#fff;
    line-height:1.5em;
    height: 35px;
    border-radius:5px;
    border:1px solid #ddd;
    margin:0;
    padding:0;
    font-weight:normal;
    position:relative;
}
 .bo-sb-buttonwrap {
    background-color: #5cb85c;
    display: block;
    border: none;
    border-top-right-radius: 5px;
    height: 35px;
    height: 35px;
    position: absolute;
    right: 0;
    border-bottom-right-radius: 5px;
    width: 14%;
    top: 0;
    cursor: pointer;
}
 .bo-sb-buttonwrap:hover {
    background-color: #449d44;
}
 .bo-sb-submit {
    position: absolute;
    margin-right: -17.5px;
    right: 50%;
    margin-top: -17.5px;
    cursor: pointer;
    top: 50%;
    height: 35px;
    width: 35px;
    background: transparent;
    border: none;
}
 .bo-sb-submit:after {
    top: 9px;
    border-radius: 50%;
    content: '';
    height: 8px;
    width: 8px;
    border: 2px solid white;
    left: 10px;
    position: absolute;
    box-sizing: content-box;
}
 .bo-sb-submit:before {
    width: 2px;
    top: 19px;
    height: 8px;
    position: absolute;
    background: white;
    left: 21px;
    content: '';
    transform: rotate(-35deg);
}
 #bo-sb-input {
    padding: 0 15px;
    background-color: #fff;
    border-bottom-left-radius: 5px;
    height: 35px;
    transition: all 0.5s;
    color: #333;
    outline: none;
    width: 84%;
    border: none;
    position: absolute;
    border-top-left-radius: 5px;
}
 #bo-sb-input:focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    outline: 0;
    border-color: #66afe9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
 </style> <div id="search-box-success"> <form action="/search" id="bo-search-box" method="get"> <input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/> <span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span> </form> </div> 


 <style> #search-box-default {
    width:100%;
    position:relative;
    margin:0 auto;
    float:none;
    height: 36px;
}
 #bo-search-box{
    border-radius:5px;
    border:1px solid #ddd;
    height: 35px;
    position:relative;
    line-height:1.5em;
    margin:0;
    background:#fff;
    padding:0;
    font-weight:normal;
}
 .bo-sb-buttonwrap {
    position: absolute;
    right: 0;
    border-top-right-radius: 5px;
    background-color: #fff;
    border: none;
    width: 14%;
    display: block;
    top: 0;
    cursor: pointer;
    height: 35px;
    border-bottom-right-radius: 5px;
    border-left: 1px solid #ddd;
}
 .bo-sb-buttonwrap:hover {
    background-color: #e6e6e6;
}
 .bo-sb-submit {
    right: 50%;
    border: none;
    top: 50%;
    margin-right: -17.5px;
    position: absolute;
    margin-top: -17.5px;
    background: transparent;
    width: 35px;
    cursor: pointer;
    height: 35px;
}
 .bo-sb-submit:after {
    left: 10px;
    width: 8px;
    border-radius: 50%;
    height: 8px;
    content: '';
    position: absolute;
    border: 2px solid black;
    box-sizing: content-box;
    top: 9px;
}
 .bo-sb-submit:before {
    content: '';
    background: black;
    transform: rotate(-35deg);
    position: absolute;
    height: 8px;
    left: 21px;
    width: 2px;
    top: 19px;
}
 #bo-sb-input {
    height: 35px;
    background-color: #fff;
    width: 84%;
    border: none;
    border-top-left-radius: 5px;
    outline: none;
    border-bottom-left-radius: 5px;
    padding: 0 15px;
    position: absolute;
    transition: all 0.5s;
    color: #333;
}
 #bo-sb-input:focus {
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    outline: 0;
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
 </style> <div id="search-box-default"> <form action="/search" id="bo-search-box" method="get"> <input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/> <span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span> </form> </div> 

Cara Memasangnya sangat gampang :
  • Masuk ke Dashbord Blog kalian
  • Pilih tata Letak.
  • Pilih Tambahkan Gadget 
  • Pilih HTML/JavaScript
  • Simpan

Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda, jangan lupa tinggalkan comment untuk memulai berdiskusi dengan kami.


 https://bloggersorigin.com/blogger-search-box-widgets-stylish-search-boxes/