Search found 8 matches for punbb

Push Notification (thông báo đẩy) đang được ưa chuộng ở nhiều trang web hiện đại, nhằm gửi thông báo quan trọng đến người dùng, ngay trên trình duyệt của họ.

Hình thức gửi thông báo này có phần tương tự API HTML5 Notification trước đây, nhưng tối ưu hơn ở điểm có thể gửi thông báo ngay cả khi người dùng không mở trang web. Và nó cũng thân thiện với người dùng hơn so với hình thức gửi Email vì nội dung sẽ hiển thị ngay khi mở trình duyệt và họ có thể dừng nhận tin bất kỳ lúc nào.

Để ứng dụng công nghệ Push Notification thì trang web của bạn phải được bật SSL (HTTPS), và cấu hình server khá rắc rối. Nếu làm thế thì Forumotion xem như vô vọng rồi. Vì vậy, chúng ta sẽ dùng một dịch vụ trong gian là OneSignal để gửi thông báo. Có nhiều dịch vụ tương tự bao gồm miễn phí và trả phí, có cả từ Việt Nam nữa, nhưng mình chọn OneSignal vì nó cho phép tùy biến tốt hơn và hoàn toàn miễn phí.

Demo

Hướng dẫn cài đặt

Vì bài viết chứa rất nhiều hình ảnh nên mình sẽ chỉ để hình thu nhỏ, các bạn đọc hướng dẫn khó hiểu thì nhấn vào đó để xem hình gốc.

Bước 1

Mở trang OneSignal.com, nhấn vào nút Sign up free để đăng ký tài khoản.



Bạn có thể dùng tài khoản Github, Facebook có sẵn, hoặc dùng Email của bạn.
Trong mục Company or Organization Name, hãy nhập tên diễn đàn của bạn.

Bước 2

Sau khi đăng ký thành công, đăng nhập vào trang quản lý, lúc này bạn chưa có ứng dụng nào được tạo.



Nhấn Add a new app để tạo ứng dụng mới.
Trong mục App name, điền tên diễn đàn của bạn.
Nhất Create để tạo ứng dụng.

Bước 3

Chọn nền tảng cho ứng dụng vừa tạo.



Chọn Website Push, vì diễn đàn cũng Forumotion thuộc kiểu trang web.
Nhấn Next để tiếp tục.

Bước 4

Chọn nền tảng để cấu hình.



Chọn Google Chrome & Mozilla Firefox để cấu hình trước. Nếu bạn nào sử dụng Mac thì cấu hình Safari trước cũng được.
Nhấn Next để tiếp tục.

Bước 5

Cấu hình cho Google Chrome và Mozilla Firefox.

Để thực hiện được bước này, bạn phải có Server API Key và Sender ID.

Hướng dẫn tạo Server API Key và Sender ID:

Điền đầy đủ thông tin. Lưu ý, trong khung này có nhiều mục nên phải cuộn xuống (trong khung) để xem hết.



Site URL: Điền URL diễn đàn của bạn. Ví dụ:

Code:

http://devs.forumvi.com

Google Server API Key: Điền Server API Key của ứng dụng bạn tạo trên Google Services Wizard.
Default Notification Icon URL: Điền URL icon, kích thước tối thiểu 192 x 192 px. Bạn nên dùng logo của diễn đàn, nếu không, có thể dùng URL sau:

Code:

http://i.imgur.com/srF9Tzi.png

Tích vào My site is not fully HTTPS.
Choose Subdomain: Nên điền tên miền diễn đàn, nó sẽ được dùng làm tên miền phụ của OneSignal. Ví dụ mình điền devs, nó sẽ thành:

Code:

https://devs.onesignal.com

Google Project Number: Điền Sender ID của ứng dụng bạn tạo trên Google Services Wizard.
Nhấn Save và qua bước tiếp theo.

Bước 6

Chọn bộ SDK để tích hợp vào diễn đàn.



Chọn Website Push.
Nhấn Next để tiếp tục.

Bước 7

Cài đặt SDK của OneSignal vào diễn đàn.



Ghi lại mã Your App ID.
Không đóng OneSignal. Đi đến diễn đàn của bạn để cài đặt SDK.
Lưu ý không dùng trình duyệt ở chế độ ẩn danh, tắt các tiện ích chặn Popup và nên dùng Google Chrome.

Sao chép và chỉnh sửa code sau:

Code:

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
<script>
    var OneSignal = OneSignal || [];
    OneSignal.push(['init', {
        appId: 'APP_ID',
        safari_web_id: 'SAFARI_WEB_ID',
        autoRegister: true,
        subdomainName: 'SUBDOMAIN',
        notifyButton: {
            enable: true,
            size: 'small',
            position: 'bottom-left',
            prenotify: true,
            showCredit: false,
            text: {
                'tip.state.unsubscribed': 'Đăng ký nhận thông báo',
                'tip.state.subscribed': 'Bạn đã đăng ký nhận thông báo',
                'tip.state.blocked': 'Bạn đã chặn hiển thị thông báo',
                'message.prenotify': 'Click để đăng ký nhận thông báo',
                'message.action.subscribed': 'Cảm ơn bạn đã đăng ký!',
                'message.action.resubscribed': 'Bạn đã đăng ký nhận thông báo',
                'message.action.unsubscribed': 'Bạn đã hủy đăng ký nhận thông báo',
                'dialog.main.title': 'Quản lý thông báo',
                'dialog.main.button.subscribe': 'ĐĂNG KÝ',
                'dialog.main.button.unsubscribe': 'HỦY ĐĂNG KÝ',
                'dialog.blocked.title': 'Bỏ chặn thông báo',
                'dialog.blocked.message': 'Thực hiện các hướng dẫn sau để cho phép thông báo:'
            }
        },
        welcomeNotification: {
            title: 'SITE_NAME',
            message: 'Cảm ơn bạn đã đăng ký!'
        },
        promptOptions: {
            siteName: 'SITE_NAME',
            actionMessage: 'Chúng tôi muốn hiển thị thông báo cho bạn khi có bài viết hoặc cập nhật mới.',
            exampleNotificationTitle: 'Thông báo mẫu',
            exampleNotificationMessage: 'Ví dụ cách thông báo sẽ hiển thị',
            exampleNotificationCaption: 'Bạn có thể dừng nhận thông báo bất kỳ lúc nào',
            acceptButtonText: 'CHO PHÉP',
            cancelButtonText: 'BỎ QUA'
        }
    }]);
</script>

