Cara Membuat Auto Safelink di Blog Utama Pada Template Blogger

www.azid45.web.id - Cara Membuat Auto Safelink di Blog Utama Pada Template Blogger. Assalamualaikum.wr.wb semuanya, kesempatan kali ini saya share tentang safelink diblog utama. Sebenarnya saya sudah pernah menulis tutorial tentang Membuat Safelink Sendiri Dibog Utama yang mana hasil rewrite dari blog jagodesign dan scriptnya sedikit saya modif.

Lalu mengapa saya membagi tutorial tentang safelink lagi?, pertanyaan ini akan saya jawab berupa perbandingan. Untuk safelink yang pernah saya share sendiri sebenarnya masih ada kelemahan - kelemahan yang perlu diperbaiki seperti semua link aktif secara otomatis akan digenerate linknya hal ini tentunya akan meresahkan pengunjung. 

Selain itu safelink yang pernah saya share belum random post sehingga kurang bagus untuk peforma blogger. Dari sinilah kemudian saya membagikan tutorial dengan tema yang sama akan tetapi menggunakan script yang sudah 100% berbeda dan lebih sederhana.

Auto safelink ini juga memiliki dua model generate, yang pertama melalui tools generate safelink dan yang kedua menggunakan format kode tertentu sehingga langsung kegenerate langsung tanpa perlu menggunakan tools generate safelink. Ditambah lagi auto safelink ini tidak menggunakan library jQuery sehingga performa blog Anda akan tetap cepat.

Baiklah bila Anda tertarik untuk memasang safelink diblog utama tanpa jQuery Anda bisa menyimak tutorialnya berikut ini:

Memasang Kode CSS dan Javascript Safelink Diblog Utama

Pertama, masuk ke akun blogger - menu tema - edit HTML

Kedua, 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>

Keterangan:

Anda bisa memodifikasi tampilan melalui CSS tersebut, bila sudah final Anda bisa minify CSS ini dengan tools minifer CSS di https://cssminifier.com/

Ketiga, 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:

Anda bisa mengubah kode pengaturan umum dan memodifikasi script sesuai kebutuhan seperti tulisan generate link, lihat link, kode Google Adsense, kode Slot ID Adsense. Secara default safelink ini diambil sesuai random postingan, bila ingin random page (halaman) Anda 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/

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

Keterangan:

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

Terakhir, Save Template

Cara Penggunaan Auto Safelink

Ada dua cara untuk penggunaan safelink ini sebagaimana yang sudah saya jelaskan diatas, 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:

Pertama, menuju menu laman (page) dan buat halaman baru

Kedua, ganti mode compose menjadi mode HTML (klik icon pencil)

Ketiga, copy kode HTML dibawah ini dan pastekan di post halaman yang Anda buat pada point kedua

<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>

Keempat, Publikasikan Halaman

Setelah membuat tools generate Anda sudah bisa memprotect link Anda agar saat klik digenerate terlebih dulu ke postingan milik Anda.

Auto Generate dengan Kode Pemanggil

Untuk penggunaan auto safelink dengan kode pemanggil Anda tidak butuh tools safelink, Anda 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>

Demikianlah tutorial tentang Cara Membuat Safelink Diblog Pada Blog Utama Tanpa jQuery. Semoga bermanfaat. Amin