Cara membuat tombol download dengan Password

Sharingpedia.net - Baiklah sobat karena sebelumnya sempat terhalang waktu, kali ini saya akan melanjutkan artikel kemarin, yaitu cara membuat tombol download yang di protect password (Buka postingan ini untuk melihat demonya) pada Blog Blogger/Blogspot.

Saya tidak akan lama-lama lagi menjelaskan kegunaan memasang ini di blog, sobat dapat memikirkan juga apa kegunaannya. Mungkin agak ribet tapi jika sudah paham pastilah mudah untuk membuatnya.

Cara membuat tombol download dengan Password

Pada edit HTML template, Letakan kode berikut ini diatas </head>

<style>
/*Downloadbutton*/
.whitebutton { margin:20px auto; padding:20px 0; width:200px; }
.whitebutton a { background:#fff; color:#666; display:block; font-size:17px; font-weight:700; font-family:'Arial',Verdana,sans-serif; height:50px; line-height:50px; text-align:center; text-decoration:none; text-transform:uppercase; width:200px; position:relative; z-index:2; }
.whitebutton a:before { content:'\f019'; font-family:FontAwesome; font-weight:normal; padding:8px; margin-left:-12px; margin-right:6px; }
.whitebutton span { background:#444; color:#fff; display:block; font-size:12px; font-family:'Arial',Verdana,sans-serif; height:40px; line-height:40px; text-align:center; width:200px; z-index:1; text-transform:uppercase; font-weight:bold; }
.whitebutton .up { background:#e25734; margin:-25px auto; opacity:0; border-radius:0 0 5px 5px; transform:translate(0,-50px); transition:350ms; }
.whitebutton .down { margin:-30px auto; opacity:0; border-radius:5px 5px 0 0; transform:translate(0,-50px); transition:350ms; }
.whitebutton .down:before { content:'\f14a'; font-family:FontAwesome; font-weight:normal; margin-right:6px; color:#aaa; }
.whitebutton:hover .up { opacity:1; transform:translate(0,0); }
.whitebutton:hover .down { opacity:1; transform:translate(0,-90px); }
.whitebuttondemo { margin:20px auto; padding:20px 0; width:200px; }
.whitebuttondemo a { background:#e25734; color:#fff; display:block; font-size:17px; font-weight:700; font-family:'Arial',Verdana,sans-serif; height:50px; line-height:50px; text-align:center; text-decoration:none; text-transform:uppercase; width:200px; position:relative; z-index:2; transition:350ms; }
.whitebuttondemo a:before { content:'\f002'; font-family:FontAwesome; font-weight:normal; padding:8px; margin-left:-12px; margin-right:6px; }
.whitebuttondemo a:hover { color:#fff; }
.whitebuttondemo span { background:#444; color:#fff; display:block; font-size:12px; font-family:'Arial',Verdana,sans-serif; height:40px; line-height:40px; text-align:center; width:200px; z-index:1; text-transform:uppercase; font-weight:bold; }
.whitebuttondemo .up { background:#444; margin:-25px auto; opacity:0; border-radius:0 0 5px 5px; transform:translate(0,-50px); transition:350ms; }
.whitebuttondemo:hover .up { opacity:1; transform:translate(0,0); }
</style>
<script src='https://rawgit.com/Brando07/seocips/newbe/seocips-pass.js' type='text/javascript'></script>

Selanjutnya membuat postingan, dan letakkan tombol download dibawah ini ke dalam postingan dengan mode HTML (sebelahnya Compose)

<div class="whitebuttondemo">
<a href="javascript:decryptText('ca7voEsg')" >DOWNLOAD</a><br>
<span class="up">click to view</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">Download</a><br>
<span class="up">click to begin</span><br>
<span class="down">1.6MB .rar</span></div>

Ganti tanda # dengan link download milik kamu, 1.6MB .rar bisa kamu ganti juga, dengan ukuran file kamu misalnya.

Cut kode diatas dari <div class="whitebutton"> sampai ke penutupnya </div>, jadi yang kamu cut adalah bagian ini:

<div class="whitebutton">
<a href="#" target="_blank">Download</a><br>
<span class="up">click to begin</span><br>
<span class="down">1.6MB .rar</span></div>

Sekali lagi jangan lupa tanda # di ganti dengan link download milik kamu.
Kemudian buka HALAMAN INI (untuk menggunakan tools ini passwordnya : seocips)
Buat password kamu pada kotak pertama, contoh:

Kemudian pastekan kode yang kamu cut tadi pada kotak kedua, kemudian klik "Encript"

 Copy kode pada kotak ini dan letakkan di tempat pada kode yang kamu cut tadi,

contohnya menjadi:

<div class="whitebuttondemo">
<a href="javascript:decryptText('ca7voEsg')" >DOWNLOAD</a><br>
<span class="up">click to view</span></div>
<br>
<div id="zFA1iNiU" title="U2FsdGVkX1+VYHZJZlMs29EGOz9kGPKmItOlDOzbk5QEZfZJ89dWPIywEyUYX4KUoZQ9rwgqqNVtm6tRaN1MDzHiIvACwkt2YpfTt/i+A/k/ALyv7G2/JCXQHROvPRhZAp8KdoevDkPbT2lJ3nexYjhTdiyRtlXjZAqpjW0sbD/gqa05pJXwtn+FK9wBJdvlWetGrjSZCGivwgeuSFOgawPFLZt2Kzvm+k34F4AuzSal161BP5dT+D+WYtIZ/XXsaFW9buNFwAj07r7+A027rVmCr6cl5RVQbEf0vL/Am1o=">
<a href="javascript:decryptText('zFA1iNiU')">Show encrypted text</a></div>

Ganti kode berwarna kuning diatas dengan kode berwarna hijau (kode warna hijau itu adalah kode yang kamu buat tadi sesuaikan dengan kode milik kamu karena pastinya kode-nya ini lain lagi dengan milik kamu dan gantikan ke kode warna kuning), kemudian hapus kode warna merah.

Selanjutnya pada postingan, masih dalam mode HTML dan letakkan kode yang sudah kamu buat tadi di tempat yang kamu inginkan. Nah selamat, kamu telah selesai membuat tombol download yang di-protect password pada Blogspot.

Baiklah sobat semua, Itulah Artikel Tentang Cara membuat tombol download dengan Password Gimana sobat, agak ribet kan? selamat mencoba ya.