Search found 5 matches for invision

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

Thêm vào CSS:

Code:

/* Breadcrumb for Invision - devs.forumvi.com */
#navstrip{background:#fff;margin:20px 0;border:1px solid #2980b9}
table #navstrip{border-left:0 none;border-right:0 none}
#navstrip > li{color:#666;margin:0;padding:0;line-height:36px;height:36px;display:block;position:relative;background:#FFF;padding:0 10px 0 20px}
#navstrip > li.begin{background-color:#2980b9;background-image:none;background-position:center;background-repeat:no-repeat;width:33px;padding-left:4px}
#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;width:40px}
#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:#2980b9}
#navstrip > li:hover{background-color:#333;color:#FFF}
#navstrip > li:hover:before{border-left-color:#333}
#navstrip > li:hover > a{color:#FFF}

Nếu không thích màu xanh dương thì bạn tìm mã màu #2980b9 và thay lại theo ý thích.

---

Tags: #css #invision #breadcrumb

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

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