Xenforo hiện nay được nhiều webmaster ưa chuộng vị tính năng hay, giao diện đẹp, load nhanh,... nhưng nhìn chung vẫn còn nhiều điểm bạn phải tự tay làm mới có được 1 diễn đàn ưng ý. Sau đây mời các bạn xem bài hướng dẫn cách thay đổi khung đăng ký thành viên trong diễn đàn Xenforo thành dạng popup để tự tay mình thay đổi giao diện đăng ký cho diễn dàn gọn gàng và pro hơn nhé.

Bước 1: Đăng nhập vào admin => Template => sidebar_visitor_panel => Tìm đoạn code sau:

<div class="section loginButton">
        <div class="secondaryContent">
            <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
        </div>
    </div>

và thay thế bằng đoạn code sau:

<div class="section loginButton">      
    <div class="secondaryContent">
        <label id="SignupButton"><a href="{xen:link 'register'}" class="inner OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
    </div>
</div>

=> Lưu lại

Bước 2: Vào Template => register_form => Tìm đoạn code sau:

<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator"

và thay thế bằng đoạn code sau:

<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator formOverlay"

Lưu lại và ra trang chủ nhấn F5 và nhấn nút Đăng ký bên cột phải để xem kết quả nhé.

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

Giao diện mặc định khi muốn đăng nhập ở Xenforo là đổ xuống từ trên header, nhưng nếu bạn muốn thay đổi thành dạng pop up thì cũng không mấy khó khăn. Bạn chỉ cần làm theo các bước của bài hướng dẫn sau thì rất dễ dàng.

Bước 1: Đăng nhập Admin CP => Appearance => Templates => login_bar
 => Thêm đoạn code màu đỏ vào vị trí như bên dưới

<xen:require css="login_bar.css" />

<script>
XenForo.LoginBar = function(a){};
</script>

<div id="loginBar">
 <div class="pageWidth">
  <div class="pageContent"> 
   <h3 id="loginBarHandle">
    <label for="LoginControl"><a href="{xen:link login}" class="OverlayTrigger concealed noOutline">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a></label>
   </h3>
   
   <span class="helper"></span>

   <xen:edithint template="login_bar_form" />
  </div>
 </div>
</div>

=> Nhấn Save để lưu sửa đổi

 Bước 2: Vào Appearance => Templates => sidebar_visitor_panel
 => Thêm đoạn code màu đỏ vào vị trí như sau:

</div>
</div>

<xen:else />

<div class="section loginButton">  
 <div class="secondaryContent">
  <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="OverlayTrigger inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
 </div>
</div>

</xen:if>

<xen:include template="ad_sidebar_below_visitor_panel" />

=> Nhấn Save để lưu sửa đổi

 Bước 3: Vào Appearance => Templates => EXTRA.css
 Thêm đoạn css sau:

.xenOverlay #pageLogin
    {

        background: rgba(0, 0, 0, 0.75);

        color: #ffffff;

        padding: 20px;

        border: 20px solid rgba(0, 0, 0, 0.25);

        border-radius: 20px;

        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);

    }

 => Nhấn Save để hoàn thành. Bây giờ bạn ra ngoài trang chủ, nhấn F5 để load lại trang và thử click đăng nhập xem kết quả nhé.
 

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

Diễn đàn Xenforo hiện nay khá phổ biến và được nhiều người ưa dùng. Nhưng mặc định mã nguồn này không tích hợp sẵn comment bằng Facebook, mà chúng ta phải tự add vào. Sau đây là hướng dẫn chi tiết cách thêm comment Facebook vào diễn đàn Xenforo, cũng khá là đơn giản :)

Bước 1: Đăng nhập vào admin Xenforo, chọn mục Template => Nhập vào ô search template là "message" sau đó mở template tên message

Bước 2:  Sau khi mở template message bạn nhấn Ctr + F để mở khung tìm kiếm lên và nhập vào <xen:include template="ad_message_below" /> để tìm vị trí cần add comment Facebook.
Sau khi tìm thấy vị trí này, hãy chèn đoạn code bên dưới vào ngay sau nó:

<xen:if is="{$post.position} == 0 AND !{$message.conversation_id}">
            <div id="fb-root"></div>
            <div class="fb-comments" data-href="http://yourforum.com/{xen:link threads, $thread}" data-num-posts="10" data-width="790"></div>
</xen:if>

Sau đó nhấn lưu lại.

Lưu ý : Bạn chỉnh lại http://yourforum.com thành tên miền website của bạn.
Để quản lý bình luận facebook bạn cần thêm vào trước thẻ </head> trong template: PAGE_CONTAINER đoạn code sau :
<meta property="fb:admins" content="ID"/>

ID là account Facebook quản lý của bạn.

Hoặc bạn có thể quản lý comment thông qua đường dẫn sau:

https://developers.facebook.com/tools/comments


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

Xem thêm:
- Hướng dẫn cách vào Facebook trên điện thoại khi bị chặn
- Một số thủ thuật Facebook thú vị bạn nên biết
- 8 điều nên tránh chia sẻ trên Facebook sau khi chia tay
- Hướng dẫn khóa hoặc xóa tài khoản Facebook dễ dàng
- Hướng dẫn cách đổi mật khẩu Facebook dễ dàng
- Hướng dẫn cách ẩn ngày sinh nhật của bạn trên Facebook

Để gắn code Google Analytics vào forum Xenforo thực sự khá đơn giản, nhưng không phải ai cũng nắm rõ và cũng có người đã gắn trực tiếp vào template trong khi admincp Xenforo đã hỗ trợ sẵn.
Sau đây là cách gắn đơn giản nhất thông qua admincp của Xenforo.

Bước 1: Lấy Google Analytics ID ( có dạng UA-XXXXXXXX-X ) tại trang Google Analytics

Bước 2: Add Google Analytics ID vừa lấy được vào diễn đàn Xenforo:

Sau khi đã có ID Google Analytics bạn đăng nhập diễn đàn Xenforo với tài khoản admin, vào Admin Control Panel => Option => Statistics and Metrics dán ID vừa có vào chổ Google Analytics Web Property ID , sau đó nhấn lưu lại là xong.

Quá đơn giản phải không nào? :))

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


Xem thêm:
- Hướng dẫn cách gắn nhiều code Google Analytics lên một website
- Cách tạo và gắn biểu tượng favicon và favicon động ( dạng gif favicon ) cho website
- Hướng dẫn sử dụng Lazy Load cho website hoặc blog
- Hướng dẫn cách gắn Google Analytics vào Opencart