Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Tuesday, March 3, 2015



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://lh6.googleusercontent.com/-Afl2I96CyOU/UXPHJcF9-KI/AAAAAAAAFcI/P06mAE04YqI/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!

0 comments:

Post a Comment

Popular Posts