Thứ Bảy, 18 tháng 10, 2014

Trong quá trình mình đi tìm các template nước ngoài mình chợt để ý đến URL cho link demo và download của blog này. nó khá là chuyên nghiệp và thích hợp dành cho những bạn nào có ý định làm blog chia sẻ hoặc thư viện download. Tiện ích này được Mybloggertricks phát triển và rất là hữu ích. Trong bài viết này mình sẽ hướng dẫn các bạn cách làm URL Redirect cho link demo và download .


Và các bước tiếng hành như sau :

Bước 1

Đăng nhập vào blogspot tạo hai trang tên là demo và download, chuyển sang tab HTML và dán code sau vào :
<div height="100%" id="iframe-container" width="100%">
<style>
body { padding: 0!important; background: none!important; }
#iframe-container { overflow: hidden; background: none!important; }
#frame { border: 0; }
</style>
<iframe frameborder="0" id="frame" src="" width="100%"> </iframe>
</div>
<script>
document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no"; // ie only
var query = window.location.search.substring(1);
query = query.replace("url=", "");
$('#frame').attr('src', query);
var str = $('#iframe-container').html();
$('#MBT-REDIRECTION').html(str);
$('iframe').height($(window).height());
</script>
Ở mục Option bên phía tay phải, bạn điều chỉnh như ảnh dưới:

Bước 2: 

Vào template của bạn, tìm đến thẻ <head> và dán đoạn code sau dưới thẻ <head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

Lưu ý

Nếu trong template của bạn có đoạn code này rồi thì bỏ qua bước 2 nhé.
Bước 3: Vẫn thao tác trong template và tìm đến thẻ <body>, dán code sau vào dưới thẻ <body>
<div id='MBT-REDIRECTION'>
Dán tiếp code này vào trên thẻ </body>
</div><!--MBT-REDIRECTION ENDS--> 

Bước 3: 

Tiếp theo các bạn tìm đến thẻ ]]></b:skin> và thêm đoạn script xuống phía dưới thẻ ]]></b:skin>
<script>
//<![CDATA[$(document).ready(function () {    $('[data-MBTdemo]').click(function (e) {        e.preventDefault();        var target = e.target || e.srcElement;        if ($(target).attr('target') == "_blank") {            window.open("http://ishare247.blogspot.com/p/demo.html?url=" + $(target).attr('href'), '_blank');        } else {            window.location = "http://ishare247.blogspot.com/p/demo.html?url=" + $(target).attr('href');        }    });
    $('[data-MBTdownload]').click(function (e) {        e.preventDefault();        var target = e.target || e.srcElement;        if ($(target).attr('target') == "_blank") {            window.open("http://ishare247.blogspot.com/p/download.html?url=" + $(target).attr('href'), '_blank');        } else {            window.location = "http://ishare247.blogspot.com/p/download.html?url=" + $(target).attr('href');        }    });});//]]></script> 

Lưu ý: 

Thay link bôi màu đỏ thành link page tạo ở bước 1.
Xong bấn lưu template lại.
Vậy là đã xong, mỗi khi các bạn muốn chèn liên kết demo và download vào 1 button hoặc 1 text thì các bạn như sau.
Đối với link demo:
<a href=”#” target=”_blank” rel=”nofollow” data-MBTdemo=”true”>DEMO</a>
Đối với link download:
<a href="#" target="_blank"  rel="nofollow" data-MBTdownload="true">DOWNLOAD</a>
Thay # bằng liên kết mà bạn muốn trỏ đến nhé

0 nhận xét:

Đăng nhận xét