05/08/2017

Hướng dẫn chèn điều khoản vào link tải tập tin trong bài viết

lượt xem 2 nhận xét thumb_up

Một số website lớn hiện nay đang áp dụng chèn điều khoản sử dụng vào link tải giúp cho người đọc xem trước nội dung về điều khoản trước khi có quyết định tải hay không. Đây là phương pháp hay giúp cho blog chúng ta không bị người đọc khởi kiện, phản ánh..., và qua đó cũng đem lại tính chuyên nghiệp cao mà điều này đa số blog vẫn không để ý và áp dụng.



Có ba cách chèn điều khoản vào link tải thứ nhất sử dụng hộp thông báo popup, thứ hai sử dụng trang chuyển hướng và thứ ba sử dụng thông báo trên trình duyệt. Tùy vào trường hợp mà nên áp dụng vào bài viết. Dưới đây mình sẽ hướng dẫn tạo lần lượt ba cách trên


Cách 1: Sử dụng hộp thông báo popup



Cách này ưu điểm rất khó để thấy link tải, giao diện đẹp chuyên nghiệp nhưng nhược điểm chỉ áp dụng cho một link tải duy nhất. Nếu trong bài viết chỉ có chèn một link tải thì nên áp dụng cách này.



Cách thực hiện

Bước 1: Tạo style cho hộp thông báo modal box, chèn trước ]]></b:skin>


/*modal box*/

.img-replace {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  color: transparent;
  white-space: nowrap;
}

.cd-nugget-info {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 50px;
  line-height: 50px;
  bottom: 0;
  left: 0;
}
.cd-nugget-info a {
  position: relative;
  font-size: 14px;
  color: #5e6e8d;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.no-touch .cd-nugget-info a:hover {
  opacity: .8;
}
.cd-nugget-info span {
  vertical-align: middle;
  display: inline-block;
}
.cd-nugget-info span svg {
  display: block;
}
.cd-nugget-info .cd-nugget-info-arrow {
  fill: #5e6e8d;
}


