Khung search chuyển đổi giữa Blogger và Google Custom
Trên blog của mình nếu là độc giả lâu rồi thì chắc cũng thấy mình có một khung tìm kiếm có thể chuyển đổi được giữa cái mặc định của Blogger và công cụ tìm kiếm tùy chỉnh của Google. Trước đây mình cũng có share code cho một vài bạn đã inbox vào hòm thư trong email của mình. Và nhu cầu giờ cũng nhiều nên mình sẽ chia sẻ trực tiếp lên đây luôn.
Cái khung này cũng không có gì ghê gớm lắm mình chỉ sử dụng mẹo, thực chất ra đây là 2 khung tìm kiếm riêng biệt. Mình sử dụng Javascript để ẩn cái này và hiện cái kia theo cái Combo Box trong HTML mà thôi. Cái lợi của việc sử dụng 2 cái này là người dùng có thêm tùy chọn tìm kiếm trên blog một cách dễ dàng nhất. Thôi chém thế chắc đủ rồi sau đây mình xin chia sẻ nó đến với các bạn.
Bạn nào không thích cái khung này thì có thể tham khảo thêm "Khung tìm kiếm kiểu Overlay cho Blogger" nhé.
Tiếp tục công việc thứ 2 chèn đoạn CSS này lên trên thẻ ]]></b:skin>
Sau đây là đoạn mã bạn cần, hãy chèn nó vào chỗ nào mà bạn muốn hiện nút search
 |
