Kemarin saya mendapat ide ingin membuat content locker atau bisa dikatakan klik subscribe untuk mengunduh atau bisa juga di bilang masukan kata kunci atau pada captcha jika kode sama maka konten akan tampil dengan fungsi callback.
namun pada saat saya mengerjakan elemen yang satu ini pikiran saya bertuju ke hal lain. Di saat sudah jadi kenapa yang saya buat malah jadi mirip dengan Google Recaptcha ?. Bingung saya namun yang membedakan ialah tidak menggunakan kode bergambar melainkan kode dengan bentuk angka.
Sedikit bermanfaat sih apabila kita ingin mencoba menyembunyikan konten ini untuk menghindari copy paste link unduhan oleh orang lain, maka dari itu saya buat ini.
kalian juga dapat menerapkan ini di blog sobat dengan mengikuti tahap demi tahap yang saya berikan. Tapi saya tidak menjamin kode dapat di render di semua broswer namun pada intinya saya menggunakan jquery dan jquery itu sebenranya kumpulan kode menggunakan javascript jadi mudah-mudahan tidak ada isu pada kompatibilitas pada browser lain selain chrome.
pertama kita buat dahulu susunan tag style kosong layaknya di bawah ini.
<style type="text/css">
</style>eh ingat loh ! kita ingin itu tampil pada postingan blog saja jadi kita sisipkan tag kondisional blogger.
<b:if cond='data:view.isPost'>
<style type="text/css">
</style>
</b:if>nah kalian tempelkan kode di atas tepat di bagian bawah dari </b:skin>.
setelah itu kita rancang bagian-bagian CSS pada tag style .
silahkan salin kode di bawah dan taruh di bagian style yang sudah kita buat.Jadi nya seperti ini.
<b:if cond='data:view.isPost'>
<style type="text/css">
.passprotective{width:100%;height:auto;margin:0 auto;display:block;position:relative;background:#3F51B5;height:100%;padding:10px}
.hide-by-pass{display:block;margin:0 auto;padding:20px;max-width:400px;position:relative;background:#ffffff;font-family:'Roboto',sans-serif}
input,button{outline:none!important}
input{border:none!important}
#pass-input-bypass{width:100%;padding:12px 20px;margin:8px 0;display:inline-block;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}
.content-pass-protected{margin-top:1em;margin-bottom:1em;display:block;position:relative;padding:5px 5px}
.btn-center{text-align:center}
#btn_reload{display:inline-block;padding:3px 9px;border:0.1em solid #fb2718;margin:0 1em;border-radius:5px;box-sizing:border-box;text-decoration:none;font-family:'Roboto',sans-serif;font-weight:300;color:#fb2718;background:transparent;cursor:pointer;text-align:center;transition:all 0.2s}
.btn-down{display:inline-block;padding:0.35em 1.2em;border:0.1em solid #555;margin:0;border-radius:0.12em;box-sizing:border-box;text-decoration:none;font-family:'Roboto',sans-serif;font-weight:300;color:#555;text-align:center;transition:all 0.2s}
.btn-down:hover{color:#fff;background-color:#555}
@media all and (max-width:30em){.btn-down{display:block;margin:0.4em auto}}
.title-wrp{color:#e65045;vertical-align:baseline;font-family:'Roboto',sans-serif;font-size:15px;margin:0;white-space:normal;word-break:break-word;padding:0;font-weight:bold;text-transform:uppercase}
.hide-by-pass,#pass-input-bypass{-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}
#not-found,#has-error,#no-error{font-weight:bold;border-radius:5px;width:100%;height:100%;padding:10px}
#not-found{color:#fff;background:#4CAF50!important}
#has-error{color:#fff;background:#E91E63!important}
#no-error{color:#fff;background:#4CAF50!important}
#ticket-by{font-weight:normal;position:relative;display:block;color:#555}
#ticket-content{display:inline-block;position:relative;color:#ff3030;font-weight:bold}
</style>
</b:if>jika sudah jangan simpan template dahulu, kita cari dulu tag </body> yaitu tag penutup <body> pada baian bawah template sebelum tag </html>.
di atas tag </body> kita buat tag <script>.
<b:if cond='data:view.isPost'>
<script type='text/javascript'>
</script>
</b:if>jangan lupa jika kalian tidak menggunakan script dengan tag kode variable atau tag value seperti <data.post.id/> seperti itu selalu cantumkan tag //<![CDATA[...//]]> supaya kode tidak terkonversi menjadi seperti "e; karena penggunaan tag seperti ini di javascript sangat tidak di rekomendasikan.
jadi tampilan tag <script> tadi akan terlihat seperti ini.
<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
//]]>
</script>
</b:if>step terakhir kita tambahkan kode jquery pada tag <script> yang tadi kita buat.Maka akan tampak seperti ini.
<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
$(function() {
function codes() {
var val = "";
var arr = "0123456789";
for(var i = 0; i < 5; i++)
val += arr.charAt(Math.floor(Math.random() * arr.length));
return val
}
var check_if_protected = $('.hide-by-pass');
$(check_if_protected).each(function(e, t) {
var atrib = $(this).attr('pass-protected');
var target = $('.content-pass-protected'),
saved = target.clone(true),
hide_bypass = $('<div class="not-have-permission"><h4 class="title-wrp">RESTRICTED CONTENT ! <br/> YOU DONT HAVE PERMISSION TO ACCESS THIS CONTENT !</h4></div><br/><input id="pass-input-bypass" type="text" placeholder="Your Ticket"><p><div id="ticket-by">Code : <div id="ticket-content"></div><button id="btn_reload">Reload</button></div></p><div id="check"><div id="not-found">No Error</div></div>');
if(atrib === 'true') {
target.remove();
hide_bypass.appendTo('.hide-by-pass')
var input = $('#pass-input-bypass'),
err_c = $('<div id="not-found">No Error</div>'),
ticket = codes(),
check = $('#check'),
tickets = $('#ticket-content'),
btn_reload = $('#btn_reload');
tickets.append(ticket);
btn_reload.click(function() {
tickets.html(codes())
})
input.on('keyup', function() {
if(input.val() === tickets.text()) {
check.html('<div id="no-error">Correct !</div>')
setTimeout(function() {
check.html('');
saved.appendTo(check);
}, 2000)
} else {
check.html('<div id="has-error">Try Again !</div>')
setTimeout(function() {
$('#has-error').remove()
}, 1000)
}
})
} else {
return false;
}
})
})
//]]>
</script>
</b:if>atau tanpa Jquery DOM ready.
<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
function protected_content(){
function codes() {
var val = "";
var arr = "0123456789";
for(var i = 0; i < 5; i++)
val += arr.charAt(Math.floor(Math.random() * arr.length));
return val
}
var check_if_protected = $('.hide-by-pass');
$(check_if_protected).each(function(e, t) {
var atrib = $(this).attr('pass-protected');
var target = $('.content-pass-protected'),
saved = target.clone(true),
hide_bypass = $('<div class="not-have-permission"><h4 class="title-wrp">RESTRICTED CONTENT ! <br/> YOU DONT HAVE PERMISSION TO ACCESS THIS CONTENT !</h4></div><br/><input id="pass-input-bypass" type="text" placeholder="Your Ticket"><p><div id="ticket-by">Code : <div id="ticket-content"></div><button id="btn_reload">Reload</button></div></p><div id="check"><div id="not-found">No Error</div></div>');
if(atrib === 'true') {
target.remove();
hide_bypass.appendTo('.hide-by-pass')
var input = $('#pass-input-bypass'),
err_c = $('<div id="not-found">No Error</div>'),
ticket = codes(),
check = $('#check'),
tickets = $('#ticket-content'),
btn_reload = $('#btn_reload');
tickets.append(ticket);
btn_reload.click(function() {
tickets.html(codes())
})
input.on('keyup', function() {
if(input.val() === tickets.text()) {
check.html('<div id="no-error">Correct !</div>')
setTimeout(function() {
check.html('');
saved.appendTo(check);
}, 2000)
} else {
check.html('<div id="has-error">Try Again !</div>')
setTimeout(function() {
$('#has-error').remove()
}, 1000)
}
})
} else {
return false;
}
})
}
protected_content()
//]]>
</script>
</b:if>Dan silahkan simpan template sobat.
untuk penggunaan atau penerapan pada postingan.Kita hanya perlu satu elemen tambahan yang menjadi elemen untuk menyembunyikan konten.
sobat tinggal tulis kode atau menyimpan nya di notepad untuk di pakai nanti lihat susunan kode seperti di bawah ini.
<div class="passprotective">
<div class='hide-by-pass' pass-protected="true">
<div class='content-pass-protected'>
<!--
<div class="btn-center">
<a href="javascript:void(0)" class="btn btn-down">Download</a>
</div>
-->
</div>
</div>
</div>bagian yang di tandai dengan <!--...--> adalah bagian konten yang akan di sembunyikan atau di kunci , pada dasar nya di sini menggunakan tombol unduh sebagai fungsi utamanya, namun sobat dapat menggantinya dengan berbagai macam konten atau elemen html seperti img, p, b, div, dan lain-lain.
dan perlu di ingat hanya satu kali penempatan pada satu postingan saja , tidak dapat di gunakan dengan lebih dari dua.
Contoh :
<!-- badan postingan -->
<div class="passprotective">
<div class='hide-by-pass' pass-protected="true">
<div class='content-pass-protected'>
<!-- konten -->
</div>
</div>
</div>
<!-- badan postingan -->
<div class="passprotective">
<div class='hide-by-pass' pass-protected="true">
<div class='content-pass-protected'>
<!-- konten -->
</div>
</div>
</div>
<!-- badan postingan -->maka penerapan seperti di atas adalah salah !
jika :
<div class="passprotective">
<div class='hide-by-pass' pass-protected="true">
<div class='content-pass-protected'>
<!-- konten -->
<!-- konten -->
<!-- konten -->
<!-- konten -->
<!-- konten -->
<!-- konten -->
</div>
</div>
</div>maka penerapan diatas adalah benar tentu akan berjalan dengan baik.
Oh iya pada bagian atribut pass-protected="true" dengan value true adalah kode return agar dapat mengidentifikasikan bahwa konten butuh di sembunyikan apabila tidak masukan value false agar tidak di sembunyikan atau simple nya jangan sertakan kode html tersebut pada postingan.
Informasi :
pass-protected="true" = return true // konten akan di sembunyikan.
pass-protected="false" = return false // tidak akan di sembunyikan.
Nah demikian cara membuat pengunci konten (Content Locker). Silahkan ajukan sugesti untuk menambahkan variable atau fungsi tambahan dengan ide anda sendiri pada komentar. Nanti akan saya realisasikan permintaan sobat jika ada yang kurang dan memang butuh improvisasi.
Mudah-mudahan jadi terinsiprasi dengan apa yang saya buat hari ini.
Versi Terbaru
