Today we are discussing on the topic "How to make safelink like Plus UI?". Hope this article would be useful for both you and your shared ones! Do check our blog regularly in case there might be an update.
So first of all, we all know that Plus UI is becoming rapidly famous.
It uses safelink of two kinds -- one manual and one auto safelink.
for manual, you need to create two pages -- one is safelink generator page and other is redirected destination page.
Now Just Follow Step 1:
<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>
</head>
<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>
<input id="link-to" type="text" placeholder="Enter your link" />
</div>
<!--[Config]-->
<div id="advanced" style="display:none;">
<label>Input your redirect page link</label>
<br>
<input id="link-page" type="text" value="
https://apkindia.xyz/p/r2.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>Now Follow Step 2:
Create One More Page Or Post On Your Blog.....Now Past The Code On Your r2 Page
<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>
</head>
<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>Please wait !</h3>
<center>Drag the mouse down a bit, and wait for about 5 seconds!</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>
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 = "Looking for your link..";
await sleep(200 * d);
note.innerHTML = "Loading your link";
await sleep(400 * d);
note.innerHTML = "Almost done..." + randomEmoij();
await sleep(200 * d);
note.innerHTML = randomEmoij();
await sleep(50 * d);
note.innerHTML = "Wait a minute!" + randomEmoij();
await sleep(150 * d);
note.innerHTML = "Link is ready to visit!";
}
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>
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>
Conclusion
This is all about How to make a Safelink Like Plus Ui On blogger? I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us.