Làm đẹp khung search Google cho Xenforo

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,625
Được Like
12,670
Làm đẹp khung search Google cho Xenforo

Bài viết này sẽ hướng dẫn các bạn cách làm đẹp khung search Google cho trang của bạn.

73kBjq5.png

Đầu tiên các bạn vào template ad_below_top_breadcrumb hoặc tạo 1 widget ở vị trí mong muốn. Sau đó paste code này ở dưới cùng template.
Mã:
<script>
  (function() {
    var cx = 'xxxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
   <div class="google_search">
        <span class="notice_search">Tìm Kiếm Với Google</span>
        <gcse:search></gcse:search>
   </div>

<br/>
<br/>

Lưu ý đoạn:
Mã:
xxxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxx

Bạn phải vào: http://google.com/cse để tạo cho mình 1 cái custom search rồi lấy id để thay thế đoạn trên (không được dùng đoạn trên nếu không sẽ không search được)

Tiếp theo các bạn vào EXTRA.CSS thêm đoạn sau vào
Mã:
/*
   
GOOGLE CUSTOM SEARCH */
.google_search .notice_search {
    background: #3D85C6;
    color: #FFF;
    padding: 5px 10px;
    font-size: 14px;
    font-family: roboto;
    border-bottom-right-radius: 5px;
}

.google_search {
    border: 5px solid #3D85C6;
    border-radius: 5px;
}
/* END GOOGLE CUSTOM SEARCH */

Chúc các bạn thành công.


Nguồn: mamcongnghe.com​
 

Fast

Gefreiter
Tham gia
17/02/2016
Bài viết
62
Được Like
54
sao không cho hình demo kết quả xem có đẹp không bạn?
nếu như hình trên thì mình thấy chưa đẹp , mình nghĩ nên cho
border-bottom-right-radius: = 1, hoặc 0 sẽ đẹp hơn.
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,625
Được Like
12,670
hii, thì mình thấy nó cũng đẹp hơn mặc định mà ^^
 

dcstylexf

Major
Tham gia
24/03/2015
Bài viết
2,006
Được Like
1,615
sao không cho hình demo kết quả xem có đẹp không bạn?
nếu như hình trên thì mình thấy chưa đẹp , mình nghĩ nên cho
border-bottom-right-radius: = 1, hoặc 0 sẽ đẹp hơn.
thì bạn có thể tự chỉnh mà :D
 

jangnam

Private
Tham gia
10/04/2015
Bài viết
6
Được Like
2
công nhận là đẹp mình đã làm ra nó
 

Top Bottom