Trong code trên:
Thay APP_ID bằng mã Your App ID vừa lấy.
Thay SUBDOMAIN bằng tên miền phụ từ OneSignal tạo ở Bước 5 (mục Choose Subdomain).
Thay 2 vị trí SITE_NAME bằng tên diễn đàn của bạn.

Sau khi chỉnh sửa xong, mở template overall_header:
ACP >> Display >> Templates >> General >> overall_header

Tìm </head> và thêm code vừa chỉnh sửa vào phía trước nó.
Save template và Publish.

Bước 8

Kiểm tra hoạt động. Truy cập diễn đàn của bạn và kiểm tra thông báo.



Nhấn CHO PHÉP trong bảng yêu cầu xác nhận hiện ra. Nếu không hiện thì có thể code bạn sửa bị sai, kiểm tra lại Bước 7.

Sau đó một Popup sẽ hiện ra. Nhấn Cho phép (Allow) khi được yêu cầu xác nhận hiển thị thông báo.



Nếu nó không hiện, kiểm tra xem bạn có dùng tiện ích chặn Popup không, nếu có thì tắt nó đi, rồi nhấn vào icon thông báo ở góc dưới, bên trái diễn đàn.
Nếu bạn dùng trình duyệt ẩn danh sẽ không thể cho phép hiển thị thông báo được.

Bước 9

Kiểm tra người dùng nhận thông báo. Lúc này thì đó chính là bạn.



Nhấn vào nút Check Subscribed Users.
Nếu bạn làm Bước 8 đúng thì sẽ qua được bước này. Nhấn Next để tiếp tục.

Bước 10

Kiểm tra hoạt động của ứng dụng.



Nhấp vào nút Send Test Notification, một thông báo sẽ được hiện ra.



Nhấn vào thông báo vừa hiện ra, trình duyệt sẽ mở một tab mới, dẫn đến trang kiểm tra ứng dụng hoạt động.



Tắt trang kiểm tra đó và quay lại trang cấu hình. Nhấn vào nút Check Notification Status.
Nhấn Done.



Vậy là bạn đã cấu hình xong cho Google Chrome và Mozilla Firefox. Nhấn Done để kết thúc.

Bước 11

Cấu hình cho Safari.



Nhấn vào App Settings.
Nhấn nút Configure ở dòng Apple Safari.

Bước 12

Điền đầy đủ thông tin. Lưu ý, trong khung này có nhiều mục nên phải cuộn xuống (trong khung) để xem hết.



Site Name: Điền tên diễn đàn của bạn
Site URL: Điền URL diễn đàn của bạn.
Không tích vào I'd like to upload my own .p12 certificate
Tích vào I'd like to upload my own notification icons, và tải lên logo diễn đàn của bạn theo các kích thước được yêu cầu. Nếu không, bạn có thể tải về Bộ icon BELL để sử dụng.
Nhấn Save và qua bước tiếp theo.

Bước 13

Lấy mã Web ID cho Safari



Đóng Dialog lại, bằng cách nhấn vào Kí hiệu X.
Do mình không có máy Mac nên không hướng dẫn tiếp được. Hơn nữa, bước tiếp theo chỉ là kiểm thử ứng dụng tương tự như Google Chrome và Mozilla Firefox, chỉ còn thêm Web ID cho Safari vào code mà còn sai nữa thì mình cũng chịu.
Dù sao bạn cũng yên tâm, mình đã nhờ người kiểm tra bằng Safari trên Mac rồi, đảm bảo hoạt động.



Sau khi đóng Dialog thì tại dòng cấu hình Apple Safari bạn sẽ thấy mã Web ID của nó, sao chép lại.
Đi đến diễn đàn của bạn, mở template overall_header.
Tìm trong code mà bạn đã thêm vào ở Bước 7.
Thay SAFARI_WEB_ID bằng mã Web ID mà bạn vừa lấy được.
Save template và Publish.

Vậy là xong rồi đó, giờ bạn đã có thể tạo thông báo cho người dùng (nếu họ cho phép).

Cách tạo thông báo

Nhấn New Message
Điền tiêu đề thông báo trong mục Title và nội dung trong mục Content.



Nhấn vào Options để mở tùy chọn thêm.



Mở mục Launch URL và điền URL, để khi người dùng nhấn vào thông báo, trình duyệt sẽ chuyển đến URL đó.

Các tùy chọn khác, ít dùng hơn:
Include Additional Data: Bạn sẽ cần biết cách dùng API, có kiến thức javascript kha khá mới dùng được.
Include Android / iOS Action Buttons: Dùng cho ứng dụng Web, không sài được.
Include Chrome Web Push Action Buttons: Tùy chọn này chỉ hoạt động trên Google Chrome 48+, nó cho phép tạo thêm tối đa 2 nút phụ bên dưới thông báo.



Sau khi thông báo được gửi, bạn cũng có thể xem thống kê số người dùng tương tác với nó.

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #firefox #mod #tutorial #phpbb2 #phpbb3 #punbb #invision #notification #chrome #safari

Thanh breadcrumb giúp người dùng dễ dàng điều hướng, biết được vị trí trong diễn đàn. Trong phiên bản PunBB thì nó gặp lỗi nhỏ ở các trang phụ, và cũng khó tùy chỉnh giao diện. Hướng dẫn này sẽ dùng Javascript điều chỉnh lại cấu trúc của breadcrumb trong PunBB, và thêm CSS để có được giao diện thân thiện hơn.

Hướng dẫn

Trước tiên hãy xóa hết CSS và JS liên quan đến breadcrumb (thanh đường dẫn) mà bạn đã thêm vào, rồi làm theo hướng dẫn sau:

Bước 1

Trong template overall_footer_begin, tìm:

Code:

<div id="pun-foot">

Thêm vào trước đó, code sau:

Code:

<script type="text/javascript">
//<![CDATA[
/* breadcrumb for punbb - devs.forumvi.com */
$(".pun-crumbs").each(function() {
    var $crumbs = $(this);
    $crumbs.find("strong").has("a").replaceWith(function() {
        return this.innerHTML;
    });
    var $items = $crumbs.find(".crumbs").children(),
        $navstrip = $('<ul class="navstrip clearfix"></ul>');
    $crumbs.empty().html($navstrip);
    $items.not(":empty").appendTo($navstrip).wrap("<li></li>");
    $items.first().parent().addClass("begin");
}).html(function() {
    return this.innerHTML.replace(/(»\s|&nbsp\;»&nbsp\;)/g, "");
});
//]]>
</script>

Bước 2

Thêm vào CSS:

Code:

