» Hướng dẫn tạo giao diện blog cho Forum2 Exloader |  Pham_loi
 Chức vụ:
07:31:35, 25-09-2016 |
Viết Blog đang là một công việc yêu thích của nhiều người và Wapka thì hỗ trợ mọi thứ để giúp bạn xây dựng 1 Blog chất lượng. Hôm nay mình sẽ hướng dẫn các bạn cách tạo giao diện Blog cho Exloader Forum2 ngoài trang chủ Wapka.
Ảnh DEMO:
Mọi thứ đơn giản thôi. Đầu tiên chúng ta cần là thư viện jQuery
Tiếp theo hãy thiết kế giao diện Ô.1 TIF Exloader (Theme in Forum trong Global Style). Những gì chúng ta cần ở đây là:
name="thumb" để hiển thị Thumbnail
name="article" bao quanh ::theme::
name="articlecontent" để hiển thị 1 đoạn mô tả ngắn
Tiếp theo thiết kế giao diện Ô.1 MIF đảm bảo rằng:
class="eachmsg" bao quanh ::msg::
Sau đó các bạn Exloader forum2_0.xhtml như bình thường ra trang chủ hoặc bất cứ đâu bạn muốn.
Rồi cuối cùng post code này bên dưới Exloader
<div id="load1" style="display:none"></div>
<script language="javascript">
function gload(a,i,t){
$('#load1').load(a+' body',function(data){
$('#load1').html('');
data=$(data).find('.eachmsg').first().html();
content=data.substr(0,250).replace(/<(?:.|\n)*?>/gm, '').replace(/\[IMG(.+?)\[\/IMG|\[IFRAME(.+?)\[\/IFRAME/ig,'')+'@@';
content=content.replace(/\[IMG(.+?)\@@|\[IFRAME(.+?)\@@/ig,'...').replace(/@@/ig,'...');
data=data.split(/\[img/ig)[1.split(/\[\/img/ig)[0;
$('div[name=thumb:eq('+i+')').html('<a href="'+a+'" rel="bookmark" title="'+t+'"><img src="'+data+'" alt="'+t+'" style="width:100%;height:100%"/></a>');
$('div[name=articlecontent:eq('+i+')').html(content);
})
}
dem = document.getElementsByName('article').length;
for(i=0;i<dem;i++){
a = $('div[name=article:eq('+i+')').find('a').attr('href');
t = $('div[name=article:eq('+i+')').find('a').html();
gload(a,i,t);
}
</script>
Copy code
<script language="javascript">
function gload(a,i,t){
$('#load1').load(a+' body',function(data){
$('#load1').html('');
data=$(data).find('.eachmsg').first().html();
content=data.substr(0,250).replace(/<(?:.|\n)*?>/gm, '').replace(/\[IMG(.+?)\[\/IMG|\[IFRAME(.+?)\[\/IFRAME/ig,'')+'@@';
content=content.replace(/\[IMG(.+?)\@@|\[IFRAME(.+?)\@@/ig,'...').replace(/@@/ig,'...');
data=data.split(/\[img/ig)[1.split(/\[\/img/ig)[0;
$('div[name=thumb:eq('+i+')').html('<a href="'+a+'" rel="bookmark" title="'+t+'"><img src="'+data+'" alt="'+t+'" style="width:100%;height:100%"/></a>');
$('div[name=articlecontent:eq('+i+')').html(content);
})
}
dem = document.getElementsByName('article').length;
for(i=0;i<dem;i++){
a = $('div[name=article:eq('+i+')').find('a').attr('href');
t = $('div[name=article:eq('+i+')').find('a').html();
gload(a,i,t);
}
</script>
Copy code
Tất cả chỉ có vậy. Hi vọng rằng qua bài này tớ sẽ giúp được các bạn muốn tạo Blog bằng Forum2 trong Wapka. Chúc các bạn thành công!
Nguồn: KhanhNguyenZ.Com
:
0 ♥