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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
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: 36

dhv49

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

quick87

Corporal
Tham gia
10/12/2016
Bài viết
113
Đượ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

MasterCorporal
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

Gefreiter
Tham gia
18/03/2017
Bài viết
93
Đượ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

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom