Cara Membuat Safelink Converter Di Blog Utama Tanpa jQuery

Cara Membuat Safelink Converter Di Blog Utama Tanpa jQuery - Tutorial terpilih kali ini mengenai cara membuat safelink converter di blog. Kami membuat postingan tentang cara membuat safelink converter di blog karena mungkin ada yang mencari informasi cara membuat safelink converter dengan mudah Tanpa jQuery di blog.

Cara membuat safelink di blog,cara membuat safelink generator,cara membuat safelink converter di blog,cara buat safelink converter blogger,

Tutorial cara membuat safelink converter di blog bisa kalian pasang di blog mengunakan beberapa kode sederhana di bawah ini. Kode yang di butuhkan untuk memasang membuat safelink converter di blog hanya perlu copy paste dari postingan ini.

Cara Membuat Safelink Converter Di Blog Utama

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letakkan di atas kode </head>. copy kode CSS berikut ini kemudian pastekan diatas kode </head>

<style>
/*<![CDATA[*/
.generator-safelink {
    position: relative;
    display: block;
    margin: auto;
    padding: 20px 0;
    max-width: 800px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.5;
}
.form-safelink {
    position: relative;
    display: block;
    margin: 5px 0;
    padding: 10px;
    width: 100%;
}
.form-safelink.output,
.tombol-copy-reset {
    display: none;
}
.form-safelink label {
    position: relative;
    display: block;
    margin: 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: #444;
}
.form-safelink span {
    position: relative;
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    color: #444;
}
.form-safelink input {
    position: relative;
    display: block;
    margin: auto;
    padding: 10px 15px;
    width: 100%;
    background: #ebeff3;
    color: #444;
    border: none;
    outline: 0;
    border-radius: 5px;
}
.form-safelink input:focus,
.form-safelink input:hover {
    background: #fff;
    border: 1px solid #ebeff3;
}
.form-safelink:after {
    position: absolute;
    content: "";
    left: 10px;
    bottom: 10px;
    background: #007bff;
    color: #fff;
    padding: 5px 15px 7px 15px;
    border-radius: 5px 0 0 5px;
    font-size: 12px;
    line-height: 2;
    z-index: 2;
}
.form-safelink.input input {
    width: 100%;
    padding: 10px 15px 10px 65px;
}
.form-safelink.output input {
    width: 100%;
    padding: 10px 15px 10px 75px;
}
.form-safelink.input:after {
    content: "Link :";
}
.form-safelink.output:after {
    content: "Result :";
}
button#get-button-safelink {
    color: #fff;
    background-color: #007bff;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: 0;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 15px;
    margin: 0 auto;
}
button#copy-safelink,button#reset-safelink {
    color: #fff;
    background-color: #007bff;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: 0;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 15px;
    margin: 0 auto;
}
.auto-safelink {
    background: #00626b;
    color: #fff;
    display: inline-block;
    padding: 5px 20px;
    margin: 10px 0;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}