/* breadcrumb for punbb - devs.forumvi.com */
.pun-crumbs{padding:1em 0}
.navstrip{color:#e8e8e8;font-weight:700;list-style:none;background:#fff;margin:20px 0;border:1px solid #ddd}
.navstrip > li{float:left;color:#666;margin:0;padding:0;line-height:36px;height:36px;display:block;position:relative;background:#FFF;padding:0 5px 0 20px}
.navstrip > li.begin{background-color:#1f537b;background-image:none;background-position:center;background-repeat:no-repeat;width:47px;padding-left:4px}
.navstrip li a{font-weight:700;text-decoration:none}
.navstrip > li.begin > a{text-indent:-9999px;display:block;background:url(http://i39.servimg.com/u/f39/19/09/43/62/house411.png) no-repeat center center transparent}
.navstrip > li:before,.navstrip > li:after{content:" ";border:18px solid transparent;border-left-width:12px;border-right:0;border-left-color:#FFF;display:block;position:absolute;right:-12px;top:0;z-index:10;width:0;height:0}
.navstrip > li:after{border-left-color:#DBDBDB;right:-13px;z-index:5}
.navstrip > li.begin:before{border-left-color:#1f537b}
.navstrip > li:hover,.navstrip > li:hover a{background-color:#333;color:#FFF}
.navstrip > li:hover:before{border-left-color:#333}

Tác giả

@Zzbaivong

---

Tags: #punbb #breadcrumb #mod #tutorial

zzRank sẽ tạo ra nhiều kiểu huân chương cho từng mốc bài viết. Bằng cách kết hợp với điều kiện điểm thưởng và lượt cảm ơn, huân chương của bạn sẽ phong phú và hợp lý hơn.

Khi bạn sử dụng rank mặc định của forumotion sẽ chỉ có một huân chương cho mỗi cấp bậc, thay đổi mỗi khi lên cấp. Với zzRank, bạn có thể giữ lại huân chương của cấp bên dưới và bổ sung thêm các điều kiện về điểm thưởng, lượt cảm ơn để tạo thêm nhiều kiểu huận chương mới trong cùng cấp bậc đó.

Các thông số cho từng kiểu huân chương được viết ở dạng plainObject nên rất dễ tùy chỉnh và áp dụng.

Demo

http://jsfiddle.net/baivong/a5k3yjgo/2/show/

Hướng dẫn

Bước 1

Tìm trong temp viewtopic_body:

Code:

<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->

Sửa thành:

Code:

<!-- BEGIN profile_field -->
<p class="profile_field_mess">
    {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
</p>
<!-- END profile_field -->

Bước 2

Đặt code sau ở nơi muốn hiển thị rank:

Code:

<div class="rank_mess"></div>

Lưu ý: Vị trí của code phải nằm trong .post

Bước 3

Tạo một file js, check vào In the topics:

Code:

/*!
 * zzRank v0.2.1 by Zzbaivong <devs.forumvi.com>
 * Thêm huân chương dựa theo số lượng bài viết
 */
$(function() {
    var data_rank = {
        10: {
            title: "10 bài viết",
            desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 10 bài viết trở lên. Điểm thưởng tối thiểu là 20.",
            icon: "http://blog.uhm.vn/emo/laluot/2.gif",
            point: 20
        },
        50: {
            title: "50 bài viết",
            desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 50 bài viết trở lên. Điểm tưởng lớn hơn hoặc bằng số bài viết.",
            icon: "http://blog.uhm.vn/emo/laluot/5.gif",
            point: ">"
        },
        100: {
            title: "100 bài viết",
            desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 100 bài viết trở lên. Được cảm ơn từ 10 lần trở lên.",
            icon: "http://blog.uhm.vn/emo/laluot/20.gif",
            thank: 10
        },
        500: {
            title: "500 bài viết",
            desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 500 bài viết trở lên. Điểm tưởng lớn hơn hoặc bằng số bài viết. Được cảm ơn từ 99 lần trở lên.",
            icon: "http://blog.uhm.vn/emo/laluot/10.gif",
            point: ">",
            thank: 99
        },
        x500: {
            title: "Spamer",
            desc: "Thành viên đăng 500 bài viết trở lên, nhưng điểm thưởng thấp hơn số bài viết.",
            icon: "http://blog.uhm.vn/emo/laluot/24.gif",
            point: "<"
        }
    };
    
    function checkif(key, check, val, post) {
        var cPost = data_rank[key][check];
        if (($.type(cPost) === "number" && cPost <= val) || ($.type(cPost) === "string" && cPost === ">" && val >= post) || ($.type(cPost) === "string" && cPost === "<" && val < post)) {
            return true;
        } else {
            return false;
        }
    }

    function getNumber(t, txt) {
        return parseInt($(t).closest(".post").find(".profile_field_mess:contains('" + txt + " : ')").text().match(/\d+/)[0], 10);
    }

    $(".rank_mess").html(function() {
        var all = "";

        var post_mess = getNumber(this, "Posts"),
            point_mess = getNumber(this, "Points"),
            thank_mess = getNumber(this, "Thanked");

        $.each(data_rank, function(key, val) {

            var point = data_rank[key].point,
                thank = data_rank[key].thank;

            if (post_mess >= parseInt(key.match(/\d+/)[0], 10)) {
                if ((point === undefined && thank === undefined) || (point !== undefined && thank === undefined && checkif(key, "point", point_mess, post_mess)) || (point === undefined && thank !== undefined && checkif(key, "thank", thank_mess, post_mess)) || (point !== undefined && checkif(key, "point", point_mess, post_mess) && thank !== undefined && checkif(key, "thank", thank_mess, post_mess))) {

                    all += '<fieldset><legend>' + data_rank[key].title + '</legend><img src="' + data_rank[key].icon + '" alt="' + data_rank[key].title + '" title="' + data_rank[key].desc + '" /></fieldset>';

                }
            }

        });

        return all;
    });
});

Lưu ý: Trong code trên, ở dòng 56, thay từ Posts bằng từ chú thích số lượng bài viết của thành viên, trong diễn đàn của bạn. Tương tự với từ Points, Thanked.

Ghi chú

Chỉnh sửa lại thông số data_rank(dòng 6 - 38) theo ý muốn, trong đó:

Code:

// Đây là thiết lập cho một rank, ở một mức bài viết
10: { // 10 là số bài tối thiểu để đạt được huân chương
    title: "10 bài viết", // Ghi chú ngắn gọn cho huân chương
    desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 10 bài viết trở lên.", // Ghi chú chi tiết cho huân chương
    icon: "http://blog.uhm.vn/emo/laluot/2.gif" // Ảnh huân chương sẽ hiển thị
}

Bạn cũng có thể thêm điều kiện point và thank nếu muốn, ví dụ:

Code:

point: ">" // point >= post
point: "<" // point < post
point: 3 // point >= 3

Nếu như mức bài viết trùng nhau, như trong ví dụ trên, trùng mức 500 bài viết, thì bạn thêm ký tự bất kỳ ở trước.

Để thêm từng mức bài khác nhau thì bạn dùng lặp lại cấu trúc trên, lưu ý là ở nhóm cuối cùng không có dấu phẩy (,).

Nếu biết cách sử dụng plainObject, bạn cũng có thể tự thêm các thông tin khác cho phù hợp.


Xem v0.1 tại: https://devs.forumvi.com/t861-hoi-ap-js-xet-rank-nhe-nhat-co-the?showpost=p5584

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #mod #tutorial #phpbb2 #phpbb3 #punbb #invision #rank

jQuery plugin Announcement sẽ gói gọn tất cả thông báo vào một bảng nhỏ nằm bên dưới diễn đàn, cách sử dụng không có nhiều khác biệt với chức năng mặc định nên bạn sẽ không gặp chút khó khăn nào để làm quen với nó.
Nếu bạn đã thấy nhàm chán với thông báo chạy phía trên diễn đàn thì đây chắc chắn sẽ là lựa chọn tuyệt vời dành cho bạn.

Demo

https://baivong.github.io/announcement/

Chức năng

1. Giữ lại các tuỳ chọn của chức năng thông báo mặc định.
   
2. Dễ dàng xem từng tin riêng.
   
3. Cho phép người dùng ẩn hoặc tắt bảng.
   
4. 15 hiệu ứng chuyển tin.
   

Hướng dẫn

Cài đặt

ACP >> Display >> Templates >> QLTT >> overall_header

Tìm:

Code:

{JS_DIR}jquery/ticker/ticker.css

và thay bằng:

Code:

//baivong.github.io/announcement/dist/jquery.announcement.css

Tìm:

Code:

{JS_DIR}jquery/ticker/ticker.js

và thay bằng:

Code:

//baivong.github.io/announcement/dist/jquery.announcement.min.js

Tìm:

Code:

Ticker.start({
    height : {switch_ticker.HEIGHT},
    spacing : {switch_ticker.SPACING},
    speed : {switch_ticker.SPEED},
    direction : '{switch_ticker.DIRECTION}',
    pause : {switch_ticker.STOP_TIME}
});

và thay bằng:

Code:

var tickerDirection = '{switch_ticker.DIRECTION}',
    tickerEffect = '',

    tickerWidth = {switch_ticker.SPACING},
    tickerHeight = {switch_ticker.HEIGHT};

if (tickerWidth === 0) tickerWidth = 'auto';
if (tickerHeight === 0) tickerHeight = 'auto';

switch (tickerDirection) {
    case 'top':
        tickerEffect = 'zoom-in';
        break;

    case 'left':
        tickerEffect = 'rotate-left';
        break;

    case 'bottom':
        tickerEffect = 'zoom-out';
        break;

    case 'right':
        tickerEffect = 'shuffle';
        break;

    default:
        tickerEffect = 'fading';
}

$('#announcements').announcement({

    title: 'Thông báo',

    showToggle: true,
    showClose: !!{switch_ticker.STOP_TIME},

    position: 'bottom-right',

    width: tickerWidth,
    height: tickerHeight,

    speed: {switch_ticker.SPEED},

    effect: tickerEffect

});

Nếu bạn muốn bảng thông báo nằm bên trái thì trong code trên, dòng 38, sửa bottom-right thành bottom-left. Ở dòng 33, bạn cũng có thể thay Thông báo, bằng tiêu đề khác phù hợp hơn.

Tìm:

Code:

<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="padding-top:4px;">
    <div class="module main">
        <div class="main-content clearfix">
            <div id="fa_ticker_container">
                <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                    <div class="fa_ticker_content">
                        <!-- BEGIN ticker_row -->
                        <div>{switch_ticker.ticker_row.ELEMENT}</div>
                        <!-- END ticker_row -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END switch_ticker -->

và thay bằng:

Code:

<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="display: none;">
    <ul id="announcements">
        <!-- BEGIN ticker_row -->
        <li>{switch_ticker.ticker_row.ELEMENT}</li>
        <!-- END ticker_row -->
    </ul>
</div>
<!-- END switch_ticker -->

Tìm và xoá:

Code:

<!-- BEGIN switch_ticker_new -->
Bao gồm cả code nằm bên trong nó
Có 3 đoạn switch_ticker_new như thế này
<!-- END switch_ticker_new -->

Sử dụng

ACP >> QLTT >> Messages and e-mails >> Announcements

>> General announcements options: Tùy chọn chức năng

• Activate announcements : Bật/tắt chức năng thông báo
  
• Announcements display : Trang sẽ hiển thị thông báo
  
• Scrolling : Hiệu ứng chuyển tin thông báo.
  
• Scrolling speed : Thời gian chuyển giữa 2 tin kế tiếp. Đơn vị: giây(seconds).
  
• Stop time : jQuery Announcement sử dụng thông số này với vai trò showClose, nhận 2 giá trị 0 hoặc 1 để tắt hoặc bật nút đóng.
  
• Space between announcements (in pixels) : jQuery Announcement sử dụng thông số này với vai trò width để xác định chiều rộng. Đơn vị: px(pixels).
  
• Announcements block height (in pixels) : jQuery Announcement sử dụng thông số này với vai trò height để xác định chiều cao. Đơn vị: px(pixels).
  

>> Announcements: Danh sách các tin thông báo

Bạn có thể thêm nhiều thông báo mới bằng cách click vào nút +.
Nếu bạn chọn Scrolling là Deactivate, thì thông báo sẽ chỉ hiển thị duy nhất tin đầu tiên.

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #mod #jquery-plugin #tutorial #phpbb2 #phpbb3 #punbb #invision #announcement

Cách 1

Dùng thuộc tính background.

Trong temp viewforum_body, tìm:

Code:

{BOARD_INDEX}

... thêm vào bên dưới:

Code:

<div id="banner{FORUM_ID}" class="main paged banner-category"></div>

Thêm vào CSS (mẫu):

Code:

.banner-category {
    height: 150px;
    background: url(IMG_1) no-repeat center center/auto 100% transparent;
    background-size: cover;
}
#banner2 {
    background-image: url(IMG_2);
}
#banner7 {
    background-image: url(IMG_7);
}

Lưu ý

Trong code trên:

IMG_1 là link ảnh dùng làm banner mặc định cho tất cả chuyên mục.

Để đặt banner riêng cho mỗi chuyên mục thì thêm thuộc tính background-image cho [b]#banner<forum id>[/b] (trong ví dụ trên là chuyên mục 2 và 7).

Nếu không muốn dùng banner mặc định thì,
sửa: url(IMG_1) thành none,
và xóa height: 150px;
Nếu dùng cách này thì khi thêm banner riêng, nhớ bổ sung thuộc tính height.

Cách 2

Dùng link ảnh cố định.

Để dùng cách này thì bạn phải tải ảnh lên host cho phép giữ nguyên tên ảnh và đường dẫn chung, ví dụ photobucket, dropbox... Trong đó tên ảnh là forum id.

Trong temp viewforum_body, tìm:

Code:

{BOARD_INDEX}

... thêm vào bên dưới:

Code:

<div class="main paged">
    <img src="../images/{FORUM_ID}.png" />
</div>

Lưu ý

Code trên chỉ là ví dụ, link ảnh thay đổi theo host bạn dùng.

---

Tags: #mod #tutorial #punbb #category

Hướng dẫn này sẽ giúp bạn tạo chức năng Đăng ký nhanh cho diễn đàn, người dùng sau khi điền đủ thông tin đăng ký, tài khoản sẽ được kích hoạt và tự đăng nhập ngay sau đó.

Chức năng

• Đăng ký thành viên nhanh.
  
• Tự đăng nhập sau khi đăng ký.
  
• Quay trở lại trang đang xem.
  
• Không cần kích hoạt tài khoản.
  
• Giới hạn số lần đăng ký theo IP.
  
• Áp dụng cho tất cả liên kết đăng ký.
  
• Giao diện gọn, đẹp.
  
• Hỗ trợ ngôn ngữ Anh - Việt.
  

Demo

Hướng dẫn

Bước 1

Tùy chỉnh
ACP >> General >> Forum >> Security >> Security Administration
Giới hạn số tài khoản có thể tạo trong 24h cho một IP:
IP address accounts creation limit, for each 24 hours : 10

ACP >> Users & Groups >> Users >> Users options
Cho phép tự kích hoạt tài khoản:
New accounts activation : No activation
Bỏ yêu cầu nhập mã captcha:
Confirmation code : No
Cho phép đăng ký thành viên:
Allow new members : Yes

ACP >> Users & Groups >> Users >> Profiles >> Profile fields >> [You must be [You must be registered and logged in to see this link.] and [You must be registered and logged in to see this link.] to see this image.]Modify
Bỏ hết các field bắt buộc khi đăng ký:
Necessarily filled ? No

Bước 3

Sửa Template
ACP >> Display >> Templates >> General >> overall_footer_begin

Tìm:

Code:

<div id="pun-foot">

Đặt trước nó:

Code:

<!-- Quick register by Zzbaivong - devs.forumvi.com -->
<!-- BEGIN switch_user_logged_out -->
<div id="qick_reg_overlay" style="z-index:99999;"></div>
<div id="qick_reg" style="z-index:999999;">
   <div id="reg_loder">Đang kiểm tra dữ liệu...</div>
   <p id="reg_tip">Bạn phải điền đầy đủ thông tin đăng ký.</p>
   <a href="javascript:void(0)" class="modal_close"></a>
   <form onsubmit="submit_reg(); return false" action="/register?agreed=true&step=2" method="post" name="post" id="ucp">
      <div class="main-content frm" style="border: 0px none;">
         <fieldset class="frm-set multi" style="border: 0px none; margin:0;background-color: #FFF;">
            <dl>
               <dt>
                  <label>Tên tài khoản :</label>
               </dt>
               <dd>
                  <input autocomplete="off" type="text" id="username_reg" name="username" value="" size="25" maxlength="25" required />
                  <div id="name_reg" class="check_reg">
                     <div class="pwd_img reg_er kytu">Số ký tự phải từ 3 trở lên</div>
                     <div class="pwd_img reg_er loi">Hãy chọn tài khoản khác</div>
                     <div class="pwd_img reg_ok">Có thể dùng tài khoản này</div>
                  </div>
               </dd>
            </dl>
            <dl>
               <dt>
                  <label>Địa chỉ E-mail :</label>
               </dt>
               <dd>
                  <input autocomplete="off" class="ltr" type="email" id="email" name="email" value="" size="25" maxlength="64" required />
                  <div id="email_reg" class="check_reg">
                     <div class="pwd_img reg_er">Không sử dụng địa chỉ này</div>
                     <div class="pwd_img reg_wa">E-mail sẽ được kiểm sau</div>
                  </div>
               </dd>
            </dl>
            <dl>
               <dt>
                  <label>Mật khẩu :</label>
               </dt>
               <dd>
                  <input autocomplete="off" class="ltr" type="password" id="password_reg" name="password" value="" size="25" maxlength="25" required />
                  <div class="check_reg" id="cont_pwd">
                     <div class="pwd_img reg_er kytu">Số ký tự phải từ 3 trở lên</div>
                     <div class="pwd_img reg_er trung">Trùng tên đăng nhập</div>
                     <div class="pwd_img" id="pwd_bad" style="display: none;">Quá đơn giản</div>
                     <div class="pwd_img" id="pwd_middle" style="display: none;">Tạm ổn</div>
                     <div class="pwd_img" id="pwd_good" style="display: none;">Vãi</div>
                  </div>
               </dd>
            </dl>
            <dl>
               <dt>
                  <label>Gõ lại mật khẩu :</label>
               </dt>
               <dd>
                  <input autocomplete="off" type="password" id="password_confirm" size="25" maxlength="25" name="password_confirm" class="inputbox narrow" required />
                  <div id="pass_co" class="check_reg">
                     <div class="pwd_img reg_er">Chưa đúng</div>
                     <div class="pwd_img reg_ok">Chính xác</div>
                  </div>
               </dd>
            </dl>
            <dl class="frm-buttons">
               <p style="padding: 10px 0px 0px; text-align: center;">
                  <input class="button2" type="submit" name="submit" value="Đăng ký" />
                  <input class="button2" type="reset" name="reset" value="Làm mới" />
               </p>
            </dl>
         </fieldset>
      </div>
   </form>
</div>
<script type="text/javascript" src="{Js}"></script>
<!-- END switch_user_logged_out -->

Bước 4

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management
Tạo file javascript, lấy liên kết (Không check Placement) thay vào vị trí {Js} ở cuối code trong bước 3

Code:

/* Quick register by Zzbaivong - devs.forumvi.com */
var shortPass = "bad",
    badPass = "bad",
    goodPass = "good",
    strongPass = "strong";

function passwordStrength(a, b) {
    score = 0;
    if ("" == a) return null;
    if (4 > a.length) return shortPass;
    if (void 0 != b && a.toLowerCase() == b.toLowerCase()) return badPass;
    score += 4 * a.length;
    score += 1 * (checkRepetition(1, a).length - a.length);
    score += 1 * (checkRepetition(2, a).length - a.length);
    score += 1 * (checkRepetition(3, a).length - a.length);
    score += 1 * (checkRepetition(4, a).length - a.length);
    a.match(/(.*[0-9].*[0-9].*[0-9])/) && (score += 5);
    a.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/) && (score += 5);
    a.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/) &&
        (score += 10);
    a.match(/([a-zA-Z])/) && a.match(/([0-9])/) && (score += 15);
    a.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && a.match(/([0-9])/) && (score += 15);
    a.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && a.match(/([a-zA-Z])/) && (score += 15);
    if (a.match(/^\w+$/) || a.match(/^\d+$/)) score -= 10;
    0 > score && (score = 0);
    100 < score && (score = 100);
    return 34 > score ? badPass : 68 > score ? goodPass : strongPass
}

function checkRepetition(a, b) {
    res = "";
    for (i = 0; i < b.length; i++) {
        repeated = !0;
        for (j = 0; j < a && j + i + a < b.length; j++) repeated = repeated && b.charAt(j + i) == b.charAt(j + i + a);
        j < a && (repeated = !1);
        repeated ? (i += a - 1, repeated = !1) : res += b.charAt(i)
    }
    return res
}

function submit_reg() {
    $("#reg_tip").text("Đang kiểm tra dữ liệu...");
    $("#qick_reg .reg_er").each(function() {
        "block" == $(this).css("display") && $(this).parent().parent().addClass("error")
    });
    $("#qick_reg input").each(function() {
        "" == $(this).val() && $(this).parent().addClass("error")
    });
    $("#qick_reg .error").length ? $("#reg_tip").text("Lỗi thông tin đăng ký.") : ($("#reg_loder").show(), $.ajax({
        type: "POST",
        url: "/register?agreed=true&step=2",
        data: {
            username: $("#username_reg").val(),
            email: $("#email").val(),
            "profile_field_3_-10": $("#profile_field_3_-10").val(),
            password: $("#password_reg").val(),
            submit: "Save"
        },
        success: function(a) {
            if ($(a).find("p.message").length) $("#reg_tip").text("Quản trị viên đã giới hạn số lần tạo tài khoản hôm nay."), $("#reg_loder").fadeOut(500), $("#ucp").hide();
            else if ($("#reg_tip").text("Đang kiểm tra tài khoản, mật khẩu..."),
                $(a).find("#form_confirm").length) $("#qick_reg .frm-buttons input[name='confirm_pass'], #qick_reg .frm-buttons input[name='auth[]']").remove(), $(a).find("input[name='confirm_pass'], input[name='auth[]']").prependTo("#qick_reg .frm-buttons"), $("#reg_tip").text("Đang kiểm tra E-mail..."), $.ajax({
                type: "POST",
                url: "/register?agreed=true&step=2",
                data: {
                    password_confirm: $("#password_confirm").val(),
                    "auth[]": $("#qick_reg input[name='auth[]']:first").val(),
                    username: $("#username_reg").val(),
                    email: $("#email").val(),
                    "profile_field_3_-10": $("#profile_field_3_-10").val(),
                    password: $("#password_reg").val(),
                    confirm_pass: $("#qick_reg input[name='confirm_pass']").val(),
                    submit: "Save"
                },
                success: function(a) {
                    if ($(a).find("p.message a").length) $("#reg_tip").text("Đăng ký thành công."), $.ajax({
                        type: "POST",
                        url: "/login",
                        data: {
                            username: $("#username_reg").val(),
                            password: $("#password_reg").val(),
                            login: "true"
                        },
                        success: function() {
                            window.location.reload()
                        }
                    });
                    else if (-1 != $(a).find("p.center:first span").text().indexOf("e-mail address") || -1 != $(a).find("p.center:first span").text().indexOf("địa chỉ email")) $("#reg_tip").text("Địa chỉ E-mail không hợp lệ hoặc đã được sử dụng."), $("#reg_loder").fadeOut(500), $("#email").parent().addClass("error"), $("#email_reg .reg_er").show().next().hide()
                }
            });
            else if (-1 != $(a).find("#main-content p.center:first span").text().indexOf("username has") ||
                -1 != $(a).find("p.center:first span").text().indexOf("ên truy cập")) $("#reg_tip").text("Tài khoản đã được sử dụng hoặc bị cấm."), $("#reg_loder").fadeOut(500), $("#username_reg").parent().addClass("error"), $("#name_reg div").hide(), $("#name_reg .reg_er.loi").show();
            else if (0 == $(a).find("p.center:first span").text().indexOf("Your password") || 0 == $(a).find("p.center:first span").text().indexOf("Mật khẩu")) $("#reg_tip").text("Mật khẩu phải từ 6 - 32 ký tự và không được trùng tài khoản."),
                $("#reg_loder").fadeOut(500), $("#password_reg, #password_confirm").val("").parent().addClass("error"), $("#cont_pwd div, #pass_co div").hide()
        }
    }))
}

function conpass() {
    "" != $("#password_confirm").val() ? ($("#password_confirm").parent().removeClass("error"), $("#password_reg").val() != $("#password_confirm").val() ? $("#pass_co .reg_er").show().next().hide() : $("#pass_co .reg_er").hide().next().show()) : $("#pass_co div").hide()
}

function isEmail(a) {
    return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/.test(a)
}
$(function() {
    "/register" != location.pathname ? ($("a[href='/register']").click(function(a) {
        a.preventDefault();
        $("#qick_reg, #qick_reg_overlay").fadeIn()
    }), $("#qick_reg_overlay, .modal_close").click(function() {
        $("#qick_reg, #qick_reg_overlay").fadeOut()
    }), $("#qick_reg input[name='reset']").click(function() {
        $("#reg_tip").text("Bạn phải điền đầy đủ thông tin đăng ký.");
        $("#qick_reg dd").removeClass("error");
        $("#qick_reg .pwd_img").hide()
    }), $("#username_reg").on("blur",
        function() {
            "" != $("#username_reg").val() ? ($("#username_reg").parent().removeClass("error"), 3 > $("#username_reg").val().length ? ($("#name_reg .reg_er.kytu").show(), $("#name_reg .reg_er.loi, #name_reg .reg_ok").hide()) : $.ajax({
                type: "GET",
                url: "/search?mode=searchuser&fieldname=username",
                data: {
                    search_username: $("#username_reg").val(),
                    time: timestamp()
                },
                success: function(a) {
                    $("#name_reg div").hide();
                    $(a).find("#username_list").val() == $("#username_reg").val() ?
                        $("#name_reg .reg_er.loi").show() : $("#name_reg .reg_ok").show()
                }
            })) : $("#name_reg div").hide()
        }), $("#email").on("blur", function() {
        "" != $("#email").val() ? ($("#email").parent().removeClass("error"), isEmail($("#email").val()) ? $("#email_reg .reg_er").hide().next().show() : $("#email_reg .reg_er").show().next().hide()) : $("#email_reg div").hide()
    }), $("#password_confirm").on("input", function() {
        conpass()
    }), $("#password_reg, #username_reg").on("input",
        function() {
            if ("" != $("#password_reg").val())
                if ($("#password_reg").parent().removeClass("error"), 3 > $("#password_reg").val().length) $("#cont_pwd div").hide(), $("#cont_pwd .reg_er.kytu").show();
                else if ($("#cont_pwd .reg_er.kytu").hide(), $("#password_reg").val() == $("#username_reg").val()) $("#cont_pwd div").hide(), $("#cont_pwd .reg_er.trung").show();
            else switch ($("#cont_pwd .reg_er.trung").hide(), passwordStrength($("#password_reg").val(), $("#username_reg").val())) {
                case "bad":
                    $("#pwd_middle,#pwd_good").hide();
                    $("#pwd_bad").show();
                    break;
                case "good":
                    $("#pwd_good,#pwd_bad").hide();
                    $("#pwd_middle").show();
                    break;
                case "strong":
                    $("#pwd_middle,#pwd_bad").hide(), $("#pwd_good").show()
            } else $("#cont_pwd div, #pass_co div").hide(), $("#password_confirm").val("");
            "" != $("#password_confirm").val() && conpass()
        })) : $("#qick_reg, #qick_reg_overlay").remove()
});

Bước 5

Thêm vào CSS
ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:

/* Quick register by Zzbaivong - devs.forumvi.com */
#qick_reg_overlay{background:#000;position:fixed;left:0;top:0;width:100%;height:100%;display:none;opacity:0.8}
#qick_reg, #qick_reg *{box-sizing:border-box;-o-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
#qick_reg{background-color:#FFF;border:1px solid rgba(0,0,0,0.333);box-shadow:0 4px 16px rgba(0,0,0,0.2);color:#000;outline:0 none;position:fixed;width:500px;display:none;left:50%;top:50%;margin-left:-250px;margin-top:-200px;padding:40px}
#qick_reg input{width:100%}
#qick_reg fieldset.frm-set dl dd,#qick_reg fieldset.frm-set dl dt{padding:0}
#qick_reg fieldset.frm-set dl dt{width:13em}
#qick_reg fieldset.frm-set dl dd{margin-left:14em}
#qick_reg #cont_pwd, #qick_reg .check_reg{float:none;height:24px;width: 100%;padding:2px 0!important}
#pwd_bad, .reg_er{background: url(http://i15.servimg.com/u/f15/16/58/89/73/001_3010.png) no-repeat scroll left center/16px 16px transparent;color:red}
#pwd_middle, .reg_wa{background:url(http://i15.servimg.com/u/f15/16/58/89/73/alert_10.png) no-repeat scroll left center/16px 16px transparent;color:blue}
#pwd_good, .reg_ok{background:url(http://i15.servimg.com/u/f15/16/58/89/73/001_0610.png) no-repeat scroll left center/16px 16px transparent;color:green}
#qick_reg .pwd_img{float:left;height:24px;line-height:24px;text-align:left;width: 100%;padding: 0 0 0 20px;}
#reg_tip{background-color:#FCF8E3;color:#C09853;border-color:#FBEED5;border:1px solid;padding:5px 7px}
#qick_reg form{margin-top:20px}
#reg_loder{background:url(http://i15.servimg.com/u/f15/16/58/89/73/ajax-l11.gif) no-repeat scroll center 130px rgba(255, 255, 255, 0.65);color:#086CC5;display:none;font-family:Comic Sans MS;font-weight:700;height:100%;left:0;line-height:350px;position:absolute;text-align:center;top:0;width:100%}
.modal_close{background:url(http://i40.servimg.com/u/f40/17/70/81/78/close-10.png) repeat scroll 0 0 transparent;content:"";height:11px;position:absolute;right:17px;top:17px;width:11px}
.error input{border:1px solid #F5A7A7;background-color:#F2DEDE}
#qick_reg .button2{background:#055fff;border:1px solid #DDD;color:#FFF;padding:7px 15px}
#qick_reg .button2:hover{background:#666;cursor:pointer}
#qick_reg .button2[name="reset"]{background:url(http://i15.servimg.com/u/f15/16/58/89/73/reload10.png) no-repeat center scroll green;text-indent:-9999px}

Ghi chú

Áp dụng cho phiên bản PunBB.
Cập nhật ngày 19/04/2015

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: [You must be registered and logged in to see this link.]

Hướng dẫn này sẽ giúp bạn tạo icon riêng cho từng chuyên mục trong PunBB.

Bạn vào cài đặt từng chuyên mục, thêm URL Icon cho phù hợp.

Trong cài đặt icon trạng thái chuyên mục, ẩn phần icon thường, thêm ảnh icon chuyên mục có bài mới và chuyên mục bị khóa. Lưu ý, icon này phải nhỏ hơn icon chuyên mục (khoảng 32 x 32px). Ví dụ:

Có bài mới:

Code:

http://i56.servimg.com/u/f56/18/59/49/93/new-ic10.png

Đã khóa:

Code:

http://i83.servimg.com/u/f83/16/58/89/73/lock10.png

Thêm vào CSS:

Code:

.indexbox .forum_desc img[style="float:left"][alt^="http://"]{-webkit-transition:all .2s;height:45px;margin-left:-60px;margin-top:-20px;position:absolute;transition:all .2s;width:45px}
.indexbox .statused tr:hover .forum_desc img[style="float:left"][alt^="http://"]{-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}

Template Index_box:
Tìm:

Code:

<br />
{catrow.forumrow.FORUM_DESC}

Thay bằng:

Code:

<div class="forum_desc">{catrow.forumrow.FORUM_DESC}</div>

Tìm:

Code:

class="main-content"

sửa thành:

Code:

class="main-content indexbox"

---

Tags: #mod #tutorial #punbb #forum-icon

Chức năng này sẽ tạo ra thông báo nhắc nhở người dùng, khi họ click vào liên kết lạ.
Đối với một Admin, đa phần đều muốn 4rum có lượng truy cập đông, thời gian ở lại lâu, tất nhiên sẽ chẳng ai muốn người xem rời đi chỉ vì click nhầm vào liên kết nào đấy. Một thông báo, nhắc nhở khi người xem click vào liên kết lạ, sẽ có ích trong trường hợp này. Trong lúc người xem đang suy tư với thì một số Admin còn gắn thêm quảng cáo, hoặc kèm vài lời đe dọa như: Chúng tôi không chịu trách nhiệm khi bạn chuyển đến liên kết này, bala bala...

Demo

https://www.google.com.vn/

Chức năng

• Khi người xem click vào liên kết ngoài (trừ liên kết ảnh), sẽ xuất hiện một thông báo chuyển hướng với 2 lựa chọn: Trở về hoặc tiếp tục.
  
• Tự chuyển trang sau 5 giây nếu người dùng không lựa chọn.
  
• Thông báo lỗi nếu sai thông số chuyển hướng
  

Hướng dẫn

Bước 1

Tạo trang HTML:
ACP >> Modules >> HTML & JAVASCRIPT >> HTML pages management >> Create in advanced mode (HTML)

Do you wish to use your forum header and footer ?: Có
Page content *

Code:

<script type="text/javascript">
//<![CDATA[
/* zzRedirects v3.1.1 - devs.forumvi.com */
(function($) {

    'use strict';

    $('head').append($('<style>', {
        text: '#redirects{background:#FFF;width:75%;margin:30px auto;padding:20px 30px;border:1px solid #DDD}#redirects h3{border-bottom:1px solid #ddd;font-size:17px;font-weight:400;padding-bottom:10px;color:#830000;margin:0 0 20px}#redirects p{color:#222;font-size:13px;line-height:20px;margin:5px auto 15px}.redirectFooter{background-color:#fff;padding:20px 0 30px}#redirectButtons{float:right;list-style-type:none;margin:0;padding:0}#redirectButtons li{float:left}#redirectButtons a{transition:all .2s linear 0;-moz-transition:all .2s linear 0;-o-transition:all .2s linear 0;-webkit-transition:all .2s linear 0;background-color:#0063dc;border:0 none;color:#fff!important;font-size:12px;line-height:30px;min-width:45px;text-align:center;display:block;text-decoration:none!important;padding:0 10px}#redirectButtons a.cancel{background-color:#eee;color:#888!important;margin-right:10px}#redirectButtons a:hover{background-color:#333}'
    }));

    $('#content-container').html('<div id="redirects"><h3><span id="reTitle">Lỗi</span> chuyển hướng...</h3><p id="redirectMess"><span style="color:red">Không tìm thấy tham số cần thiết.</span><br />Đây là trang xác nhận chuyển hướng đến các liên kết ngoài diễn đàn. Nếu bạn vô tình vào trang này, hãy nhấn <a href="/" rel="nofollow" style="font-weight: bold;">vào đây</a> để quay lại. Nếu không, hãy <a href="/contact" rel="nofollow" style="font-weight: bold;">liên hệ</a> với BQT để báo lỗi này.</p><div class="redirectFooter"><ul id="redirectButtons"><li><a id="fromLink" class="cancel" href="/">Quay lại</a></li></ul></div></div>');

    var external = GetParam('url');
    if (null === external || !window.atob) return;

    var goback = document.referrer,
        page = window.name,
        timer, second = 5;

    $('#reTitle').text('Đang');
    $('#redirectMess').html('Bạn đang chuẩn bị rời khỏi <span id="fromTitle">diễn đàn</span> và di chuyển đến đường dẫn: <b><a id="toLink" href="#error" title="No link" rel="nofollow">...</a></b> trong vòng <b><span class="delayTime">5</span></b> giây nữa...<br />Bạn có chắc chắn là muốn đến đường dẫn này không?');

    if (page !== '') $('#fromTitle').html('<strong>' + page + '</strong>');
    if (goback !== '') $('#fromLink').attr('href', goback);

    window.name = '';
    external = window.atob(external);
    page = external;

    if (35 <= page.length) page = page.slice(0, 32) + '...';
    $('#toLink').attr({
        href: external,
        title: external
    }).text(page);

    $('#redirectButtons').append('<li><a href="' + external + '" id="gotoBtn" class="redirectSkip forward" rel="nofollow">Tiếp tục (<span class="delayTime">5</span>)</a></li>');
    timer = setInterval(function() {
        var count = second--;
        0 > count ? (clearInterval(timer), window.location = external) : $('.delayTime').text(count);
    }, 1E3);
    $('a', '#redirectButtons').click(function() {
        clearInterval(timer);
    });

})(jQuery);
//]]>
</script>

Chú ý: Ghi nhớ PAGE ID của trang HTML vừa tạo.
Nếu diễn đàn của bạn không sử dụng sidebar (forum widget) thì ở trong code trên, dòng 12, tìm: #content-container sửa thành:

• punBB: #main-content
  
• Invision: #content
  
• PhpBB2, PhpBB3: #emptyidcc
  

Bước 2

Tạo file Javascript:
ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Create a new javascript

Title * : zzRedirect
Placement : In all the pages
Javascript Code * :

Code:

/* zzRedirects v3.1.1 - devs.forumvi.com */
jQuery(function($) {
    'use strict';
    if (window.btoa && window.atob) $('.post-entry a').not('a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"],a[href$=".bmp"],a[href^="/"],a[href^="#"],a[href^="?"],a[href^="http://' + location.host + '"]').addClass('external').click(function(e) {
        e.preventDefault();
        window.open('/h{PAGE_ID}-redirect?url=' + window.btoa(this.href), document.title);
    });
});

Chú ý: Thay {PAGE_ID} trong code trên bằng số thứ tự trang HTML tạo ở bước 2.
Nếu diễn đàn của bạn sử dụng phiên bản PhpBB2 hoặc PhpBB3, thì ở trong code trên, dòng 4, tìm: .post-entry a sửa thành: .postbody a

Credit

Zzbaivong (devs.forumvi.com)

---

Tags: #mod #tutorial #phpbb2 #phpbb3 #punbb #invision #redirect