Việc tạo 1 trang chuyển hướng download cho blogspot giờ đây đã trở lên đơn giản hơn bao giờ hết. Chỉ với thủ thuật đơn giản sau đây, các bạn đã có thể
Việc tạo 1 trang chuyển hướng download cho blogspot giờ đây đã trở lên
đơn giản hơn bao giờ hết. Chỉ với thủ thuật đơn giản sau đây, các bạn đã có
thể làm cho trang blog của mình trông chuyên nghiệp chẳng khác gì những
website lớn.
Bên cạnh việc giữ chân khách truy cập lâu hơn thì 1 lợi ích khác nữa đó là đặt quảng cáo Adsense trên những trang download này sẽ tăng cơ hội được click cao hơn rất nhiều so với các trang khác trong blog như hình bên dưới
Bước 1: Các bạn vào mục Trang tạo một trang tên là Download và copy toàn bộ code bên dưới dán vào bên trong (lưu ý là dán ở chế độ HTML)
[<div class='time-wrapper hidden'>Nội dung trong này thì các bạn giữ nguyên, không cần chỉnh sửa, các bạn chỉ cần chỉnh lại thời gian chờ của timer = 20; ở đây là 20 giây.
<p><b>Quá trình tải xuống của bạn sẽ bắt đầu sau giây lát!</b></p>
<p><span id="timer-countdown">0</span></p>
<div class="getlink-button"></div>
</div>
<style>
.hidden{display:none!important}
p{margin:0}
p,.getlink-button,.time-wrapper{text-align:center}
.getlink-button a{background:#6dab3c;border:1px solid #6dab3c;position:relative;color:#ffffff;font-size:14px;display:inline-block;padding:7px 20px;min-width:70px;border-radius:3px}
#timer-countdown{margin:25px 0 30px 0;display:inline-block;border-radius:100%;width:120px;height:120px;line-height:120px;color:#33b5e5;border-radius:50%;border:2px solid #33b5e5;font-size:60px;font-weight:100}
</style>
<script>
var id = localStorage.getItem("post_id"),
get_link = localStorage.getItem("download_link"),
timer = 20;
if (id) {
document.querySelector(".time-wrapper").classList.remove("hidden");
var downloadTimer = setInterval(function() {
document.getElementById("timer-countdown").innerHTML = timer, (timer -= 1) <= 0 && (clearInterval(downloadTimer), document.getElementById("timer-countdown").innerHTML = "0", document.querySelector(".getlink-button").innerHTML = "<a href=" + get_link + ' target="_blank" rel="noopener nofollow" title="Get link">Get link</a>')
}, 1e3)
}
</script>]
Bước 2: Các bạn copy toàn bộ code bên dưới dán trước thẻ đóng </body> trong chỉnh sửa giao diện HTML
[<b:if cond='data:view.isSingleItem'>
<script>
//<![CDATA[
$(".action a.fshare").click(function() {
var t = $(this).attr("name");
localStorage.setItem("post_id", t), $.ajax({
type: "GET",
url: "/feeds/posts/summary/" + t,
data: {
alt: "json"
},
dataType: "jsonp",
success: function(t) {
if (t.entry)
for (var e = 0; e < t.entry.link.length; e++)
if ("enclosure" == t.entry.link[e].rel && "Fshare" == t.entry.link[e].type) {
var n = t.entry.link[e].href;
localStorage.setItem("download_link", n)
}
}
});
setTimeout(function() {
location.href = "/p/download.html"
}, 1e3)
});
$(".action a.google").click(function() {
var t = $(this).attr("name");
localStorage.setItem("post_id", t), $.ajax({
type: "GET",
url: "/feeds/posts/summary/" + t,
data: {
alt: "json"
},
dataType: "jsonp",
success: function(t) {
if (t.entry)
for (var e = 0; e < t.entry.link.length; e++)
if ("enclosure" == t.entry.link[e].rel && "Google Drive" == t.entry.link[e].type) {
var n = t.entry.link[e].href;
localStorage.setItem("download_link", n)
}
}
});
setTimeout(function() {
location.href = "/p/download.html"
}, 1e3)
});
$(".action a.mediafire").click(function() {
var t = $(this).attr("name");
localStorage.setItem("post_id", t), $.ajax({
type: "GET",
url: "/feeds/posts/summary/" + t,
data: {
alt: "json"
},
dataType: "jsonp",
success: function(t) {
if (t.entry)
for (var e = 0; e < t.entry.link.length; e++)
if ("enclosure" == t.entry.link[e].rel && "Mediafire" == t.entry.link[e].type) {
var n = t.entry.link[e].href;
localStorage.setItem("download_link", n)
}
}
});
setTimeout(function() {
location.href = "/p/download.html"
}, 1e3)
});
//]]>
</script>
</b:if>]
- Màu đỏ đầu tiên của mỗi đoạn code: Gọi CLASS của nút download
- Màu đỏ thứ hai của mỗi đoạn code: Tên của liên kết đính kèm (Loại mime)
Bước 3: Bạn copy CSS thêm trước thẻ đóng </b:skin>
[.action{text-align:center;margin-top:40px;margin-bottom:20px}Bước 4: Các bạn tìm thẻ <data:post.body/> của bài viết, bên trong template sẽ có nhiều chỗ của thẻ này, để tìm đúng các bạn cứ nhập đại vài ký tự dưới nó và lưu lại, sau đó mở một bài viết lên xem, nếu ký tự đó xuất hiện bên dưới hoặc trên bài viết tùy bạn nhập, thì đó chính là thẻ <data:post.body/> cần tìm, nếu chưa hiện các bạn tìm thẻ khác và làm tương tự.
.action a.button{display:inline-block;height:31px;background-color:#ff3d00;font-size:14px;color:#ffffff;font-weight:400;line-height:31px;text-align:center;text-decoration:none;cursor:pointer;padding:0 15px;margin:0 5px 5px 0;border:1px solid rgba(0,0,0,.1);border-bottom-width:2px;border-radius:2px}
.action a.button:hover{background-color:#ff3d00!important}]
Sau đó copy toàn bộ code này dưới dưới hoặc trên thẻ <data:post.body/> tùy các bạn.
- Dán ở trên thì nút download sẽ hiện trước bài viết.
- Dán ở dưới thì nút download sẽ hiện bên dưới bài viết.
[<div class='action'>Các bạn chú ý chỗ mình tô màu đỏ
<b:loop index='i' values='data:post.enclosures' var='enclosure'>
<b:if cond='data:enclosure.mimeType == "Fshare"'>
<a class='button fshare' expr:name='data:post.id' style='background-color: #8e44ad;'><i aria-hidden='true' class='fa fa-download' />
<data:enclosure.mimeType />
</a>
</b:if>
<b:if cond='data:enclosure.mimeType == "Mediafire"'>
<a class='button mediafire' expr:name='data:post.id' style='background-color: #2980b9;'><i aria-hidden='true' class='fa fa-download' />
<data:enclosure.mimeType />
</a>
</b:if>
<b:if cond='data:enclosure.mimeType == "Google Drive"'>
<a class='button google' expr:name='data:post.id' style='background-color: #e40046;'><i aria-hidden='true' class='fa fa-download' />
<data:enclosure.mimeType />
</a>
</b:if>
</b:loop>
</div>]
- Màu đỏ đầu tiên của mỗi đoạn code: Tên của liên kết đính kèm (Loại mime)
- Màu đỏ thứ hai của mỗi đoạn code: Tên CLASS của nút download để các bạn gọi vào đoạn code của bước 2.
Bước 5: Kiểm tra lại blogspot của bạn đã có thư viện Font Awesome và thư viện jQuery hay chưa, nếu chưa thì thêm trước thẻ </head>
[<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>]
- Nếu thiếu thư viện Font thì nút download sẽ không có icon.
- Nếu thiế thư viện jQuery thì đoạn code sẽ không chạy.
- Nếu có đủ thì các bạn bỏ qua bước này.
Và cách đăng bài như sau, các bạn nhập liên kết bên trên và bên dưới Loại mime các bạn nhập đúng chữ Fshare, Google Driver, Mediafire tương ứng với link của nó.
Xem hình dưới.
Hi bạn, mình làm theo các bước trên, không biết sai chỗ nào nhưng click link không hoạt động. Nếu có thể xem giúp mình nhé.
ReplyDelete