Search box HTML code cho Blogger

Người Đăng: VnCrypto

Chia Sẻ :

Tweet

Search box trên trang web được sử dụng để cho phép người dùng tìm kiếm và khai thác thông tin dữ liệu từ trang web của bạn. sau đây mình sẽ hướng dẫn các bạn thêm widget search box cho blogger.

Hướng dẫn

Truy cập vào quản lý Blogger >> Bố Cục >> Thêm Tiện Ích

Sau đó thêm đoạn Search Box HTML dưới đây vào và lưu lại.

<style>
#abt-search-btn {
    background: none repeat scroll 0 0 #359BED;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 20px;
}
#abt-search-box {
    border: 1px solid #d2d2d2;
    background: none repeat scroll 0 0 #FFFFFF;
    padding: 10px;
    width: 186px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder="  Type to search "/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>

 <style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTyNRtQL2WE4r3VziaLFnkdQFC7RgaHqdwFLWG2T8ErTumdU5PSJkWMF7aWrR5os_1hsPz1MsOgYPwJ05OSiqGJRY7ufpYSKKVtABM3FyJ0QfY-n5WDn7rfNBGl548maYcnuguGieEGAMt/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/AVvXsEhYnN_viFr-RtsslaK5X7HXLBMr9OZCMG-xekUK6HgoUJHm9duAmhcRKsKgxjLiGn6aCOPXoaoaIHdctfe2zsQVywFPXbDRQH-J2fQwnvjETYDGc8BtuCwZEzXdbsU1Yh8MjgTRiVATj1aD/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/AVvXsEjpnJQODt-iKwkKdqHCvRwkWjetg29MOFbIuMYQMOFtcNBGVhVHnw16CZubWnG7hi1n0xGgyvUjSA5aBviPZVJsTrxaFlnqjmhOewCWDddfhfAouDEqgVQs5LZNU27RZAQuNX5v8id13xxD/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>

Tag : Blogspot Tips