.cd-popup-trigger {
  background-color: #008CBA;
    border: none;
    border-radius: 2px;
    color: white;
    padding: 0px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
}
.cd-popup-trigger:hover{background-color: #008CBA;color:#fff;}

.cd-popup {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(94, 110, 141, 0.9);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-popup.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-popup-container {
  position: relative;
  width: auto;
  max-width: 500px;
  margin: 4em auto;
  background: #FFF;
  text-align: left;
  padding:25px;
}

.cd-popup-container .cd-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
}
.cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 14px;
  height: 2px;
  background-color: #333;
}
.cd-popup-container .cd-popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}
.cd-popup-container .cd-popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 8px;
}
.is-visible .cd-popup-container {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.clickbutton {
    background-color: #337ab7;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 7px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    cursor: pointer;
}

Bước 2: Chèn javascript trước thẻ </head>


<script type="text/javascript">
jQuery(document).ready(function($){
$('.cd-popup-trigger').on('click', function(event){
event.preventDefault();
$('.cd-popup').addClass('is-visible');
});

$('.cd-popup').on('click', function(event){
if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup') ) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});

$('.cd-popup').on('click', function(event){
if( $(event.target).is('.clickbutton') || $(event.target).is('.cd-popup') ) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});

$(document).keyup(function(event){
if(event.which=='27'){
$('.cd-popup').removeClass('is-visible');
}
});
});
</script>

Bước 3: Chèn code trong bài viết

Ví dụ khi bạn muốn chèn link tải vào chữ Windows 10 Tweak thì sau khi viết hết bài bạn chuyển qua khung soạn thảo HTML chèn đoạn code sau:


<a class="cd-popup-trigger" href="javascript:void(0);">Windows 10 Tweaker</a>

Tiếp tục chèn tiếp đoạn code dưới đây ở cuối bài viết trong khung HTML


<div class="cd-popup" role="alert">
<div class="cd-popup-container">
<div style="text-align: center;">
<span style="font-size: large;">ĐIỀU KHOẢN SỬ DỤNG</span></div>
<br />
1. Blog chúng tôi hoạt động hoàn toàn tự nguyện và phi lợi nhuận nhằm mang đến cho các bạn sự trải nghiệm tốt nhất về Windows 10.<br />
2. Chúng tôi cam kết không gắn quảng cáo hoặc chèn link rút gọn để kiếm tiền. Các tập tin được cung cấp link tải miễn phí.<br />
3. Mọi người có thể lấy bài viết, link tải từ blog chúng tôi chia sẻ qua các trang hoặc diễn đàn khác mà không phải xin phép tác giả hoặc ghi nguồn.<br />
4. Chúng tôi không chịu trách nhiệm với lỗi phát sinh trong quá trình sử dụng tập tin.<br />
5. Nếu các bạn gặp khăn có thể <a href="https://www.messenger.com/t/kequaduongvodanh" onclick="javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=0,menubar=0,scrollbars=yes,width=590,height=540&quot;); return false;" rel="nofollow" target="blank" title="Hỗ trợ trực tuyến">liên hệ</a> trực tiếp với chúng tôi.<br />
<br />
<div style="text-align: center;">
<button class="clickbutton" onclick="window.open('http://www.mediafire.com/file/yot82sf4f8hn4mr/Windows10Tweaker.zip')">Tôi đồng ý</button>
</div>
<a class="cd-popup-close img-replace" href="javascript:void(0);"></a>
 </div>
</div>

Thay nội dung cho phù hợp và thay link chữ đỏ bằng link tải là xong.


Cách 2: Sử dụng trang chuyển hướng




Cách này có ưu điểm chèn được nhiều link tải vào trong bài viết và cách chèn link cũng đơn giản hơn. Một ưu điểm của cách này chúng ta có thể đánh giá được lượng view của trang chuyển hướng trước khi quyết định chèn link rút gọn kiếm tiền. Nhược điểm của nó là thấy link tải trên trình duyệt nhưng không quan trọng vì nếu người đọc copy link tải trên trình duyệt xem như họ đã đồng ý với điều khoản



Cách thực hiện

Bước 1: Tạo style cho nút download trước ]]></b:skin>


.down {
    background-color: #008CBA;
    border: none;
    border-radius: 2px;
    color: white;
    padding: 0px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
}

.down:hover{color: white;}

Bước 2: Tạo trang tĩnh chuyển hướng mới đặt tên cho trang ví dụ terms of use sau đó chuyển qua khung soạn thảo HTML copy đoạn code bên dưới vào


<div style="text-align: center;">
<b><span style="font-size: large;">ĐIỀU KHOẢN SỬ DỤNG</span></b></div>
<br />
<ol>
<li>Blog chúng tôi hoạt động hoàn toàn tự nguyện và phi lợi nhuận nhằm mang đến cho các bạn sự trải nghiệm tốt nhất về hệ điều hành Windows 10.&nbsp;</li>
<li>Chúng tôi cam kết không gắn quảng cáo hoặc chèn link rút gọn để kiếm tiền.</li>
<li>Phần mềm hoặc file được cung cấp link tải miễn phí.</li>
<li>Mọi người có thể lấy bài viết, link tải từ blog chúng tôi chia sẻ qua các trang hoặc diễn đàn khác mà không phải xin phép tác giả hoặc ghi nguồn.</li>
<li>Chúng tôi không chịu trách nhiệm với lỗi phát sinh trong quá trình sử dụng file hoặc phần mềm.</li>
<li>Cảm ơn các bạn đã ghé thăm Blog của chúng tôi. Chúc các bạn một ngày vui vẻ và đừng quên <a class='share' href='http://www.blogger.com/follow-blog.g?blogID=4562796330339503496' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=590,height=540&quot;); return false;' rel='nofollow' target='blank' title='Theo dõi Blog này'>theo dõi Blog</a> để thường xuyên cập nhật tin tức mới nhé!</li>
</ol>
<br />
<div style="text-align: center;">
<button class="link-out-btn" id="button1">Tôi đồng ý</button>
<button id="button2" onclick="javascript:closeWindow();">Từ chối</button>
</div>
<br />
<br />
<script type="text/javascript">
 function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

var time = 0;
var page = getQueryVariable("url");
function countDown(){
time--;
gett("timecount").innerHTML = time;
if(time == -1){
window.location = page;
}
}
function gett(id){
if(document.getElementById) return document.getElementById(id);
if(document.all) return document.all.id;
if(document.layers) return document.layers.id;
if(window.opera) return window.opera.id;
}
function init(){
if(gett('timecount')){
setInterval(countDown, 1000);
gett("timecount").innerHTML = time;
}
else{
setTimeout(init, 50);
}
}
document.onload = init();

$(document).ready(function(){
 $('.link-out-btn').click(function(){
    window.location = page;
 });
 $('#linkout').text(page);
});
</script>

