[TUTs] zzRedirects - Chuyển hướng liên kết ngoài

  Bài viết hay nhất1
First topic message reminder :

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/


Ảnh minh họa


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
  Bài viết hay nhất26
Tại sao em ấn nó lại ra 1 cái tab mới mà nó không redirect vậy ạ ?
Forum êm : http://forumchemgio123.123.st/
  Bài viết hay nhất27

@trandangduat wrote:Tại sao em ấn nó lại ra 1 cái tab mới mà nó không redirect vậy ạ ?
Forum êm : http://forumchemgio123.123.st/
Do có 1 script thay đổi nội dung bài viết, chèn code sau khi script đó chạy là được.
  Bài viết hay nhất28
Do có 1 script thay đổi nội dung bài viết, chèn code sau khi script đó chạy là được.
@Zzbaivong : anh nói rõ được ko ạ , em vẫn ko hiểu lắm
  Bài viết hay nhất29

@trandangduat wrote:
Do có 1 script thay đổi nội dung bài viết, chèn code sau khi script đó chạy là được.
@Zzbaivong : anh nói rõ được ko ạ , em vẫn ko hiểu lắm
Nói chung là có một script khác làm nó bị lỗi, ở đoạn nào thì tìm từng cái xem.
  Bài viết hay nhất30
Em đã xóa hết những cái liên quan đến nó nhưng vẫn ko được , hay em gửi nick Admin của forum em cho anh xem dùm
  Bài viết hay nhất31
cái của mình sao ko chạy được
Demo: http://mshare.ml/
Page id: /h4-page
Nick test: acctest MK:Linh123456
  Bài viết hay nhất32
mình muốn thay đổi địa chỉ quảng cáo thì làm như nào vậy AD
  Bài viết hay nhất33
Phpbb3 không được nhỉ : http://maytinh.5forum.net/t4-topic
  Bài viết hay nhất34

@AnChina wrote:Phpbb3 không được nhỉ : http://maytinh.5forum.net/t4-topic

Không chịu đọc kỹ hướng dẫn do đó làm không được là đứng rồi.

@Zzbaivong wrote:
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 3, tìm: .post-entry a sửa thành: .postbody a

Lần sau nhớ đọc kỹ trước khi hỏi. Người ta viết hướng dẫn không phải để chơi. Chỉ có vài dòng mà không chịu đọc nữa thì cũng như không.
  Bài viết hay nhất35
Dạ , em xin được hỏi là tại sao cài code :

Code:
<script type="text/javascript">
//<![CDATA[
/* zzRedirects v3.1.0 - devs.forumvi.com */
(function () {
  $("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 vào <a href="/" rel="nofollow" style="font-weight: bold; color: blue;">đây</a> để quay lại. Nếu không, hãy <a href="/contact" rel="nofollow" style="font-weight: bold; color: green;">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 b = GetParam("url"),
      d = "/";
  if (null !== b) {
      b = decodeURIComponent(b);
      d = document.referrer;
      $("#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="" title="" 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?');
      (a = window.name) && $("#fromTitle").html("<strong>" + a + "</strong>");
      window.name = "";
      a = b;
      35 <= b.length && (a = b.slice(0, 32) + "...");
      $("#toLink").attr({
        href: b,
        title: b
      }).text(a);
      $("#redirectButtons").append('<li><a href="' + b + '" id="gotoBtn" class="redirectSkip forward" rel="nofollow">Tiếp tục (<span class="delayTime">5</span>)</a></li>');
      var c, e = 5;
      c = setInterval(function () {
        var a = e--;
        0 > a ? (clearInterval(c), window.location = b) : $(".delayTime").text(a)
      }, 1E3);
      $("a", "#redirectButtons").click(function () {
        clearInterval(c)
      })
  }
  $("#fromLink").attr("href", d)
})();
//]]>
</script>

Không có chữ #main-content ạ ?
  Bài viết hay nhất36

@markai30 wrote:Lần sau nhớ đọc kỹ trước khi hỏi. Người ta viết hướng dẫn không phải để chơi. Chỉ có vài dòng mà không chịu đọc nữa thì cũng như không.

em sữa lại rồi ? không hiểu sao HTML của e nó k hiện gì hết nhĩ ?

http://maytinh.5forum.net/h1-page
  Bài viết hay nhất37
Trong lần cập nhật gần đây mình chỉ sửa code mà quên cập nhật hướng dẫn. Có thay đổi chút ở bước 1, như sau:
Nếu diễn đàn của bạn không sử dụng sidebar (forum widget) thì ở trong code trên, dòng 6, tìm: #content-container sửa thành:

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

Như vậy là trong trường hợp của @AnChina thì dùng luôn code trong hướng dẫn chứ không sửa gì thêm, vì diễn đàn của bạn có dùng sidebar.
  Bài viết hay nhất38
Nhưng tại sao nó lại hiện lên cái link như thế này ạ:



Mong được anh @Zzbaivong giúp đỡ
  Bài viết hay nhất39
Bạn dùng trình duyệt gì? Demo?
  Bài viết hay nhất40
Em dùng trình duyệt Cốc cốc

Và đây là demo : http://trandangduat.forumvi.com/t1-topic#20

Đôi lời : Có thể là em lấy một ít code của forum anh nhưng anh tha cho em nha !
  Bài viết hay nhất41
Khách không xem liên kết được.
  Bài viết hay nhất42
Ờ ha , đợi em lúc
  Bài viết hay nhất43

@trandangduat wrote:Nhưng tại sao nó lại hiện lên cái link như thế này ạ:



Mong được anh @Zzbaivong giúp đỡ

forum em cũng bị như thế

demo : http://maytinh.5forum.net/t3-topic
  Bài viết hay nhất44

@AnChina wrote:
@trandangduat wrote:Nhưng tại sao nó lại hiện lên cái link như thế này ạ:



Mong được anh @Zzbaivong giúp đỡ

forum em cũng bị như thế

demo : http://maytinh.5forum.net/t3-topic


@Zzbaivong wrote:Khách không xem liên kết được.
  Bài viết hay nhất45

@Zzbaivong wrote:
@AnChina wrote:
@trandangduat wrote:Nhưng tại sao nó lại hiện lên cái link như thế này ạ:



Mong được anh @Zzbaivong giúp đỡ

forum em cũng bị như thế

demo : http://maytinh.5forum.net/t3-topic


@Zzbaivong wrote:Khách không xem liên kết được.
Em gửi nick Admin cho anh rồi đó
  Bài viết hay nhất46
Mình không giải quyết theo cách này, hơn nữa, nick @Zzbaivong không chỉ một người dùng.
  Bài viết hay nhất47

@Zzbaivong wrote:Mình không giải quyết theo cách này, hơn nữa, nick @Zzbaivong không chỉ một người dùng.
Vâng ạ , em chờ hồi âm từ anh
  Bài viết hay nhất48
http://maytinh.5forum.net/t3-topic

Nick test :
TK : maytinh
MK : maytinh123

anh xem giúp em nhé !
  Bài viết hay nhất49
Code cũ mình viết sai chỗ giải mã URL, các bạn xem lại bài hướng dẫn nhé.
  Bài viết hay nhất50

@Zzbaivong wrote:Code cũ mình viết sai chỗ giải mã URL, các bạn xem lại bài hướng dẫn nhé.
Thanks anh baivong
You cannot reply to topics in this forum