Add Extreme CSS3 Floating Google Search Bar for Blogger

Tiện ích này cho phép hiển thị thanh tìm kiếm Google Search Bar vào phía trên cùng bên phải màn hình. Thanh Google Search Bar sẽ tự động chạy khi người đọc web cuộn chuột lên xuống, rất tiện khi đang duyệt web mà muốn tìm kiếm gì đó.

Có 2 cách thêm tiện ích này

Cách 1: Add a Gadget

Bước 1: vào menu "Bố cục", ấn vào "Thêm tiện ích"

Bước 2 : Từ cửa sổ Popup hiện ra, bạn click vào "HTML/Javascript"

Bước 3: Copy đoạn mã A dưới đây vào hộp HTML/Javascript

<div class='noop-searchbox' id='noop-searchbox'>
<form action='/search' id='noop-searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
<button id='sbutton' type='submit'>
<span id='simg'/>
</button>
</form>
</div>
<style type="text/css">
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{ background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0kNvIz_5rSlgdm3F2sDLzHIWaLZMa-kj2_cpe2vJuJbkmAEdyZRYdiMeTtmGW6NgbamEzbY5j7Nq4XJ5rdS-e-l6fsTQ-S0NCdV7KxQaf4DdxTJt4Gejb6ZKw6KhlB_DuRY-tZuIy-xE/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.noop-searchbox {
display: block;
position: fixed;
right: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
</style>

Xong click Lưu

Cách 2: Chỉnh sửa HTML

Chú ý: trước khi chỉnh sửa trong phần HTML các bạn cần backup trước Template đang dùng để tránh bị lỗi.

Hướng dẫn:

Bước 1: Truy cập vào quản lý Blogger, click Mẫu rồi click tiếp Chỉnh sửa HTML

Bước 2: Click chuột vào khoảng trống bất kỳ trong khung soạn thảo HTML ở phía dưới rồi ấn CTRL+F để hiện ra khung tìm kiếm rồi gõ <body>

Sao chép và dán đoạn mã A ở trên vào phía dưới thẻ <body> vừa tìm.

Xong click Lưu mẫu

Xem DEMO ngay tại chính trang web này