| Khung Search có thể chuyển đổi |
Bạn nào không thích cái khung này thì có thể tham khảo thêm "Khung tìm kiếm kiểu Overlay cho Blogger" nhé.
Khung tìm kiếm chuyển đổi giữa Blogger và Google
Việc đầu tiên để thủ thuật này hoạt động bắt buộc blog của bạn phải có Google Custom Search hay nói dài dòng ra là công cụ tìm kiếm tùy chỉnh của Google mình đã có bài hướng dẫn các bạn có thể click vào để đọc.Tiếp tục công việc thứ 2 chèn đoạn CSS này lên trên thẻ ]]></b:skin>
.search-bar input, select, textarea {
background-color: #FFF;
border: 1px solid #DDD;
color: #333;
font-size: 18px;
font-weight: 300;
padding: 16px;
width: 100%;
}
.search-bar .first {
clear: both;
margin-left: 0px;
}
.search-bar .one-fourth {
width: 23.0769%;
float: left;
}Sau đây là đoạn mã bạn cần, hãy chèn nó vào chỗ nào mà bạn muốn hiện nút search
<div class='search-bar'>
<select class='first one-fourth' id='sbox' onchange='searchBox()' style='padding: 15px;'>
<option value='ggs'>Dùng Google Custom</option>
<option value='bgs'>Dùng Blog Mặc Định</option>
</select>
<form action='/p/search.html' class='search-form' id='ggs' method='get' role='search' style='display:block;'>
<input itemprop='query-input' name='q' onblur='if ( this.value == '' ) { this.value = 'Từ khóa tìm kiếm…'; }' onfocus='if ( this.value == 'Từ khóa tìm kiếm…') { this.value = ''; }' required='' type='search' value='Từ khóa tìm kiếm…'/>
<input style='width:100%;display:none;' type='submit' value='Tìm kiếm'/>
</form>
<form action='/search/max-results=7' class='search-form' id='bgs' method='get' role='search' style='display:none;'>
<input name='q' onblur='if ( this.value == '' ) { this.value = 'Từ khóa tìm kiếm…'; }' onfocus='if ( this.value == 'Từ khóa tìm kiếm…') { this.value = ''; }' type='search' value='Từ khóa tìm kiếm…'/>
<input style='width:100%;display:none;' type='submit' value='Tìm kiếm'/>
</form>
<script type='text/javascript'>
function searchBox()
{
if(document.getElementById('sbox').value == "ggs") {
document.getElementById('ggs').style.display='block';
document.getElementById('bgs').style.display='none';
} else if(document.getElementById('sbox').value == "bgs") {
document.getElementById('ggs').style.display='none';
document.getElementById('bgs').style.display='block';
}
}
</script>
</div>
lúc 06:13 16 tháng 11, 2014
:) Tiện ích này em chờ đợi mà, em đã áp dụng cho blog anh ạ.
lúc 09:36 16 tháng 11, 2014
Quá được, mà khung của anh hơi to so với blog em nhỉ :D
lúc 11:12 16 tháng 11, 2014
Main của em là 1100px và của anh là 1200px anh ạ
lúc 18:25 16 tháng 11, 2014
Đánh giấu cái, Giờ đi tụng Kinh lát về áp dụng luôn. Cám ơn Lâm nhé
lúc 19:49 16 tháng 11, 2014
Nhìn thích lắm rồi nhưng giờ chưa thể áp dụng được. Thời gian nữa để Người Khổng Lồ index bài viết nhanh nhanh hơn chút nữa đã.
Cám ơn Lâm nhé. Tớ thu gạch về rồi. hi
lúc 15:31 17 tháng 11, 2014
Tự vào webmaster submit luôn khỏi chờ Google index :D
lúc 15:32 17 tháng 11, 2014
Khá hay đánh dấu một đem về blog xài, cám ơn tác giả nhiều nhé.
lúc 17:48 18 tháng 11, 2014
Uh. Mà sao mấy bữa nay không thấy email phản hồi các tin nhắn vậy. Kỳ lạ quá, phải vào lại bài mới thấy Lâm trả lời.
Có rảnh dỗi ghé qua izdesigner ( dot) blogspot ( dot) com và cho xin ý kiến nhé. Đang tính gán tên miền nhưng chưa biết đã ổn chưa. Cám ơn bác trước nhá.
lúc 18:12 18 tháng 11, 2014
Ủa trong mail đâu có nhận được thư nào mới từ bác đâu ta :D
lúc 18:17 18 tháng 11, 2014
Site đó mình không chắc là có ổn hay không nữa. Cái đó tùy thuộc vào khách tìm kiếm cái chủ đề mà website bác đang hướng tới thôi. Mà mình không rành bên mảng đó.
Về giao diện thì thấy có cái gì đó không thích thú lắm. Trang chủ ảnh khá nhỏ so với mặt độ chữ, mà site về mảng design thường ảnh phải to hơn. Đó là theo cảm nhận của mình.
lúc 05:14 19 tháng 11, 2014
Em góp ý nhé :)
CSS nên thêm .search-bar{overflow: hidden;} để khi thu nhỏ phóng to không bị lỗi bố cục.
Xóa itemprop=' ' để đạt chuẩn HTML5
lúc 09:55 19 tháng 11, 2014
Cám ơn Lâm nhé. Tớ sẽ xem sét lại.
lúc 11:50 19 tháng 11, 2014
"sét" Anh Blog Designer hài hước nhỉ? :)
lúc 19:43 19 tháng 11, 2014
Mặc định blog anh cũng thế, nhưng anh muốn để nguyên bản cho mọi người có thể sáng tạo. Còn cái itemprop quên loại bỏ :D. Blog anh có đánh dấu schema cho khung search ^^
lúc 11:06 22 tháng 11, 2014
Ko biết sao mà cái template mình đang dùng nội dung trang 404 đều ko hiện ra hoặc ko có tác dụng (js), bạn nào biết nguyên nhân chỉ dùm với :(
duyblog.com/404
lúc 13:14 22 tháng 11, 2014
Chắc template đó không có trang 404 được viết :D. Thấy hình như là template bác mua mà pmm tác giả hắn support cho :)
lúc 13:30 22 tháng 11, 2014
Nhờ bạn Việt nên đã khắc phục đc :D
www.dongvietblog.com/2014/09/khac-phuc-loi-blog-khong-tu-chuyen-huong-trang-bao-loi-404.html
lúc 03:10 19 tháng 12, 2014
bác Lâm cho hỏi ... nếu ta dùng google form để tìm kiếm... giả sử như của bác rồi sau đó có quảng cáo hiện ra .... vậu tiền click quảng cáo có tính cho mình hay không ( ví dụ như blog của bác đã có google adsend )
Em tưởng là quảng cáo trong cái google search form nó không tính tiền ?
lúc 08:24 19 tháng 12, 2014
Tính hết chứ bác, bên trong cái Google Custom search nó có tùy chọn kiếm tiền mà, vả lại trong bác có thể vào adsense link với nó kiếm tiền như bình thường thôi. Mà tỉ lệ click quảng cáo trong search không cao cho lắm.
lúc 14:25 19 tháng 12, 2014
nhưng nếu có 1 trang chuyên tìm kiếm thì có le có thể nó cũng ko tệ :) có lẽ em cũng nên tìm hiểu
lúc 22:42 1 tháng 7, 2016
Đang có vấn đề nan giải về web blog tại công cụ tìm kiếm.
Nếu anh có nhã hứng thì giúp em nhé.
Thật tốt khi anh liên lạc với em qua skype: votatong