.auto-safelink:active,
.auto-safelink:hover {
    background: #318e8e;
}
#menuju-link {
    display: none;
}
#gotolink,
#progress-bar {
    position: relative;
    margin: 25px auto;
    text-align: center;
}
#menuju-link,
.proses-link {
    margin: 35px 0;
}
.proses-link {
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #00626b;
}
#menuju-link,
#progress-bar .generate-link {
    background: #00626b;
    color: #fff;
    display: none;
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}
#menuju-link:active,
#menuju-link:hover,
#progress-bar .generate-link:active,
#progress-bar .generate-link:hover {
    background: #318e8e;
}
.circular {
    height: 100px;
    width: 100px;
    position: relative;
    margin: auto;
}
.circular .inner {
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;
    height: 80px;
    width: 80px;
    margin: -40px 0 0 -40px;
    background: #fff;
    border-radius: 100%;
}
.circular .number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    font-size: 18px;
    font-weight: 500;
    color: #00626b;
}
.circular .bar {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #fff;
    -webkit-border-radius: 100%;
    clip: rect(0, 100px, 100px, 50px);
}
.circle .bar .progress {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-border-radius: 100%;
    clip: rect(0, 50px, 100px, 0);
    background: #00626b;
    background: -moz-linear-gradient(left, #00626b 0, #318e8e 60%, #00f7ca 100%);
    background: -webkit-linear-gradient(left, #00626b 0, #318e8e 60%, #00f7ca 100%);
    background: linear-gradient(to right, #00626b 0, #318e8e 60%, #00f7ca 100%);
}
.circle .left .progress {
    z-index: 1;
    animation: left 4s linear both;
}
@keyframes left {
    100% {
        transform: rotate(180deg);
    }
}
.circle .right {
    transform: rotate(180deg);
    z-index: 3;
}
.circle .right .progress {
    animation: right 4s linear both;
    animation-delay: 4s;
}
@keyframes right {
    100% {
        transform: rotate(180deg);
    }
}
/*]]>*/
</style>

Selanjutnya, copy kode Javascript berikut ini kemudian pasatekan diatas kode </body>

<script>
//<![CDATA[
//Pengaturan Umum
var keyGenerator = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+/=";  
var teksGenerate = "Generate Link";
var teksGetLink = "Lihat Link";
var timerButton = 15;
var capubAds = "ca-pub-xxxxxxxxxxxxxxxx";
var IDslotAds = "xxxxxxxxx";

// Encode Url
var base64 = {
    _keyStr: keyGenerator,
    key: function (e) {
        var t,
            n,
            r,
            a,
            o,
            i,
            l,
            c = "",
            d = 0;
        for (e = base64._utf8_key(e); d < e.length; )
            (a = (t = e.charCodeAt(d++)) >> 2),
                (o = ((3 & t) << 4) | ((n = e.charCodeAt(d++)) >> 4)),
                (i = ((15 & n) << 2) | ((r = e.charCodeAt(d++)) >> 6)),
                (l = 63 & r),
                isNaN(n) ? (i = l = 64) : isNaN(r) && (l = 64),
                (c = c + this._keyStr.charAt(a) + this._keyStr.charAt(o) + this._keyStr.charAt(i) + this._keyStr.charAt(l));
        return c;
    },
    _utf8_key: function (e) {
        e = e.replace(/\r\n/g, "\n");
        for (var t = "", n = 0; n < e.length; n++) {
            var r = e.charCodeAt(n);
            r < 128
                ? (t += String.fromCharCode(r))
                : r > 127 && r < 2048
                ? ((t += String.fromCharCode((r >> 6) | 192)), (t += String.fromCharCode((63 & r) | 128)))
                : ((t += String.fromCharCode((r >> 12) | 224)), (t += String.fromCharCode(((r >> 6) & 63) | 128)), (t += String.fromCharCode((63 & r) | 128)));
        }
        return t;
    },
};

//Tombol Tools Generate Safelink
function getSafelink() {
    var e = new XMLHttpRequest();
    (e.onreadystatechange = function () {
        if (e.readyState == XMLHttpRequest.DONE) {
            var t = "",
                n = JSON.parse(e.responseText).feed.entry,
                r = new Array();
            if (void 0 !== n) {
                for (var a = 0; a < n.length; a++) {
                    for (var o = 0; o < n[a].link.length; o++)
                        if ("alternate" == n[a].link[o].rel) {
                            t = n[a].link[o].href;
                            break;
                        }
                    r[a] = t;
                    var i = Math.random() * r.length;
                    i = parseInt(i);
                }
                var l = document.getElementById("urlSafelink").value,
                    c = r[i] + "?url=" + base64.key(l),
                    d = document.getElementById("output-safelink");
                null != d && (d.value = c);
            }
        }
    }),
        e.open("GET", "/feeds/posts/summary?alt=json", !0),
        e.send(null),
        (document.querySelector(".input").style.display = "none"),
        (document.querySelector(".output").style.display = "block"),
        (document.querySelector(".tombol-copy-reset").style.display = "block"),
        (document.getElementById("get-button-safelink").style.display = "none");
}
function copySafelink() {
    document.getElementById("output-safelink").select(), document.execCommand("copy"), (document.getElementById("text-keterangan").innerHTML = "Url berhasil disalin"), (document.getElementById("text-keterangan").style.margin = "10px 0");
}
function resetSafelink() {
    window.location.href = window.location.href;
}
window.onload = function () {
    var e = document.getElementById("get-button-safelink");
    null != e && ((e.onclick = getSafelink), (document.getElementById("copy-safelink").onclick = copySafelink), (document.getElementById("reset-safelink").onclick = resetSafelink));
};

// Tombol Auto Safelink
var autoSafelink = document.querySelectorAll(".auto-safelink");
if (null != autoSafelink)
    for (var i = 0; i < autoSafelink.length; i++)
        autoSafelink[i].addEventListener("click", function () {
            var e = this.getAttribute("data-link"),
                t = new XMLHttpRequest();
            (t.onreadystatechange = function () {
                if (t.readyState == XMLHttpRequest.DONE) {
                    var n = "",
                        r = JSON.parse(t.responseText).feed.entry,
                        a = new Array();
                    if (void 0 !== r) {
                        for (var o = 0; o < r.length; o++) {
                            for (var i = 0; i < r[o].link.length; i++)
                                if ("alternate" == r[o].link[i].rel) {
                                    n = r[o].link[i].href;
                                    break;
                                }
                            a[o] = n;
                            var l = Math.random() * a.length;
                            l = parseInt(l);
                        }
                        var c = a[l] + "?url=" + base64.key(e);
                        window.open(c, "_blank");
                    }
                }
            }),
                t.open("GET", "/feeds/posts/summary?alt=json", !0),
                t.send(null);
        });

//Mengambil Kode Hasil Generate Pada Paramater ?Url=
function getVariable(e) {
    for (
        var t = {
                _keyStr: keyGenerator,
                key: function (e) {
                    var n,
                        r,
                        a,
                        o,
                        i,
                        l,
                        c = "",
                        d = 0;
                    for (e = e.replace(/[^A-Za-z0-9\+\/\=]/g, ""); d < e.length; )
                        (n = (this._keyStr.indexOf(e.charAt(d++)) << 2) | ((o = this._keyStr.indexOf(e.charAt(d++))) >> 4)),
                            (r = ((15 & o) << 4) | ((i = this._keyStr.indexOf(e.charAt(d++))) >> 2)),
                            (a = ((3 & i) << 6) | (l = this._keyStr.indexOf(e.charAt(d++)))),
                            (c += String.fromCharCode(n)),
                            64 != i && (c += String.fromCharCode(r)),
                            64 != l && (c += String.fromCharCode(a));
                    return (c = t._utf8_key(c));
                },
                _utf8_key: function (e) {
                    for (var t = "", n = 0, r = (c1 = c2 = 0); n < e.length; )
                        (r = e.charCodeAt(n)) < 128
                            ? ((t += String.fromCharCode(r)), n++)
                            : r > 191 && r < 224
                            ? ((c2 = e.charCodeAt(n + 1)), (t += String.fromCharCode(((31 & r) << 6) | (63 & c2))), (n += 2))
                            : ((c2 = e.charCodeAt(n + 1)), (c3 = e.charCodeAt(n + 2)), (t += String.fromCharCode(((15 & r) << 12) | ((63 & c2) << 6) | (63 & c3))), (n += 3));
                    return t;
                },
            },
            n = window.location.search.substring(1).split("&"),
            r = 0;
        r < n.length;
        r++
    ) {
        var a = n[r].split("=");
        if (a[0] == e) return t.key(a[1]);
    }
    return !1;
}

// Cek Paramater ?url=
let cekUrlSafelink = getVariable("url");

//Generate Link (decode)
if (0 != cekUrlSafelink) {
    document.getElementById("progress-bar").innerHTML =
        '<div class="circular" style="transform: scale(0.6)"><div class="inner"></div><div class="number"></div><div class="circle"><div class="bar left"><div class="progress"></div></div><div class="bar right"><div class="progress"></div></div></div></div><div class="generate-link">' +
        teksGenerate +
        "</div>";
    const e = document.querySelector(".number");
    let t = 0;
    function gotoLink() {
        var e = document.getElementById("gotolink"),
            t = e.offsetTop;
        window.scrollTo(0, t),
            (e.innerHTML =
                "<ins class='adsbygoogle' data-ad-client='"+capubAds+"' data-ad-format='fluid' data-ad-layout='in-article' data-ad-slot='"+IDslotAds+"' style='display:block; text-align:center;'></ins><div class='proses-link'></div><div id='menuju-link'>" +
                teksGetLink +
                "</div><ins class='adsbygoogle' data-ad-client='"+capubAds+"' data-ad-format='fluid' data-ad-layout='in-article' data-ad-slot='"+IDslotAds+"' style='display:block; text-align:center;'></ins>"),
            (document.getElementById("menuju-link").onclick = function () {
                var e = cekUrlSafelink;
                window.open(e, "_self");
            });
        var n = timerButton;
        setInterval(function () {
            n <= 1
                ? ((document.getElementById("menuju-link").style.display = "inline-block"), (document.querySelector(".proses-link").style.display = "none"))
                : ((document.getElementById("menuju-link").style.display = "none"), (document.querySelector(".proses-link").innerHTML = "Link will appear in " + --n + " second"));
        }, 1e3);
    }
    setInterval(() => {
        100 == t
            ? (clearInterval(), (document.querySelector(".generate-link").style.display = "inline-block"), (document.querySelector(".circular").style = "display:none;transform: scale(0.6)"))
            : ((t += 1), (e.textContent = t + "%"), (document.querySelector(".generate-link").style.display = "none"));
    }, 80),
        (document.querySelector("#progress-bar").onclick = gotoLink);
    var uri = window.location.toString();
    if (uri.indexOf("?", "?") > 0) {
        var clean_uri = uri.substring(0, uri.indexOf("?"));
        window.history.replaceState({}, document.title, clean_uri);
    }
	
	//Clean Parameter ?url=
    function clickIE4() {
        return 2 != event.button && void 0;
    }
    function clickNS4(e) {
        return (!(document.layers || (document.getElementById && !document.all)) || (2 != e.which && 3 != e.which)) && void 0;
    }
    document.layers ? (document.captureEvents(Event.MOUSEDOWN), (document.onmousedown = clickNS4)) : document.all && !document.getElementById && (document.onmousedown = clickIE4), (document.oncontextmenu = new Function("return false"));
}
//]]>
</script>

Keterangan:

Kalian bisa mengubah kode script diatas sesuai kebutuhan pada tulisan generate link, lihat link, kode Google Adsense, kode Slot ID Adsense. Secara default script safelink ini diambil sesuai random postingan, bila kalian ingin random page bisa mengubah url /feeds/posts/summary?alt=json menjadi /feeds/pages/summary?alt=json. Setelah dimodif Anda bisa minify scriptnya ke https://javascript-minifier.com/

Selanjutnya, cari kode <data:post.body/> bila sudah ketemu lalu tambahkan kode  <div id='progress-bar'/> tepat diatasnya dan kode <div id='gotolink'/> dibawahnya.

Keterangan:

Pastikan kode tersebut tampil pada halaman postingan saja, oleh karena itu silahkan cek apakah <data:post.body/> sudah terbungkus tag conditional atau belum. Selengkapnya bisa anda lihat tutorial terkait dengan tag conditional pada blogger terbaru

Dan Terakhir, Save Template

Cara Penggunaan Auto Safelin Di Blog

Ada dua cara untuk penggunaan safelink ini, yaitu generate manual dengan tools generate safelink dan menggunakan kode pemanggil.

Generate Link dengan Tools Generate Safelink

Untuk penggunaan auto safelink secara manual anda perlu membuat tools generate terlebih dahulu, caranya sebagai berikut:

  1. Menuju menu laman (page) dan buat halaman baru beri judul misalnya "generate"
  2. Ganti mode compose menjadi mode HTML
  3. Copy kode HTML dibawah ini dan pastekan di postingan
  4. Publikasikan Halaman

Pastekan Kode Berikut Di Postingan Pada Mode HTML

<div class='generator-safelink'>
  <div class='form-safelink input'>
    <label for='safelink'>Masukan Url Anda Dibawah Ini</label>
    <input name='safelink' id='urlSafelink' placeholder='Input Link Disini' type='text'/>
  </div>
  <div class='tombol-get'>
    <button id='get-button-safelink'>Generate Link</button>
  </div>
  <div class='form-safelink output'>
    <label for='safelink'>Result</label>
    <input name='safelink' id='output-safelink' placeholder='Input Link Disini' type='text' readonly='readonly'/>
  </div>
  <div class='tombol-copy-reset'>
    <div id='text-keterangan'></div>
    <button id='copy-safelink'>Copy Link</button>
    <button id='reset-safelink'>Reset</button>
  </div>
</div>

Setelah membuat halaman tool "generate" bearti kalian sudah bisa memprotect link agar saat klik digenerate terlebih dulu ke postingan milik Anda.

Safelink Auto Generate dengan Kode Pemanggil

Untuk penggunaan auto safelink dengan kode pemanggil kalian tidak butuh tools safelink, kalian cukup langsung input link unduhan, tutorial atau lainnya dengan format kode class='auto-safelink' dan attribut data-link untuk penempatan linknya. Anda bisa lihat contoh dibawah ini:

<div class='auto-safelink' data-link='https://google-drive.com'>Unduh File</div>

Secara default kode ini akan menjadi tombol dengan warna hijau, untuk mengubah warna dan tombol Anda bisa setting di Kode CSS, dan untuk memposisikan tombol berada ditengah Anda bisa menambahkan kode CSS dibawah ini

.center{
    position:relative;
   display:block;
   margin: auto;
   text-align: center;
}

untuk kode lengkapnya akan menjadi seperti dibawah ini:

<div class='center'><div class='auto-safelink' data-link='https://google-drive.com'>Unduh File</div></div>

Terimakasih sudah membaca artikel kami tentang Cara Membuat Safelink Converter Di Blog Utama Tanpa jQuery. Kami membuat postingan ini karena mungkin ada yang mencari informasi tentang Cara membuat safelink di blog,cara membuat safelink generator,cara membuat safelink converter di blog,cara buat safelink random artikel,safelink converter blogger, Smoga bermanfaat..