Hôm nay chúng ta đang thảo luận về chủ đề "Làm thế nào để tạo safelink giống như Plus UI?" . Hy vọng bài viết này sẽ hữu ích cho cả bạn và những người đã chia sẻ! Hãy kiểm tra blog của chúng tôi thường xuyên trong trường hợp có thể có bản cập nhật.
Demo
|
| Hướng dẫn tạo safelink chuyển hướng giống trang Plus Ui cho blogger |
Vì vậy, trước hết, chúng ta đều biết rằng Plus UI đang trở nên nổi tiếng nhanh chóng.Nó sử dụng liên kết an toàn gồm hai loại - một liên kết thủ công và một liên kết an toàn tự động.đối với thủ công, bạn cần tạo hai trang - một là trang tạo liên kết an toàn và trang kia là trang đích được chuyển hướng.
Các bước tạo Safelink cho blogger
Bước 1: Tạo trang Safelink
- Bạn đăng nhập vào blogger
- Sau đó bạn vào phần trang, tạo một trang mới
- Chuyển sang phần chỉnh sửa HTML và dán mã HTML bên dưới vào
<style>.status{height:3px;width:3em;border-radius:1px;background-color:inherit;animation-duration:1s;animation-timing-function:ease-in-out;margin:3px auto 6px 4px}
@keyframes success{0%{background-color:inherit}10%{background-color:rgb(18,206,96);}100%{background-color:inherit}}
@keyframes fail{0%{background-color:inherit}10%{background-color:rgb(221,55,13);}100%{background-color:inherit}}</style>
<svg style='width:100%;height:70px;margin-bottom:30px;' class='line' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><path d='M8.4845,19.6057 C10.8195,19.6057 16.1565,17.2837 16.1565,10.8787 C16.1565,4.4747 16.4345,3.9737 15.8195,3.3577 C15.2035,2.7417 11.9935,0.7507 8.4845,0.7507 C4.9755,0.7507 1.7655,2.7417 1.1505,3.3577 C0.5345,3.9737 0.8125,4.4747 0.8125,10.8787 C0.8125,17.2837 6.1505,19.6057 8.4845,19.6057 Z'/><polyline class='svgC' points='5.8859 9.8748 7.7779 11.7698 11.6759 7.8698'/></g></svg>
<div id="cArea">
<div>
<label>Nhập liên kết trang chuyển hướng của bạn</label>
<br/>
<input id="link-to" type="text" placeholder="Enter your link" />
</div>
<!--[Config]-->
<div id="advanced" style="display:none;">
<input id="link-page" type="text" value="https://templateplusui.blogspot.com/p/download-page.html"disabled="">
</div>
</div>
<div id="">
<button id="create-link" class="button">Generate</button>
<div class="status" id="notifi"></div>
</div>
<div id="cArea">
<textarea id="result" style="word-break: break-all;"
onkeyup="document.getElementById('open').href = this.value || 'javascript:0'"></textarea>
<div>
<a name="result" class="copy-btn button" href="javascript:()">Copy</a>
<a id="open" class="copy-btn outline button" target="_blank">Open</a>
</div>
</div>
<script>
function validate() {
if (document.getElementById("link-to").value.length == 0) {
return false
}
if (document.getElementById("link-page").value.length == 0) {
return false
}
return true
}
var notifi = document.getElementById("notifi");
document.getElementById("create-link").addEventListener("click", () => {
if (!validate()) {
document.getElementById("result").value = "";
notifi.style["animation-name"] = null;
notifi.offsetHeight;
notifi.style["animation-name"] = "fail";
return;
}
var linkPage = document.getElementById("link-page").value.trim();
var linkTo = document.getElementById("link-to").value.trim();
linkTo = linkTo.replace(/^((?!(\w+:))(\/\/)?)/, "http://"); // auto add http://
var data = {
url: linkTo,
},
base = btoa(encodeURIComponent(JSON.stringify(data))).replace(/={1,}$/, ""),
queryVal = "~" + "=" + base,
result;
if (linkPage.indexOf("#") != -1) {
var urlAndHash = linkPage.split("#", 2);
if (urlAndHash[0].indexOf("?") != -1) {
result = urlAndHash[0] + "&" + queryVal + "#" + urlAndHash[1];
}
else {
result = urlAndHash[0] + "?" + queryVal + "#" + urlAndHash[1];
}
} else {
if (linkPage.indexOf("?") != -1) {
result = linkPage + "&" + queryVal;
}
else {
result = linkPage + "?" + queryVal;
}
}
document.getElementById("result").value = result;
document.getElementById("open").href = result;
notifi.style["animation-name"] = null;
notifi.offsetHeight;
notifi.style["animation-name"] = "success";
});
//@ntdm11 :>
</script>
<script>
var a = document.getElementsByClassName('copy-btn');
for (let i = 0; i < a.length; i++) {
a[i].addEventListener('click', function () {
var b = a[i].getAttribute("name");
var text = document.getElementById(b);
text.select();
document.execCommand('copy');
});
}
</script>
Bây giờ tạo thêm trang download-page thành trang redirect đã tạo trước đó.
Bước 2: Tạo thêm trang chuyển hướng
Hãy dán mã code này vào trang download-page vừa tạo ra
<style>
#wait-btn{width:112px;height:36px;border-radius:5px;margin:2px auto;overflow:hidden;background-color:cornflowerblue}
#waiting{display:flex;align-items:center;flex-direction:column}
#waiting>*{margin-bottom:16px}
#waiting #loadingBar{max-width:400px;width:100%;height:2px}
#link-btn{margin:2px auto;display:flex;justify-content:center;align-items:center}
#sec-wait{font-size:32px;margin:8px auto;align-items:center;display:flex;justify-content:center}
#step{text-align:right}
#loadingAnimation{height:240px;padding:60px;box-sizing:border-box;max-width:600px;width:100%;display:flex;justify-content:center}
.load{background-repeat:no-repeat;background-size:315px 250px,315px 180px,100px 100px,225px 30px;background-position:-315px 0,0 0,0px 190px,50px 195px;animation:loading 1.5s infinite}
.load>a{cursor:default;color:transparent!important;outline:none!important}
.preAds{display:none;border:2px dashed rgb(218,170,66)}
@keyframes loading{to{background-position:315px 0,0 0,0 190px,50px 195px}}
</style>
<div id="error">
<div id="nof">
<div style="font-size: 36px;">Opps...</div>
<br>
<div>The requested link is broken!</div>
<br>
</div>
<hr>
</div>
<div id="success">
<div id="step"></div>
<h3><center>Vui lòng chờ !</center></h3>
<center>Kéo chuột xuống một chút và đợi khoảng 5 giây!</center>
<div id="waiting">
<div id="loadingAnimation">
</div>
<div id="loadingNote">
</div>
<div id="loadingBar">
<style scoped>.progress{background:#e1e4e8;border-radius:3px;overflow:hidden;height:100%}
.progress .progress-bar{display:block;height:100%;background:linear-gradient(90deg,#ffd33d,#ea4aaa 17%,#b34bff 34%,#01feff 51%,#ffd33d 68%,#ea4aaa 85%,#b34bff);background-size:300% 100%;-webkit-animation:progress-animation 2.5s linear infinite;animation:progress-animation 2.5s linear infinite}
.pre-progress-bar{opacity:0;height:100%;animation:progress-loader;-webkit-animation:progress-loader}
@-webkit-keyframes progress-animation{0%{background-position:100%}100%{background-position:0}}
@keyframes progress-animation{0%{background-position:100%}100%{background-position:0}}
@keyframes progress-loader{0%{transform:translateX(-100%);display:block;opacity:1}98%{transform:translateX(0);opacity:1}100%{opacity:0}}</style>
<div class="progress">
<div class="pre-progress-bar" id="preProgressBar"><span class="progress-bar"></span></div>
</div>
</div>
</div>
<div class="preAds" id="ads_2">
<div class="ads" style="display:flex;">
</div>
</div>
<div id="link-btn">
<div class="load" id="link-href" style="padding: 0 12px; margin: 8px;">
<a href="javascript:0" class="load button" id="goLink">Visit</a>
<a href="javascript:0" class="load button outline" id="goBack">Go back</a>
</div>
</div>
<div class="preAds" id="ads_3">
<div class="ads">
</div>
</div>
<br>
<hr>
</div>
<div id="content"> </div>
<script>/*<![CDATA[*/
function getUrlParameter(sParam) {
var sPageURL = window.location.search.substring(1),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
var arr = sURLVariables[i].split('='),
sParameterName = arr.splice(0, 1);
sParameterName.push(arr.join('='));
if (sParameterName[0] === sParam) {
return typeof sParameterName[1] === undefined ? flase : decodeURIComponent(sParameterName[1]);
}
}
return false;
};
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
randomEmoij = ()=> {
var items = [":\")", ":-]", ">.<", "(>'-'<)", ";-;", "♪", "+_+", ":3", "❤","<br/>"];
return items[Math.floor(Math.random()*items.length)];
}
hashCode = s => s.split('').reduce((a,b)=>{a=((a<<5)-a)+b.charCodeAt(0);return a&a},0);
stayTime = 12;
(async () => {
var note = document.getElementById('loadingNote');
var nextUrl = getUrlParameter("~");
if (!nextUrl) {
document.getElementById("success").remove();
document.getElementById("error").remove();
return;
}
try {
var json = decodeURIComponent(atob(nextUrl)),
url = JSON.parse(json).url;
} catch (er) {
}
if (url) {
document.getElementById("error").remove();
var fdlid = "fdl_" + Math.abs(hashCode(url));
var preProgressBar = document.getElementById("preProgressBar");
if (!localStorage.getItem(fdlid) || (new Date()).getTime() - localStorage.getItem("fdl_1907307024") > 1 * 30 * 60 * 1000) {
var d = stayTime;
preProgressBar.style["-webkit-animation-duration"] = d + "s";
preProgressBar.style["animation-duration"] = d + "s";
note.innerHTML = "Đang tìm kiếm liên kết của bạn ..";
await sleep(200 * d);
note.innerHTML = "Đang tải liên kết của bạn";
await sleep(400 * d);
note.innerHTML = "Sắp xong rồi..." + randomEmoij();
await sleep(200 * d);
note.innerHTML = randomEmoij();
await sleep(50 * d);
note.innerHTML = "Đợi thêm chút nữa!" + randomEmoij();
await sleep(150 * d);
note.innerHTML = "Liên kết đã sẵn sàng để truy cập!";
}
else {
var d = (Math.round(10 * stayTime) * 0.018);
preProgressBar.style["-webkit-animation-duration"] = d + "s";
preProgressBar.style["animation-duration"] = d + "s";
note.innerHTML = "Looking for your link...";
await sleep(1000 * d);
note.innerHTML = "Link is ready to visit!";
}
document.getElementById("link-href").classList.remove("load");
var golink = document.getElementById("goLink"),
goBack = document.getElementById("goBack");
golink.classList.remove("load");
goBack.classList.remove("load");
golink.href = url;
goBack.href = "javascript:self.close()|(window.location.href='/')";
localStorage.setItem(fdlid, (new Date()).getTime());
}
else {
document.getElementById("success").remove();
}
})();
function displayLink() {
}
/*]]>*/</script>
<script>/*<![CDATA[*/
if(document.getElementById("loadingAnimation")) document.getElementById("loadingAnimation").innerHTML = `<style scoped>div#cubeLoading{margin-top:12px;position:relative;height:150px;width:150px;transform:scale(0.5)}div#cubeLoading>div{display:flex;justify-content:center}div#cubeLoading .cube{position:absolute;width:86px;height:100px}div#cubeLoading .right{background:#e79c10;transform:rotate(-30deg) skewX(-30deg) translate(49px, 65px) scaleY(0.86)}div#cubeLoading .left{background:#d53a33;transform:rotate(90deg) skewX(-30deg) scaleY(0.86) translate(25px, -50px)}div#cubeLoading .top{background:#1d9099;transform:rotate(210deg) skew(-30deg) translate(-75px, -22px) scaleY(0.86);z-index:2}div#cubeLoading .face{height:50px;width:50px;position:absolute;transform-origin:0 0}div#cubeLoading .h1.w1.l1{z-index:-1;animation-name:h1w1l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w1l1{0%{transform:translate(0%,-100%)}14%{transform:translate(-50%,-125%)}28%{transform:translate(0%,-150%)}43%{transform:translate(0%,-200%)}57%{transform:translate(50%,-175%)}71%{transform:translate(0%,-150%)}85%{transform:translate(0%,-100%)}100%{transform:translate(0%,-100%)}}.h1.w1.l2{z-index:-1;animation-name:h1w1l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w1l2{0%{transform:translate(50%,-75%)}14%{transform:translate(50%,-75%)}28%{transform:translate(100%,-100%)}43%{transform:translate(100%,-150%)}57%{transform:translate(100%,-150%)}71%{transform:translate(50%,-125%)}85%{transform:translate(50%,-75%)}100%{transform:translate(50%,-75%)}}.h1.w1.l3{z-index:-1;animation-name:h1w1l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w1l3{0%{transform:translate(100%,-50%)}14%{transform:translate(150%,-25%)}28%{transform:translate(200%,-50%)}43%{transform:translate(200%,-100%)}57%{transform:translate(150%,-125%)}71%{transform:translate(100%,-100%)}85%{transform:translate(100%,-50%)}100%{transform:translate(100%,-50%)}}.h1.w2.l1{z-index:-1;animation-name:h1w2l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w2l1{0%{transform:translate(-50%,-75%)}14%{transform:translate(-100%,-100%)}28%{transform:translate(-100%,-100%)}43%{transform:translate(-100%,-150%)}57%{transform:translate(-50%,-125%)}71%{transform:translate(-50%,-125%)}85%{transform:translate(-50%,-75%)}100%{transform:translate(-50%,-75%)}}.h1.w2.l2{z-index:-1;animation-name:h1w2l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w2l2{0%{transform:translate(0%,-50%)}14%{transform:translate(0%,-50%)}28%{transform:translate(0%,-50%)}43%{transform:translate(0%,-100%)}57%{transform:translate(0%,-100%)}71%{transform:translate(0%,-100%)}85%{transform:translate(0%,-50%)}100%{transform:translate(0%,-50%)}}.h1.w2.l3{z-index:-1;animation-name:h1w2l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w2l3{0%{transform:translate(50%,-25%)}14%{transform:translate(100%,0%)}28%{transform:translate(100%,0%)}43%{transform:translate(100%,-50%)}57%{transform:translate(50%,-75%)}71%{transform:translate(50%,-75%)}85%{transform:translate(50%,-25%)}100%{transform:translate(50%,-25%)}}.h1.w3.l1{z-index:-1;animation-name:h1w3l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w3l1{0%{transform:translate(-100%,-50%)}14%{transform:translate(-150%,-75%)}28%{transform:translate(-200%,-50%)}43%{transform:translate(-200%,-100%)}57%{transform:translate(-150%,-75%)}71%{transform:translate(-100%,-100%)}85%{transform:translate(-100%,-50%)}100%{transform:translate(-100%,-50%)}}.h1.w3.l2{z-index:-1;animation-name:h1w3l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w3l2{0%{transform:translate(-50%,-25%)}14%{transform:translate(-50%,-25%)}28%{transform:translate(-100%,0%)}43%{transform:translate(-100%,-50%)}57%{transform:translate(-100%,-50%)}71%{transform:translate(-50%,-75%)}85%{transform:translate(-50%,-25%)}100%{transform:translate(-50%,-25%)}}.h1.w3.l3{z-index:-1;animation-name:h1w3l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w3l3{0%{transform:translate(0%,0%)}14%{transform:translate(50%,25%)}28%{transform:translate(0%,50%)}43%{transform:translate(0%,0%)}57%{transform:translate(-50%,-25%)}71%{transform:translate(0%,-50%)}85%{transform:translate(0%,0%)}100%{transform:translate(0%,0%)}}.h2.w1.l1{z-index:-2;animation-name:h2w1l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w1l1{0%{transform:translate(0%,-50%)}14%{transform:translate(-50%,-75%)}28%{transform:translate(0%,-100%)}43%{transform:translate(0%,-100%)}57%{transform:translate(50%,-75%)}71%{transform:translate(0%,-50%)}85%{transform:translate(0%,-50%)}100%{transform:translate(0%,-50%)}}.h2.w1.l2{z-index:-2;animation-name:h2w1l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w1l2{0%{transform:translate(50%,-25%)}14%{transform:translate(50%,-25%)}28%{transform:translate(100%,-50%)}43%{transform:translate(100%,-50%)}57%{transform:translate(100%,-50%)}71%{transform:translate(50%,-25%)}85%{transform:translate(50%,-25%)}100%{transform:translate(50%,-25%)}}.h2.w1.l3{z-index:-2;animation-name:h2w1l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w1l3{0%{transform:translate(100%,0%)}14%{transform:translate(150%,25%)}28%{transform:translate(200%,0%)}43%{transform:translate(200%,0%)}57%{transform:translate(150%,-25%)}71%{transform:translate(100%,0%)}85%{transform:translate(100%,0%)}100%{transform:translate(100%,0%)}}.h2.w2.l1{z-index:-2;animation-name:h2w2l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w2l1{0%{transform:translate(-50%,-25%)}14%{transform:translate(-100%,-50%)}28%{transform:translate(-100%,-50%)}43%{transform:translate(-100%,-50%)}57%{transform:translate(-50%,-25%)}71%{transform:translate(-50%,-25%)}85%{transform:translate(-50%,-25%)}100%{transform:translate(-50%,-25%)}}.h2.w2.l2{z-index:-2;animation-name:h2w2l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w2l2{0%{transform:translate(0%,0%)}14%{transform:translate(0%,0%)}28%{transform:translate(0%,0%)}43%{transform:translate(0%,0%)}57%{transform:translate(0%,0%)}71%{transform:translate(0%,0%)}85%{transform:translate(0%,0%)}100%{transform:translate(0%,0%)}}.h2.w2.l3{z-index:-2;animation-name:h2w2l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w2l3{0%{transform:translate(50%,25%)}14%{transform:translate(100%,50%)}28%{transform:translate(100%,50%)}43%{transform:translate(100%,50%)}57%{transform:translate(50%,25%)}71%{transform:translate(50%,25%)}85%{transform:translate(50%,25%)}100%{transform:translate(50%,25%)}}.h2.w3.l1{z-index:-2;animation-name:h2w3l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w3l1{0%{transform:translate(-100%,0%)}14%{transform:translate(-150%,-25%)}28%{transform:translate(-200%,0%)}43%{transform:translate(-200%,0%)}57%{transform:translate(-150%,25%)}71%{transform:translate(-100%,0%)}85%{transform:translate(-100%,0%)}100%{transform:translate(-100%,0%)}}.h2.w3.l2{z-index:-2;animation-name:h2w3l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w3l2{0%{transform:translate(-50%,25%)}14%{transform:translate(-50%,25%)}28%{transform:translate(-100%,50%)}43%{transform:translate(-100%,50%)}57%{transform:translate(-100%,50%)}71%{transform:translate(-50%,25%)}85%{transform:translate(-50%,25%)}100%{transform:translate(-50%,25%)}}.h2.w3.l3{z-index:-2;animation-name:h2w3l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w3l3{0%{transform:translate(0%,50%)}14%{transform:translate(50%,75%)}28%{transform:translate(0%,100%)}43%{transform:translate(0%,100%)}57%{transform:translate(-50%,75%)}71%{transform:translate(0%,50%)}85%{transform:translate(0%,50%)}100%{transform:translate(0%,50%)}}.h3.w1.l1{z-index:-3;animation-name:h3w1l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w1l1{0%{transform:translate(0%,0%)}14%{transform:translate(-50%,-25%)}28%{transform:translate(0%,-50%)}43%{transform:translate(0%,0%)}57%{transform:translate(50%,25%)}71%{transform:translate(0%,50%)}85%{transform:translate(0%,0%)}100%{transform:translate(0%,0%)}}.h3.w1.l2{z-index:-3;animation-name:h3w1l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w1l2{0%{transform:translate(50%,25%)}14%{transform:translate(50%,25%)}28%{transform:translate(100%,0%)}43%{transform:translate(100%,50%)}57%{transform:translate(100%,50%)}71%{transform:translate(50%,75%)}85%{transform:translate(50%,25%)}100%{transform:translate(50%,25%)}}.h3.w1.l3{z-index:-3;animation-name:h3w1l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w1l3{0%{transform:translate(100%,50%)}14%{transform:translate(150%,75%)}28%{transform:translate(200%,50%)}43%{transform:translate(200%,100%)}57%{transform:translate(150%,75%)}71%{transform:translate(100%,100%)}85%{transform:translate(100%,50%)}100%{transform:translate(100%,50%)}}.h3.w2.l1{z-index:-3;animation-name:h3w2l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w2l1{0%{transform:translate(-50%,25%)}14%{transform:translate(-100%,0%)}28%{transform:translate(-100%,0%)}43%{transform:translate(-100%,50%)}57%{transform:translate(-50%,75%)}71%{transform:translate(-50%,75%)}85%{transform:translate(-50%,25%)}100%{transform:translate(-50%,25%)}}.h3.w2.l2{z-index:-3;animation-name:h3w2l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w2l2{0%{transform:translate(0%,50%)}14%{transform:translate(0%,50%)}28%{transform:translate(0%,50%)}43%{transform:translate(0%,100%)}57%{transform:translate(0%,100%)}71%{transform:translate(0%,100%)}85%{transform:translate(0%,50%)}100%{transform:translate(0%,50%)}}.h3.w2.l3{z-index:-3;animation-name:h3w2l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w2l3{0%{transform:translate(50%,75%)}14%{transform:translate(100%,100%)}28%{transform:translate(100%,100%)}43%{transform:translate(100%,150%)}57%{transform:translate(50%,125%)}71%{transform:translate(50%,125%)}85%{transform:translate(50%,75%)}100%{transform:translate(50%,75%)}}.h3.w3.l1{z-index:-3;animation-name:h3w3l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w3l1{0%{transform:translate(-100%,50%)}14%{transform:translate(-150%,25%)}28%{transform:translate(-200%,50%)}43%{transform:translate(-200%,100%)}57%{transform:translate(-150%,125%)}71%{transform:translate(-100%,100%)}85%{transform:translate(-100%,50%)}100%{transform:translate(-100%,50%)}}.h3.w3.l2{z-index:-3;animation-name:h3w3l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w3l2{0%{transform:translate(-50%,75%)}14%{transform:translate(-50%,75%)}28%{transform:translate(-100%,100%)}43%{transform:translate(-100%,150%)}57%{transform:translate(-100%,150%)}71%{transform:translate(-50%,125%)}85%{transform:translate(-50%,75%)}100%{transform:translate(-50%,75%)}}.h3.w3.l3{z-index:-3;animation-name:h3w3l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w3l3{0%{transform:translate(0%,100%)}14%{transform:translate(50%,125%)}28%{transform:translate(0%,150%)}43%{transform:translate(0%,200%)}57%{transform:translate(-50%,175%)}71%{transform:translate(0%,150%)}85%{transform:translate(0%,100%)}100%{transform:translate(0%, 100%)}}</style><div id="cubeLoading" class=""><div class="h1Container"><div class="cube h1 w1 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w1 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w1 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w2 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w2 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w2 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w3 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w3 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w3 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div></div><div class="h2Container"><div class="cube h2 w1 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w1 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w1 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w2 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w2 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w2 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w3 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w3 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w3 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div></div><div class="h3Container"><div class="cube h3 w1 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w1 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w1 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w2 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w2 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w2 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w3 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w3 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w3 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div></div></div>`;
/*]]>*/</script>
Chỉ cần viết nội dung của riêng bạn bên trong phần được đánh dấu.
Lời kết
Đây là tất cả về Cách tạo một blogger Safelink Like Plus Ui? Tôi hy vọng bạn thích bài viết này. Xin vui lòng chia sẻ bài viết này. Và nếu bạn đang gặp vấn đề trong bất kỳ phần nào hoặc bạn có bất kỳ câu hỏi nào, hãy hỏi chúng tôi
Tags:
Blogger
Tìm lâu lắm rồi mới thấy ý :))))