<script>
function closeWindow() {
        window.open('','_parent','');
        window.close();
    }
</script>


<style>

#button1 {
    background-color: #4CAF50;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 7px 14px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
}

#button2 {
    background-color: #008CBA;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 7px 14px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
}

</style>

Thay nội dung text cho phù hợp, lưu ý dòng var time = 0; là thời gian cố định. Nếu bạn muốn trang tự động chuyển hướng tới trang tải thì thay số 0 thành số thời gian bạn muốn, thời gian được tính bằng giây. Xong click xuất bạn trang sau đó chọn xem để lấy link trang chuyển hướng ví dụ link của trang chuyển hướng có dạng: http://www.blogthuthuatwin10.com/p/terms-of-use.html

Bước 3: Chèn link vào bài viết

Ví dụ khi bạn muốn chèn link tải vào chữ Windows 10 Tweak thì sau khi viết hết bài bạn chuyển qua khung soạn thảo HTML chèn đoạn code sau:


<a class="down" href="http://www.blogthuthuatwin10.com/p/terms-of-use.html?url=http://www.mediafire.com/file/yot82sf4f8hn4mr/Windows10Tweaker.zip" target="_blank">Windows 10 Tweak</a>

Trong đó link màu xanh là link của trang chuyển hướng và link màu đỏ là link tải


Cách 3: Sử dụng thông báo của trình duyệt



Cách này đơn giản hơn những cách kia chỉ cần chèn script vào trong bài viết, ưu điểm có thể chèn nhiều link tải, không phải tạo css như cách một



Cách thực hiện:

Bước 1: Tạo style cho nút download trước ]]></b:skin>


.down {
    background-color: #008CBA;
    border: none;
    border-radius: 2px;
    color: white;
    padding: 0px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
}

.down:hover{color: white;}

Bước 2: Chèn link vào bài viết

Ví dụ khi bạn muốn chèn link tải vào chữ Windows 10 Tweak thì sau khi viết hết bài bạn chuyển qua khung soạn thảo HTML chèn đoạn code sau:


<a class="down" onclick="Function()">Windows 10 Tweak</a>

Tiếp tục chèn tiếp đoạn code dưới đây ở cuối bài viết trong khung HTML


<script type="text/javascript">
    function Function() {
    if (confirm("Blog thủ thuật win 10 hoạt động phi lợi nhuận, cam kết không gắn quảng cáo hoặc chèn link rút gọn. Phần mềm hoặc file được cung cấp miễn phí, mọi người có thể lấy bài viết, link tải chia sẻ qua các trang hoặc diễn đàn khác mà không phải xin phép tác giả hoặc ghi nguồn. Chúng tội không chịu trách nhiệm với lỗi phát sinh trong quá trình sử dụng phần mềm!") == true) {
        window.open('http://www.mediafire.com/file/yot82sf4f8hn4mr/Windows10Tweaker.zip');
    } else {
        alert("Cảm ơn bạn đã đọc bài viết!");
    }
    document.getElementById("down").innerHTML
}
</script>

Thay nội dung cho phù hợp và thay link chữ đỏ bằng link tải là xong. Nếu muốn chèn link tải khác trong bài viết thì làm như sau, ví dụ chèn link cho chữ MediaFile


<a class="down" onclick="Function1()">MediaFile</a>

Tiếp tục chèn tiếp đoạn code dưới đây ở cuối bài viết trong khung HTML


<script type="text/javascript">
    function Function1() {
    if (confirm("Blog thủ thuật win 10 hoạt động phi lợi nhuận, cam kết không gắn quảng cáo hoặc chèn link rút gọn. Phần mềm hoặc file được cung cấp miễn phí, mọi người có thể lấy bài viết, link tải chia sẻ qua các trang hoặc diễn đàn khác mà không phải xin phép tác giả hoặc ghi nguồn. Chúng tội không chịu trách nhiệm với lỗi phát sinh trong quá trình sử dụng phần mềm!") == true) {
        window.open('http://www.mediafire.com/file/yot82sf4f8hn4mr/Windows10Tweaker.zip');
    } else {
        alert("Cảm ơn bạn đã đọc bài viết!");
    }
    document.getElementById("down1").innerHTML
}
</script>

Trên đây mình đã hướng dẫn ba phương pháp chèn điều khoản vào link tải tập tin trong bài viết tùy theo sở thích và những ưu và nhược điểm mà mình đã nếu ra trong mỗi cách mà bạn có thể áp dụng cho phù hợp.

comment 2 nhận xét