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

  Bài viết hay nhất1
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ất2
Liên kết giả nên sẽ không truy cập được, ý huynh là không có bất cứ link nào cố định để mình vào xem trang cảnh báo này à? o.O

p/s: Che không cẩn thận nên méo biết cái link huynh đang định vào ở demo là link gì rồi nhé :v
  Bài viết hay nhất3
Giao diện lấy từ Xenforo nên giả liên kết giống luôn cho nó đẹp. :3
Nếu bỏ qua vấn đề đó, làm link là một trang HTML chuyển hướng như cũ là có thể truy cập được, nhưng nghĩ thì chắc cũng không ai rảnh đi truy cập cái trang đó làm gì nên Ad bỏ luôn. :v
  Bài viết hay nhất4
em add script vào thay dòng

Code:
$(".post-entry a")

thành ID của view nhưng không thành công .. pro giúp em với :|]

Demo: http://gta-club.forumvi.com/
ID: test123
Pass: test123456789
  Bài viết hay nhất5
Thay:
Code:
.post-entry a
bằng:
Code:
.post-entry_content a

Thay:
Code:
#main-content
bằng:
Code:
#content

Tìm trong mớ js In all the pages:
Code:
jQuery(document).ready(function ($) {
    $('*').click(function () {
        $('body').scrollTo($(this).attr('direction'), 600);
        return false
    })
});
...và sửa:
Code:
$('*')
thành:
Code:
$('#jump_top')
  Bài viết hay nhất6
Đã thành công! tks anh Baivong
  Bài viết hay nhất7
Cập nhật ver 2 - Trở lại cách truyền thống (dùng trang HTML) :D #1
  Bài viết hay nhất8
Tem mặt tiền! Liếm luôn phong bì ver 2 =))
  Bài viết hay nhất9
èo !! chuyển hướng nhưng đứng luôn !! Baivong xem giùm em~

http://gta-club.forumvi.com/t21-phan-mem-autohotkey-ahk#34
Nicktest ID: test123
Pass: test123456789
  Bài viết hay nhất10
@KaiJit_GC wrote:èo !! chuyển hướng nhưng đứng luôn !! Baivong xem giùm em~

http://gta-club.forumvi.com/t21-phan-mem-autohotkey-ahk#34
Nicktest ID: test123
Pass: test123456789

Phần CSS, bạn sửa style của #redirects thành:
Code:
#redirects {
   width: 840px;
   border: 1px solid #CCC;
   margin: 70px auto;
   padding: 20px 30px;
   background-color: #fff;
}

Phần javascript, dòng code 3, tìm:
Code:
$(".post-entry a")
sửa thành:
Code:
$(".post-entry_content a")
Phần javascript, dòng code 5, tìm:
Code:
(".post")
sửa thành:
Code:
(".a_box")

Phần HTML, tùy chọn tạo trang HTML
Do you wish to use your forum header and footer ?: Có
Phần HTML, dòng code 5, tìm:
Code:
$("#main-content")
sửa thành:
Code:
$(".pun")
  Bài viết hay nhất11
Cập nhật version 3: Xem #1
  Bài viết hay nhất12
click vào fancybox xem youtube vẫn chuyển hướng >:O
  Bài viết hay nhất13
@NextStep wrote:click vào fancybox xem youtube vẫn chuyển hướng >:O
thay js ở bước 3 thành js này thử xem
Code:
/* zzRedirects v3 - devs.forumvi.com */
$(function () {
  $(".post-entry a").not("a[href$='.jpg'],a[href$='.jpeg'],a[href^='https://www.youtube.com/'],a[href$='.png'],a[href$='.gif'],a[href$='.bmp'],a[href^='/'],a[href^='#'],a[href^='?'],a[href^='http://" + location.host + "']").addClass("external").click(function (a) {
      a.preventDefault();
      window.open("/h{PAGE_ID}-redirect?url=" + encodeURIComponent(this.href), document.title);
  });
});
  Bài viết hay nhất14
@anhoang_qn wrote:
@NextStep wrote:click vào fancybox xem youtube vẫn chuyển hướng >:O
thay js ở bước 3 thành js này thử xem
Code:
/* zzRedirects v3 - devs.forumvi.com */
$(function () {
  $(".post-entry a").not("a[href$='.jpg'],a[href$='.jpeg'],a[href^='https://www.youtube.com/'],a[href$='.png'],a[href$='.gif'],a[href$='.bmp'],a[href^='/'],a[href^='#'],a[href^='?'],a[href^='http://" + location.host + "']").addClass("external").click(function (a) {
      a.preventDefault();
      window.open("/h{PAGE_ID}-redirect?url=" + encodeURIComponent(this.href), document.title);
  });
});
Không có gì khác :D
  Bài viết hay nhất15
cho e xin cái demo nha bác :) @NextStep
  Bài viết hay nhất16
Thử JS này xem
Code:
/* zzRedirects v3 - devs.forumvi.com */
$(function () {
  $(".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*='youtube.com'],a[href^='http://" + location.host + "']").addClass("external").click(function (a) {
      a.preventDefault();
      window.open("/h{PAGE_ID}-redirect?url=" + encodeURIComponent(this.href), document.title);
  });
});
  Bài viết hay nhất17
mình làm thử mà hình ảnh nó cũng chuyễn luông admin ơi giúp mình với
  Bài viết hay nhất18
demo+nick test+pass thì admin mới giúp bạn được chứ????
  Bài viết hay nhất19
Thanks anh
  Bài viết hay nhất20

em làm nó bị làm sao ý k đc như demo của anh
acc test:test123
pass : 123123ta
  Bài viết hay nhất21
Bước 1 chưa làm.
  Bài viết hay nhất22
@Zzbaivong wrote:Bước 1 chưa làm.
bước 1 em làm rồi ạ
  Bài viết hay nhất23
Làm chỗ nào vậy? http://anhdausai11.forumvi.com/26-ltr.css
  Bài viết hay nhất24
Cái này phpbb3 xài được không anh @Zzbaivong
  Bài viết hay nhất25
Cập nhật

  1. Sửa lỗi liên kết có chữ javascript
  2. Bỏ bước chèn CSS
You cannot reply to topics in this forum