Hộp tìm kiếm với style đẹp cho Blogspot

Nếu website của bạn có rất nhiều bài viết thì tạo hộp tìm kiếm là điều cấn thiết vì nó giúp độc giả của bạn tiếp cận thông tin nhanh chóng và dễ dàng. Việc này còn góp phần làm cho trang web của bạn mang tính khoa học, chuyên nghiệp hơn. Bài viết này sẽ hướng dẫn các bạn làm một hộp tìm kiếm đẹp mắt cho Blogger.

Xem Demo

Các bước thực hiện

Bước 1: Tại trang quản trị Blogger chọn Bố cục
Bước 2: Thêm một tiện ích HTML/ Javarscip
Bước 3: Thêm vào tiện ích đoạn code bên dưới:

<style type="text/css">
.search-box{margin-left:30px;}
.search-box .search-form {
position:relative;
width:278px;
height:48px;
}
.search-box .search-form .search-text {
border:1px solid #e8e8e8;
width:206px;
line-height:48px;
color:#aeaeae;
font-size:16px;
font-family: 'Istok Web', sans-serif;
height:48px;
margin:0;
padding-left:10px;
padding-right:60px;
position:relative;
z-index:0;
}
.search-box .search-form .search-submit {
width:54px;
height:50px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPWEV3ecxNFJjeIXL8x_8_IX4jVriHs1TYe13Ebze2IFpzXf2PrnRYn_DrgPzJPqpwB8RsynDIdEiDNJh3nmfIqs1xWcMxJ_nUO3GWPr4JNjyhZNru9HDcQxv1tmfhvYxfKWYJmhXSZUb7/s54/search-icon.png) no-repeat 0 0;
border:none;
padding:0;
margin:0;
cursor:pointer;
position:absolute;
top:-7px;
right:5px;
text-indent:-9999px;
line-height:0;
font-size:0;
}
.search-box .search-form .search-submit:hover{
opacity:0.8;
}
.search-box .search-form .search-text:focus {
box-shadow:0 0 5px #ddd;
-moz-box-shadow:0 0 5px #ddd;
-webkit-box-shadow:0 0 5px #ddd;
border:1px solid #cccccc;
}
</style>
<div class="search-box clearfix">
<form action="/search" class="search-form clearfix" method="get">
<div class="input-search-text">
<input class="search-text" maxlength="255" name="q" onblur="if (this.value == '') this.value = this.defaultValue;" onfocus="if (this.value == this.defaultValue)  this.value = '';" type="text" value="Nhập từ khóa" />
</div>
<div class="input-search-submit">
<input class="search-submit" name="submit" type="submit" value="Search" />
</div>
</form>
</div>

Bước 4: Nhấn Lưu 

Cảm ơn bạn đã quan tâm!