Hộp tìm kiếm (Search Box) là phần cơ bản nhưng là một phần cần thiết của trang web. Họ là người dùng thuận tiện và giúp bạn tăng khả năng sử dụng trang web của bạn. Họ giúp người đọc của bạn điều hướng trong suốt blog của bạn hiệu quả hơn. Bạn sẽ thấy rằng mỗi blogger blogspot có tiện ích hộp tìm kiếm tùy chỉnh phong cách khác nhau phù hợp với thiết kế mẫu của họ bởi vì, họ không chỉ giúp người dùng tìm ra giải pháp cho vấn đề của họ dễ dàng hơn mà còn thêm giao diện chuyên nghiệp vào blog của bạn.
Trong khi các trình thu thập dữ liệu trên web như Google có thể dễ dàng thu thập dữ liệu toàn bộ trang web của bạn để lập chỉ mục tất cả các bài đăng và trang của bạn, thì khách truy cập chỉ có quyền truy cập vào các liên kết ở phía trước chúng. Bạn có thể có hàng trăm bài đăng / trang trở lên để mọi người đọc. Bạn có thể có một danh mục, nhãn, thẻ, bài đăng liên quan khác nhau, v.v. được liệt kê trên mỗi trang của bạn, nhưng bạn không thể cung cấp tất cả dữ liệu của mình trong một trang. Để mọi người tìm thấy những gì họ đang tìm kiếm, họ cần có thể tìm kiếm thông qua toàn bộ nội dung của bạn một cách nhanh chóng và dễ dàng.
Bất cứ trang nào khách truy cập truy cập, họ có thể tìm kiếm những gì họ muốn. Điều này cho phép mọi người có quyền truy cập vào một số nội dung ẩn của bạn sẽ mất nhiều thời gian hơn để tìm bằng cách nhấp qua vô số trang hoặc bài đăng. Mọi người càng dễ dàng điều hướng toàn bộ blog của bạn, họ càng có nhiều khả năng họ sẽ ở lại và truy cập lại vì họ có thể chuyển sang trang khác, tăng tỷ lệ thoát của bạn.
Hộp Tìm Kiếm Tùy Chỉnh Cho Blogger
Chỉ cần thêm một Thanh tìm kiếm là không đủ, nó phải luôn sẵn sàng giúp khách hàng và phù hợp với chủ đề của blog của bạn. Blogger cũng cung cấp tiện ích Tìm kiếm cho blogger, nhưng điều đó không cung cấp giao diện chuyên nghiệp, sành điệu cho blog của bạn . Nếu hộp Tìm kiếm cũ của bạn không hoạt động chính xác và bạn muốn thay thế nó bằng một cái đẹp, đừng lo lắng, chỉ cần chọn một trong những điều sau đây và làm theo các hướng dẫn từng bước dưới đây. Giao diện của thiết kế tùy thuộc vào bạn, bạn cũng có thể chỉnh sửa CSS theo nhu cầu blog của mình.
Lợi ích của việc thêm Hộp Tìm kiếm Phong cách Tùy chỉnh
- Thêm vẻ chuyên nghiệp cho trang web của bạn.
- Cung cấp lợi ích cơ bản cho khách hàng.
- Tiết kiệm thời gian sử dụng.
- Có thể được áp dụng bất cứ nơi nào như trong tiêu đề, thanh bên, chân trang, vv
- Hiệu ứng sành điệu, di chuột và tập trung.
- CSS thuần túy, không có hình ảnh.
- Dễ dàng tùy chỉnh từ các kiểu CSS.
- Tự động điều chỉnh độ rộng.
Dưới đây là 5 Hộp Tìm Kiếm dành cho blogger của bạn.
STYLE 1
<style type="text/css">
#hbz-searchbox {
background-color: #F5F5F5;
border: 1px solid #EDEDED;
padding: 5px;
border-radius: 10px;
margin: 10px auto;
min-width: 238px;
max-width: 288px;
}
#hbz-input {
background-color: #FEFEFE;
border: medium none;
font: 12px/12px "HelveticaNeue", Helvetica, Arial, sans-serif;
margin-right: 2%;
padding: 4%;
box-shadow: 2px 1px 4px #999999 inset;
border-radius: 9px;
width: 60.33%;
}
#hbz-input:focus {
outline: medium none;
box-shadow: 1px 1px 4px #0D76BE inset;
}
#hbz-submit {
background: transparent linear-gradient(to bottom, #34ADEC 0%, #2691DC 100%) repeat;
border-radius: 9px;
border: medium none;
color: #FFF;
cursor: pointer;
font: 13px/13px "HelveticaNeue", Helvetica, Arial, sans-serif;
padding: 4%;
width: 28%;
}
#hbz-submit:hover {
background: transparent linear-gradient(to bottom, #2691DC 0%, #34ADEC 100%) repeat;
}
</style>
<form id="hbz-searchbox" action="/search" method="get">
<input type="text" id="hbz-input" name="q" placeholder="Type Here..." />
<input type="hidden" name="max-results" value="8" />
<input id="hbz-submit" type="submit" value="Search" />
</form> STYLE 2
<style type="text/css">
#hbz-searchbox {
min-width: 250px;
margin: 10px auto;
border-radius: 3px;
overflow: hidden;
max-width: 300px;
}
#hbz-input {
width: 59.2%;
padding: 10.5px 4%;
font: bold 15px "lucida sans", "trebuchet MS", "Tahoma";
border: none;
background-color: #EEE;
}
#hbz-input:focus {
outline: none;
background-color: #FFF;
box-shadow: 0 0 2px #333333 inset;
}
#hbz-submit {
overflow: visible;
position: relative;
float: right;
border: none;
padding: 0;
cursor: pointer;
height: 40px;
width: 32.8%;
font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma";
color: #FFF;
text-transform: uppercase;
background-color: #D83C3C;
}
#hbz-submit::before {
content: "";
position: absolute;
border-width: 8px;
border-style: solid solid solid none;
border-color: transparent #D83C3C;
top: 12px;
left: -6px;
}
#hbz-submit:focus,
#hbz-submit:active {
background-color: #C42F2F;
outline: none;
}
#hbz-submit:focus::before,
#hbz-submit:active::before {
border-color: transparent #C42F2F;
}
#hbz-submit:hover {
background-color: #E54040;
}
#hbz-submit:hover::before {
border-color: transparent #E54040;
}
</style>
<form id="hbz-searchbox" action="/search" method="get">
<input type="text" id="hbz-input" name="q" placeholder="Search..." />
<input type="hidden" name="max-results" value="8" />
<button id="hbz-submit" type="submit">Search</button>
</form> STYLE 3
<style type="text/css">
#hbz-searchbox {
background: transparent linear-gradient(#2C2C2C, #111);
border-width: 1px;
border-style: solid;
border-color: #000;
border-radius: 4px;
padding: 10px;
z-index: 1;
display: block;
margin: 10px auto;
min-width: 228px;
max-width: 278px;
}
#hbz-input,
.hbz-submit {
box-shadow: 0 2px #000;
font-family: 'Cabin', helvetica, arial, sans-serif !important;
margin: 0px;
padding: 0px;
}
#hbz-input {
background: linear-gradient(#333, #222);
border: 1px solid #444;
color: #888;
display: block;
float: left;
font-size: 13px;
height: 30px;
padding-left: 4%;
padding-right: 4%;
width: 60.2%;
border-radius: 3px 0px 0px 3px;
}
#hbz-input:focus {
animation: glow 800ms ease-out infinite alternate;
border-color: #393;
color: #efe;
outline: none;
}
.hbz-submit {
background: linear-gradient(#333, #222);
box-sizing: content-box;
border: 1px solid #444;
border-left-color: #000;
color: #fff;
display: block;
font-size: 12px;
height: 30px;
line-height: 30px;
position: relative;
width: 30%;
cursor: pointer;
border-radius: 0px 3px 3px 0px;
}
.hbz-submit:hover,
.hbz-submit:focus {
background: linear-gradient(#393939, #292929);
}
.hbz-submit:hover,
.hbz-submit:focus {
color: #5f5;
outline: none;
}
.hbz-submit:active {
top: 1px;
}
@keyframes glow {
0% {
border-color: #393;
box-shadow: 0 2px #000, 0px 0px 5px #3DAD3D, inset 0px 0px 5px #1F391F;
}
100% {
border-color: #6f6;
box-shadow: 0 2px #000, 0px 0px 8px #6bab6b, inset 0px 0px 10px #1F391F;
</style>
<form id="hbz-searchbox" action="/search" method="get">
<input type="text" id="hbz-input" name="q" placeholder="Search..." />
<input type="hidden" name="max-results" value="8" />
<button class="hbz-submit" type="submit">Search</button>
</form> STYLE 4
<style type="text/css">
#hbz-searchbox {
height: 40px;
position: relative;
min-width: 250px;
max-width: 300px;
margin: 10px auto;
}
.hbz-buttonwrap {
border: none;
width: 14%;
height: 35px;
display: block;
position: absolute;
top: 0;
right: 0;
background: #009bff;
cursor: pointer;
border-bottom: 5px solid #0276c1;
}
.hbz-buttonwrap:hover {
border-bottom: 5px solid #bc490a;
background: #d75813;
}
.hbz-submit {
width: 35px;
height: 35px;
background: transparent;
cursor: pointer;
position: absolute;
right: 50%;
top: 50%;
margin-top: -17.5px;
margin-right: -17.5px;
border: none;
}
.hbz-submit:after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 2px solid white;
border-radius: 50%;
left: 10px;
top: 9px;
box-sizing: content-box;
}
.hbz-submit:before {
content: '';
position: absolute;
height: 8px;
width: 2px;
background: white;
transform: rotate(-35deg);
top: 19px;
left: 21px;
}
#hbz-input {
height: 32px;
width: 82%;
position: absolute;
padding-left: 4%;
border: none;
outline: none;
right: 14%;
border-bottom: 5px solid #bbb;
border-left: 1px solid #eaeaea;
background-color: #fbfbfb;
border-top: 1px solid #eaeaea;
box-shadow: 1px 1px 2px #e9e4e4 inset;
}
#hbz-input:focus,
#hbz-input:active {
background-color: #fff;
}
</style>
<form action="/search" id="hbz-searchbox" method="get">
<span class="hbz-buttonwrap"><button class="hbz-submit" value="" type="submit"></button></span>
<input type="text" name="q" id="hbz-input" placeholder="Type here ..." />
<input type="hidden" name="max-results" value="8" />
</form>STYLE 5
<style type="text/css">
#hbz-searchbox {
height: 35px;
margin: 10px auto;
position: relative;
min-width: 250px;
max-width: 300px;
}
.hbz-buttonwrap {
border: none;
width: 14%;
height: 35px;
display: block;
position: absolute;
top: 0;
right: 0;
background: #444;
cursor: pointer;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.hbz-buttonwrap:hover {
background: #1a1a1a;
}
.hbz-submit {
width: 35px;
height: 35px;
background: transparent;
cursor: pointer;
position: absolute;
right: 50%;
top: 50%;
margin-top: -17.5px;
margin-right: -17.5px;
border: none;
}
.hbz-submit:after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 2px solid white;
border-radius: 50%;
left: 10px;
top: 9px;
box-sizing: content-box;
}
.hbz-submit:before {
content: '';
position: absolute;
height: 8px;
width: 2px;
background: white;
transform: rotate(-35deg);
top: 19px;
left: 21px;
}
#hbz-input {
height: 35px;
width: 82%;
padding: 0px;
padding-left: 4%;
border: none;
outline: none;
position: absolute;
right: 14%;
box-shadow: inset 0 2px 2px #080808;
background-color: #444444;
color: #fff;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
transition: all 0.5s;
}
#hbz-input:hover,
#hbz-input:focus {
box-shadow: inset 1px 1px 10px #000;
}
</style>
<form action="/search" id="hbz-searchbox" method="get">
<span class="hbz-buttonwrap"><button class="hbz-submit" value="" type="submit"></button></span>
<input type="text" name="q" id="hbz-input" placeholder="Search..." />
<input type="hidden" name="max-results" value="8" />
</form> HƯỚNG DẪN SỬ DỤNG
BƯỚC 1: Đăng nhập tài khoản blogger của bạn, Vào Bố cục ~> Thêm tiện ích ở vị trí bạn muốn hiện thị
BƯỚC 2: Chọn HTML/JavaScript từ cửa sổ vừa hiện ra
BƯỚC 3: Dán code của STYLE mà bạn đã chọn vào ô nội dung và Lưu
Xong.
Trên đây là một số style để thay đổi Hộp Tìm Kiếm cho Blogger của bạn. Hy vọng hướng dẫn này sẽ giúp các bạn có một blogger đẹp hơn, thân thiện hơn.
Cám ơn các bạn đã đọc bài viết.
Tags:
Blogger