Hướng dẫn tạo Search Box đẹp mắt trong Blogspot

Search Box - Ô tìm kiếm cho phép người dùng thao tác tìm kiếm trên Blog của bạn một cách hiệu quả. Blogspot hay bất cứ trang web nào không có Search Box thì quả là một thiếu sót lớn. Trong bài này thủ thuật Blogspot sẽ hướng dẫn bạn cách tạo một Search Box đẹp mắt nhanh nhất và đơn giản nhất. Cùng xem ngay dưới đây nhé!

• Hướng dẫn cài Yahoo Media Player cho Blogspot
• Thủ thuật SEO cho Blogger toàn tập

Hướng dẫn tạo Search Box đẹp mắt trong Blogspot

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/AVvXsEhJOkXG8aAUdZ86aMPP2cPa-ArxawDeNLlEXNp70m16Rz85zLU5tnTjfvySf5RHdAKLYI7QVC37Lbl5edqs8g5YA2aH0__ZQlCw_fgO8daDLJdf5Rr_5dKqbhgLXyElMU-M2diS0Zvjry_f/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/AVvXsEjpBKtK-p7c6BRrpWZI8dXPCk2bAzJMnzIXGmxgBdjB7qfmgc4C5m8dGrMeB95NVxGPixpcX5-s5GLwLoFNtrm-Li6UBc24uB4JodL4tl5-GSxDCZ5zK_1Ai4GjuDWBNKP_XPQxhCjP90mD/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/AVvXsEgnDblHmi7YGu11yUr-JBtggghC4oenlASeb9TX5rt52LtZOz2Jupz19pOPNCVUtHot9rYwvHdESk8y61JSZ6V1mB8VyEqpG0h9GvZMUFDww3PoQcYjLHkpktbu2lYfseMT3NxLZcPYpUcJ/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>

Chúc bạn thành công!
Bạn gặp khó khăn hay thắc mắc trong quá trình cài đặt hãy comment bên dưới bài viết, mình sẽ giúp bạn gỡ rối nhanh nhất

Pig Ella

Từ khóa liên quan:

• tạo search box trong blogspot
• search box trong blogspot

LIKE and Share this article: :

Share on Google Plus