Hướng dẫn Safelink trên Blog chính
Hướng dẫn này sẽ được chia thành hai phần, phần đầu tiên là tạo trang safelink và phần thứ hai là chỉnh sửa mã nguồn hoặc mã blog. Chúng tôi sử dụng blogger vì hướng dẫn này cũng được ưu tiên cho người dùng blogger, những người dùng dịch vụ khác có thể thích ứng với hướng dẫn này.
Bước 1 - Tạo trang liên kết an toàn
Trước hết, hãy tạo một trang blogger, nó không nhất thiết phải là một trang tĩnh, trang đăng bài cũng có thể được sử dụng cho safelink này. Chúng tôi cho rằng bạn đã hiểu và có thể tạo trang, sau đó chỉnh sửa nó trong ' Chế độ xem HTML ' bằng cách nhấp vào biểu tượng bút chì ở cuối tiêu đề khi chỉnh sửa trang
Chúng tôi đã chuẩn bị một mẫu mà bạn có thể sử dụng cho bố cục trang safelink, vì vậy bạn chỉ cần sao chép và dán mã HTML bên dưới vào trang safelink mà bạn đã tạo.
<div class='ad-placement'>
<!--[ Your_ad_code_here ]-->
</div>
<div class='safelink-button' id='safelink'>
<div style='text-align: center'>
<div class='button outline' id='safelink-wait'>Please wait...</div>
<script>/*<![CDATA[*/ var currentURL = location.href; var str = currentURL; var res = str.replace('https://your_blog_address.com/p/safelink.html' + '?url=', " "); function changeLink(){ var decodedString = Base64.decode(res); window.open(decodedString, '_blank')}; document.write('<a href="#getLink" id="safelink-download" class="button">Create link</a>'); var linkDL = document.getElementById("safelink-download"); var notif = document.getElementById("safelink-wait"); var time = 5; var textTime = document.createElement("span"); linkDL.parentNode.replaceChild(textTime, linkDL); var id; id = setInterval(function () { time--; if (time < 0) { textTime.parentNode.replaceChild(linkDL, textTime); clearInterval(id); notif.style.display = "none"; linkDL.style.display = "inline-block"; } else { textTime.innerHTML = "Link will appear in " + time.toString() + " second"; }}, 1000); /*]]>*/</script>
</div>
</div>
<div class='safelink-content'>
<!--[ Write_your_content_here ]-->
</div>
<div class='safelink-create' style='text-align:center'>
<div class='ad-placement'>
<!--[ Your_ad_code_here ]-->
</div>
<div id='getLink'>
<a class='button' href='javascript:;' onclick='changeLink();' rel='noreferrer noopener' target='_blank'>Get link</a>
</div>
<div class='ad-placement'>
<!--[ Your_ad_code_here ]-->
</div>
</div>
Đặt bài viết của bạn và mã Adsense vào phần được đánh dấu. Kích thước được đề xuất của adsense thích hợp là kích thước của. Đừng quên sao chép url / liên kết trang mà bạn đã tạo trước đó và thay thế url " https://your_blog_address.com/p/safelink.html " được đánh dấu bằng url trang safelink của bạn. Bạn cũng có thể thay đổi câu trên nút liên kết theo ý thích của mình bằng cách thay đổi câu ' Get link ' và ' Please wait... ' và văn bản khác đã được đánh dấu. Số 5 trong đoạn mã trên là thông số thời gian (giây) để liên kết đích hiển thị, bạn có thể thay đổi để nhanh hơn hoặc chậm hơn. Bạn cũng có thể tùy chỉnh văn bản thời gian xuất hiện bằng cách thay đổi phần ' Link will appear in ', ' second '. Chúng tôi khuyến nghị blog của bạn hỗ trợ ' https ' vì điều này sẽ ảnh hưởng đến trải nghiệm của khách truy cập và ảnh hưởng đến chức năng của tập lệnh. Lưu trang bạn bỏ qua nếu có thông báo lỗi ' Không thể chấp nhận HTML của bạn: Thẻ kết thúc : BUTTON ' hoặc lâu hơn bằng cách nhấp vào đóng vào thông báo , cho đến khi giai đoạn đầu tiên hoàn thành và vui lòng tiếp tục giai đoạn thứ hai.
Bước 2 - Thêm một số mã CSS và Javascript
Vui lòng chỉnh sửa mẫu của bạn ở chế độ ' chỉnh sửa HTML ' Tóm lại, vui lòng nhấp vào chủ đề và nhấp vào chỉnh sửa html như được hiển thị trong hình dưới đây; Nếu bạn cần sao lưu mẫu của mình trước để tránh các lỗi chỉnh sửa.
Thêm mã CSS
Mã CSS này dùng để hiển thị bố cục trên trang safelink đã được tạo trong giai đoạn đầu.
/* Safelink */
:root {
--link-outline-color: #48525c ;
--link-bg-color: #204ecf ; // warna background tomblog link
}
.button{display: inline-flex;align-items: center;margin: 15px 15px;padding: 10px 20px;outline: 0;border: 0;border-radius: 2px;color: #fefefe;background-color: var(--link-bg-color);font-size: 14px;white-space: nowrap;overflow: hidden;max-width: 100%;line-height: 2em}
.button.outline{color: var(--link-outline-color);background-color: transparent;border: 1px solid #ebeced}
.button.outline:hover{border-color: var(--link-bg-color)}
.safelink-button, .safelink-create > *{margin: 1.8em 0}
.safelink-button span{display: block;font-size: 12px}
#getLink{margin: 5px 0}
#getLink .button{display: none}
#getLink:target .button{display: inline-flex}
Bạn có thể chỉnh sửa phần này, chẳng hạn như thay đổi kích thước văn bản trên các liên kết, v.v. Trên Blogger, mã CSS được đánh dấu bằng thẻ ... </ b: skin> . Nếu khó đặt mã CSS ở trên, bạn có thể tìm mã và đặt mã CSS ngay trên mã kèm theo lưu ý là bạn phải sử dụng ký tự <style> ... </ style > mã . Kết quả là một cái gì đó như thế này:
<style>
<!--[ Isi Kode CSS diatas ]-->
</style>
</head>
Đôi khi không tìm thấy mã trong một số mẫu nhất định , thay vào đó, bạn có thể tìm mã như sau: & lt; / head & gt; hoặc & lt;! - <head /> - & gt; & lt; / head & gt;
- & gt; & lt; / head & gt;
