Baiklah sobat karena sebelumnya sempat terhalang dengan kasus dwi purnomo penipu, 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:
Kotak Password

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

Kotak ke 2
Kotak ke 3

 Copy code pada kotak ini dan letakan di tempat pada kode yang camu cut tadi,

Kotak ke 4
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 kodenya 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 letakan 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.

Gimana, agak ribet kan? selamat mencoba.
0 Komentar untuk "Artikel kelanjutan cara membuat tombol download dengan Password"