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>
/* 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}
<style>
<!--[ Isi Kode CSS diatas ]-->
</style>
</head>
kha huu ich