Membuat Link Download Untuk File Gambar, Plus Nambahin Gambar Download Buttonnya!

Holla Sob, Assalamu'alaikum...

Beberapa hari ini, kurang fit, dompetnya... :) Jadi ga update blog. Plus kehabisan kuota dan lagi mumet utak atik Shuriken, Scrypt AGC karya Mochammad Masbuchin. Rada bingung euy, sebab mau nambahin Link Download File Gambar untuk Blog AGC Wallpapers Admin.

Yah karena memang, Admin ga mudeng alias ngeh binti ngerti bahasa pemograman shaayyyyy... Kalo bahasa cinta, insyaallah ngerti.. xixixi... :) Btw, kalo sobat tertarik ingin mencoba Scrypt AGC Shuriken, link nya dibawah ini sob, klik aja.

Scrypt AGC Shuriken, Baca, Beli, Praktek, Monetize...

Kembali ke masa lalu, sesuai judul sob. Terkadang kita ketika membuat sebuat artikel, dan memasukkan sebuah Gambar atau Foto dengan tujuan agar bisa didownload. Memang bisa saja didownload dengan cara Klik Kanan > Download image... Tapi kan kurang keren gitu sob. Dengan sedikit kostumasi, tentu saja bisa menambahkan Link Download File Gambar Dengan Button Image ataupun hanya Text Link Biasa, intinya ga pake Klik Kana gitu deh, titik.

Nah, kali ini Admin berbagi sedikit ilmu mengenai Bagaimana Membuat Link Download Untuk File Gambar atau Foto dan Menambahkan Button Image nya. Sedikit aja sob, karena kalo banyak, ilmu Admin dikit... Bertapanya kurang lama sob, xixixi... :)

Oke, kopi udah siap, cusss ahh,, praktek!

#1. Buat Artikel, Ya iyalah...

Lalu upload sebuah Gambar atau Foto yang mau kamu bagikan atau supaya bisa didownload pembaca blog kamu, satu dulu, jangan banyak-banyak sob. Contoh, admin mau upload foto admin waktu masih ganteng dulu sob :) cieeee...

Klik gambar icon foto atau Insert Image, lalu klik Pilih file pilih gambar yang mau kamu upload, Klik 2x pada gambarnya.

Upload File Gambar atau Foto Pada Postingan Blog

Btw, ga jadilah sob upload foto admin, ganti aja foto Menara Eiffel Paris. xixixi... :)

Menara Effel Paris, Prancis

#2. Catat Link Atau URL Gambar Yang Kamu Upload

Sudah? Hahhh.. Apa? Ga tau Link atau URL Gambar nya? Ngopi dulu sob,,, Jika sudah, kalo sobat menulis di mode Compose, pindah ke mode HTML, lalu cari Link/URL gambar yang sobat upload tadi, setelah itu Copy Link/URL nya. Secara default, Link Tujuan atau Link Sourcenya sama. Cari saja kode yang diawali:

<a haref=" dan <img src

Atau kalo pada saat menulis artikel, klik Pratinjau di pojok kanan atas, lalu klik kanan gambarnya, klik Copy image address

#3. Bagaimana Menambahkan Link Downloadnya?

Untuk Text Link Download, sobat bisa menambahkan kode berikut:

<script>
function forceDownload(link){
    var url = link.getAttribute("data-href");
    var fileName = link.getAttribute("download");
    link.innerText = "OTW.. Download gambar....";
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
        link.innerText="Download Image";
    }
    xhr.send();
}
</script>
<div style="text-align: center;">
<a data-href="Link/URL gambar sobat tadi..." download="Buat Nama File Baru Disini.jpg" href="null" onclick="forceDownload(this)"><b>Download Image</b></a></div>

Ganti kode yang diblok warna merah, menyesuaikan sob :) Contoh yang sudah jadi dibawah ini :

Download Image

#3. Bagaimana Menambahkan Link Downloadnya + Download Button Image?

Sama dengan cara diatas, bedanya, tambahkan Link/URL Download Button Imagenya saja, seperti dibawah ini :

<script>
function forceDownload(link){
    var url = link.getAttribute("data-href");
    var fileName = link.getAttribute("download");
    link.innerText = "OTW.. Download gambar....";
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
        link.innerText="Download Image";
    }
    xhr.send();
}
</script>
<div style="text-align: center;">
<a data-href="Link/URL gambar sobat tadi..." download="Buat Nama File Baru Disini.jpg" href="null" onclick="forceDownload(this)" targ="_blank"><img src="Link/URL Download Button Image /></a></div>

Ganti kode yang diblok warna merah, menyesuaikan sob :)

Oke sob, sampe disini, work nggak? Nyambung ga sih penjelasan Admin? :) Selanjutnya, silahkan kamu edit saja jika mau dikostumasi. Sementara itu dulu sob, komen aja ya, haturnuhun :)