Tutorial 2x Hướng dẫn tạo khung tìm bài viết theo ID cho XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,185
Được Like
11,583
Hướng dẫn tạo khung tìm bài viết theo ID cho XenForo 2

Bài viết sẽ hướng dẫn các bạn cách thêm khung tìm kiếm bài viết theo ID cho XenForo 2.

Các bạn chỉ việc vào Widget > Add Widget > chọn loại HTML > vào thiết lập thông tin các ô "Widget key", "Title" và chọn các vị trí hiển thị tùy theo ý thích của bạn.

Sau đó ở ô Template, các bạn thêm vào đoạn code sau:
Mã:
<div class="form-searchid">
<form class="searchid" action="threads/" method="get" id="form_search_topic">
    <div class="inputid"><input size="20" type="text" value="" placeholder="Nhập ID topic"></div>
    <div class="submitid"><input type="button" value=" Tìm " onClick="$('#form_search_topic').attr('action', '{{$xf.homePageUrl}}/threads/'+$('#form_search_topic .inputid input').val()); $('#form_search_topic').submit();" style="height:25px; font-size:13px"></div>
</form>
</div>

Các bạn có thể tham khảo ở hình ảnh sau:

search-bar.png

Tiếp theo các bạn vào EXTRA.less thêm đoạn code sau vào:
Mã:
.form-searchid .searchid {
background: url(/images/bgntp1.png) no-repeat;
width: 187px;
height: 36px;
margin-left: 1px;
margin-top: 5px;
margin-bottom: 5px;
}


.form-searchid {
width: 190px;
margin: 2px;
padding: 3px;
height: 45px;
}


.form-searchid .searchid .inputid input {
font-size: 13px !important;
font-family: Arial, Helvetica, sans-serif !important;
color: #5e5e5e !important;
width: 100px;
padding: 2px 5px 2px 5px;
border: 1px solid #0e93ad;
margin: 7px 0 0 36px;
float: left;
}


.form-searchid .searchid .submitid input {
font-size: 14px !important;
font-family: Arial, Helvetica, sans-serif !important;
color: #fff !important;
font-weight: bold;
border: 0;
background: none;
float: left;
text-transform: uppercase;
text-shadow: 0px 1px 2px #007891;
margin-top: 5px;
display: block;
cursor: pointer;
}

- Cuối cùng là upload ảnh ở file đính kèm vào thư mục images, sửa url trên đoạn css nếu upload ảnh ở nơi khác.

Demo:

demo-search-bar.png

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


PVS - VNXF.VN
 

Đính kèm

  • bgntp1.png
    bgntp1.png
    4.2 KB · Lượt xem: 33

dhv49

Thượng Đế
Tham gia
14/03/2015
Bài viết
280
Được Like
176
Cảm ơn bạn, nó thật bổ ích
 

quick87

Thượng Đế
Tham gia
10/12/2016
Bài viết
112
Được Like
62
Hướng dẫn tạo khung tìm bài viết theo ID cho XenForo 2

Bài viết sẽ hướng dẫn các bạn cách thêm khung tìm kiếm bài viết theo ID cho XenForo 2.

Các bạn chỉ việc vào Widget > Add Widget > chọn loại HTML > vào thiết lập thông tin các ô "Widget key", "Title" và chọn các vị trí hiển thị tùy theo ý thích của bạn.

Sau đó ở ô Template, các bạn thêm vào đoạn code sau:
Mã:
<div class="form-searchid">
<form class="searchid" action="threads/" method="get" id="form_search_topic">
    <div class="inputid"><input size="20" type="text" value="" placeholder="Nhập ID topic"></div>
    <div class="submitid"><input type="button" value=" Tìm " onClick="$('#form_search_topic').attr('action', '{{$xf.homePageUrl}}/threads/'+$('#form_search_topic .inputid input').val()); $('#form_search_topic').submit();" style="height:25px; font-size:13px"></div>
</form>
</div>

Các bạn có thể tham khảo ở hình ảnh sau:

Tiếp theo các bạn vào EXTRA.less thêm đoạn code sau vào:
Mã:
.form-searchid .searchid {
background: url(/images/bgntp1.png) no-repeat;
width: 187px;
height: 36px;
margin-left: 1px;
margin-top: 5px;
margin-bottom: 5px;
}


.form-searchid {
width: 190px;
margin: 2px;
padding: 3px;
height: 45px;
}


.form-searchid .searchid .inputid input {
font-size: 13px !important;
font-family: Arial, Helvetica, sans-serif !important;
color: #5e5e5e !important;
width: 100px;
padding: 2px 5px 2px 5px;
border: 1px solid #0e93ad;
margin: 7px 0 0 36px;
float: left;
}


.form-searchid .searchid .submitid input {
font-size: 14px !important;
font-family: Arial, Helvetica, sans-serif !important;
color: #fff !important;
font-weight: bold;
border: 0;
background: none;
float: left;
text-transform: uppercase;
text-shadow: 0px 1px 2px #007891;
margin-top: 5px;
display: block;
cursor: pointer;
}

- Cuối cùng là upload ảnh ở file đính kèm vào thư mục images, sửa url trên đoạn css nếu upload ảnh ở nơi khác.

Demo:

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


PVS - VNXF.VN
Cảm ơn bạn đã hướng dẫn.
Bạn cho hỏi cái này chỉ có tác dụng khi mình click vô nút: "Tìm".
Nếu nhập số ID rồi bấm enter thì nó không ra? Cái này thì sửa như thế nào ?

Mong bạn hướng dẫn thêm, thanks !
 

dhv49

Thượng Đế
Tham gia
14/03/2015
Bài viết
280
Được Like
176
Cảm ơn bạn đã hướng dẫn.
Bạn cho hỏi cái này chỉ có tác dụng khi mình click vô nút: "Tìm".
Nếu nhập số ID rồi bấm enter thì nó không ra? Cái này thì sửa như thế nào ?

Mong bạn hướng dẫn thêm, thanks !
Mình cũng giống bạn, khi nhậm ID rồi bấm enter thì nó không ra. Ví dụ:
  • Khi nhập id: 123456 => click TÌM thì nó trả về domain.com/threads/12345/ =>ok
  • Khi nhập id: 123456 => gõ ENTER thì nó trả về domain.com/threads/12345/threads/? =>lỗi
Mong muốn: khi click Tìm hay gõ ENTER thì nó đều trả về domain.com/threads/12345/
Nhờ admin và các bác fix lỗi ENTER này giúp. Cảm ơn
 

nhuttran913

Thượng Đế
Tham gia
18/03/2017
Bài viết
88
Được Like
26
tham khảo : chophanrang.vn có khung tìm kiếm

<div class="form-searchid-header form-searchid" >
<h3>Tìm kiếm bài viết theo id</h3>
<form class="searchid" target="_top">
<div class="inputid"> <input size="20" type="text" id="inputsearch" value="Nhập ID topic" onblur="if(this.value=='') this.value='Nhập ID topic';" onfocus="if(this.value=='Nhập ID topic') this.value='';"> </div>
<div class="submitid"><input type="submit" value=" Tìm " onclick="searchThreadIDHeader(this);return false" style="height:25px; font-size:13px"></div>
</form>
</div>
<script type="text/javascript">
function searchThreadIDHeader(t)
{
var id = $('.form-searchid-header #inputsearch').val();
if (id > 0) {
window.location.href = '/index.php?threads/'+id + '/';
} else {
alert('Vui lòng nhập id là số');
}
}
</script>
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom