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

[PVS]

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:

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

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

 

[dhv49]

Cảm ơn bạn, nó thật bổ ích

 

[quick87]

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:

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

View attachment 29131
​

Tiếp theo các bạn vào EXTRA.less thêm đoạn code sau vào:

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

View attachment 29133
​

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]

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]

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>