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.

Khung search chuyển đổi giữa Blogger và Google Custom
Khung Search có thể chuyển đổi
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é.

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;
}
lưu ý là đoạn css này xấu tàn bạo và giống với blog mình do đó để tối ưu thì các bạn nên tự viết lại cho phù hợp với giao diện của các bạn nhé.

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 == &apos;&apos; ) { this.value = &apos;Từ khóa tìm kiếm…&apos;; }' onfocus='if ( this.value == &apos;Từ khóa tìm kiếm…&apos;) { this.value = &apos;&apos;; }' 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 == &apos;&apos; ) { this.value = &apos;Từ khóa tìm kiếm…&apos;; }' onfocus='if ( this.value == &apos;Từ khóa tìm kiếm…&apos;) { this.value = &apos;&apos;; }' 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(&#39;sbox&#39;).value == &quot;ggs&quot;) {
    document.getElementById(&#39;ggs&#39;).style.display=&#39;block&#39;;
    document.getElementById(&#39;bgs&#39;).style.display=&#39;none&#39;;
      } else if(document.getElementById(&#39;sbox&#39;).value == &quot;bgs&quot;) {
    document.getElementById(&#39;ggs&#39;).style.display=&#39;none&#39;;
    document.getElementById(&#39;bgs&#39;).style.display=&#39;block&#39;;
      }
    }
    </script>
</div>
sau khi hoàn tất thì lưu lại là bạn đã có một khung Search chuyển đổi cực xấu từ KslZone.NET.

Lời kết

Thực chất theo mình thì cái chuyển đổi này cũng làm nhìn cho thích thôi chứ cái nào mặc định thì thường người ta sẽ sử dụng cái đó. Nhưng mà đây cũng là một mẹo nhỏ khá hay cho bạn nào thích tọc vạch và thêm mới những chức năng nhỏ nhẹ thế này. Mọi thắc mắc hoặc hỗ trợ chỉnh sửa khung search theo giao diện bất kì có thể để lại phần nhận xét phía dưới, nếu rảnh rỗi và làm được mình sẽ hỗ trợ nhiệt tình và ngược lại hehe.

21 bình luận

  1. avatar Nặc danh says

    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 ạ.

  2. avatar says

    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

  3. avatar Nặc danh says

    lúc 11:12 16 tháng 11, 2014

    Main của em là 1100px và của anh là 1200px anh ạ

  4. avatar says

    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é

  5. avatar says

    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

  6. avatar says

    lúc 15:31 17 tháng 11, 2014

    Tự vào webmaster submit luôn khỏi chờ Google index :D

  7. avatar says

    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é.

  8. avatar says

    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á.

  9. avatar says

    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

  10. avatar says

    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.

  11. avatar Nặc danh says

    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

  12. avatar says

    lúc 09:55 19 tháng 11, 2014

    Cám ơn Lâm nhé. Tớ sẽ xem sét lại.

  13. avatar Nặc danh says

    lúc 11:50 19 tháng 11, 2014

    "sét" Anh Blog Designer hài hước nhỉ? :)

  14. avatar says

    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 ^^

  15. avatar says

    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

  16. avatar says

    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 :)

  17. avatar says

    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

  18. avatar says

    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 ?

  19. avatar says

    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.

  20. avatar says

    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

  21. avatar says

    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

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.