Sebenar nya saya sudah memposting hal serupa pada postingan sebelumnya pada topic Cara Membuat Pengunci Konten (Content Locker). Pada topic yang akan saya bahas adalah bagaimana cara memubat konten locker yang sebelumnya hanya dapat di taruh hanya dengan satu elemen saja di dalam postingan merubah nya menjadi multi konten untuk beberapa konten postingan atau pada bagian elemen di bagian blog sobat.cukup menarik sih , sebelum nya saya belum mengarah kesini sebelumnya namun karena ada request jadi saya buatkan yang seperi ini.
Berguna untuk menyembunyikan dari pencurian postingan tidak ?
Jelas kalo sobat pengen menyembunyikan konten yang gak gampang di salin ya menggunakan ini , secara otomatis hasil salin dari sorotan text postingan yang ingin di salin oleh pengunjung tidak akan tersalin terkecuali di luar dari bagian dari elemen pengunci itu sendiri.Namun itu masih experiment.
Oke jadi buat yang sudah pernah nyoba ini , silahkan jika ingin merubah atau menimpa tutorial lama yang serupa pada postingan sebelumnya dengan yang ini anda harus menghapus seluruh kode CSS,JAVASCRIPT, termasuk Pengunci Konten yang sudah ada pada postingan.
untuk yang baru ingin memasang atau yang sudah di pasang sebelumnya yuk langkah-langkah nya.
pertama kita buat kode style dengan tipe text/css tanpa scope ya karena ini global tidak termasuk halaman error.
salin semua kode di bawah ke bagian bawah </b:skin> atau di bagian atas tag penutup </head>
<b:if cond='!data:view.isError'>
<style type="text/css">
/* css reset : hapus apabila sudah ada pada bagian template */
html,body{margin:0;padding:0}
*,*:before,*:after{box-sizing:border-box;vertical-align:baseline}
input,button{outline:none!important}
input{border:none!important}
/* main css : untuk kedepan gunakan border:1px solid transparent pada tombol reload untuk fix IE 8+ */
.passprotective{width:100%;height:auto;margin:0 auto;display:block;position:relative;background:#fff;padding:10px;box-sizing:border-box}
.hide-by-pass{display:block;margin:20px auto;padding:20px;width:100%;height:auto;max-width:400px;position:relative;background:#fff;font-family:'Roboto',sans-serif;box-sizing:border-box}
.hide-by-pass .input-row{margin:0;padding:0;position:relative}
.hide-by-pass .pass-input-bypass::-webkit-input-placeholder{color:#222}
.hide-by-pass .pass-input-bypass::-moz-placeholder{color:#222}
.hide-by-pass .pass-input-bypass:-ms-input-placeholder{color:#222}
.hide-by-pass .pass-input-bypass:-moz-placeholder{color:#222}
.hide-by-pass .pass-input-bypass{margin:0;padding:10px}
.hide-by-pass .pass-input-bypass{font: 15px/24px "Lato", Arial, sans-serif; color: #555; width: 100%; box-sizing: border-box; letter-spacing: 1px;background:none;}
.hide-by-pass .pass-input-bypass ~ .focus-border:before,
.hide-by-pass .pass-input-bypass ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 2px; background-color: #F1C40F; transition: 0.4s;}
.hide-by-pass .pass-input-bypass ~ .focus-border:after{top: auto; bottom: 0;}
.hide-by-pass .pass-input-bypass ~ .focus-border i:before,
.hide-by-pass .pass-input-bypass ~ .focus-border i:after{content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 0; background-color: #F1C40F; transition: 0.6s;}
.hide-by-pass .pass-input-bypass ~ .focus-border i:after{left: auto; right: 0;}
.hide-by-pass .pass-input-bypass:focus ~ .focus-border:before,
.hide-by-pass .pass-input-bypass:focus ~ .focus-border:after{left: 0; width: 100%; transition: 0.4s;}
.hide-by-pass .pass-input-bypass:focus ~ .focus-border i:before,
.hide-by-pass .pass-input-bypass:focus ~ .focus-border i:after{top: 0; height: 100%; transition: 0.6s;}
.hide-by-pass .content-pass-protected{margin-top:1em;margin-bottom:1em;display:block;position:relative;padding:5px 5px}
.hide-by-pass .btn-center{text-align:center}
.hide-by-pass .btn_reload{display:inline-block;padding:3px 9px;border:0.1em solid transparent;margin:0 1em;border-radius:5px;box-sizing:border-box;text-decoration:none;font-family:'Roboto',sans-serif;font-weight:300;color:#fff;background:#294b75;cursor:pointer;text-align:center;transition:all 0.2s}
.hide-by-pass .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}
.hide-by-pass .btn-down:hover{color:#fff;background-color:#555}
.hide-by-pass .not-have-permission{display:block;margin:5px auto;padding:10px;max-width:200px;max-height:200px;box-sizing:border-box}
.hide-by-pass .title-wrp{color:#b1e4fd;display:block;font-family:'Roboto',sans-serif;font-size:15px;margin:0;white-space:normal;word-break:break-word;padding:10px;font-weight:bold;box-sizing:border-box;text-align:center}
.hide-by-pass .title-wrp svg{width:70px;height:70px}
.hide-by-pass .title-wrp path{fill:none;stroke:#555}
.hide-by-pass .title-wrp path + path{fill:#fff27e;stroke:#fff27e}
.hide-by-pass .check{display:block;margin:0;padding:0;width:auto;height:auto;box-sizing:border-box}
.hide-by-pass,.pass-input-bypass{box-sizing:border-box;-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)}
.hide-by-pass .check .not-found,.hide-by-pass .check .has-error,.hide-by-pass .check .no-error{font-weight:bold;border-radius:5px;padding:10px}
.hide-by-pass .check .not-found{color:#555;background:#fff27e!important;box-sizing:border-box}
.hide-by-pass .check .has-error{color:#fff;background:#f37c73!important;box-sizing:border-box}
.hide-by-pass .check .no-error{color:#fff;background:#4CAF50!important;box-sizing:border-box}
.hide-by-pass .ticket-by{margin:10px 0;padding:10px;font-weight:normal;position:relative;display:block;color:#2196F3}
.hide-by-pass .ticket-content{display:inline-block;position:relative;color:#2196F3;font-weight:bold;text-decoration-style:wavy;text-decoration-color:#F44336;text-decoration-line:underline}
.hide-by-pass:hover{-webkit-animation:shake 0.82s cubic-bezier(0.36,0.07,0.19,0.97) both;animation:shake 0.82s cubic-bezier(0.36,0.07,0.19,0.97) both;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}
@-webkit-keyframes shake{10%,90%{-webkit-transform:translate3d(-1px,0,0);transform:translate3d(-1px,0,0)}20%,80%{-webkit-transform:translate3d(2px,0,0);transform:translate3d(2px,0,0)}30%,50%,70%{-webkit-transform:translate3d(-4px,0,0);transform:translate3d(-4px,0,0)}40%,60%{-webkit-transform:translate3d(4px,0,0);transform:translate3d(4px,0,0)}}
@keyframes shake{10%,90%{-webkit-transform:translate3d(-1px,0,0);transform:translate3d(-1px,0,0)}20%,80%{-webkit-transform:translate3d(2px,0,0);transform:translate3d(2px,0,0)}30%,50%,70%{-webkit-transform:translate3d(-4px,0,0);transform:translate3d(-4px,0,0)}40%,60%{-webkit-transform:translate3d(4px,0,0);transform:translate3d(4px,0,0)}}
@media all and (max-width:30em){.hide-by-pass .btn-down{display:block;margin:0.4em auto}}
</style>
</b:if>Diatas tag penutup </body> buat baris kosong lalu salin kode javascript di bawah dengan dengan di sertai tag kondisional halaman error <b:if cond='!data:view.isError'>...</b:if>.
silahkan salin semua kode di bawah pada bagian kosong yang sudah sobag buat tadi.
<b:if cond='!data:view.isError'>
<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
}
$('[pass-protected]').each(function(e, t) {
var e = $(this),
atrib = e.attr('pass-protected'),
saved = e.children().clone(true),
hide_bypass = $('<div class="hide-by-pass"><div class="not-have-permission"><div class="title-wrp"><svg viewBox="-85 -85.625 190 190"><path fill="none" stroke="gray" stroke-width="23.076" d="M10-71.391c25.492 0 46.152 20.66 46.152 46.151v46.152c0 25.491-20.66 46.151-46.152 46.151-25.491 0-46.151-20.66-46.151-46.151V-25.24c0-25.49 20.66-46.151 46.151-46.151z"/><path fill="#b80404" d="M-47.689-13.701H67.689c6.373 0 11.538 5.165 11.538 11.538v92.304c0 6.373-5.165 11.538-11.538 11.538H-47.689c-6.373 0-11.538-5.165-11.538-11.538V-2.163c-.001-6.373 5.164-11.538 11.538-11.538z"/></svg><div class="desc">Protected Content</div></div></div><br/><div class="input-row"><input class="pass-input-bypass" type="text" placeholder="Your Ticket"/><span class="focus-border"><i/></span></div><p><div class="ticket-by">Code : <div class="ticket-content"></div><button class="btn_reload">Reload</button></div></p><div class="check"><div class="not-found">Please insert code.</div></div></div>');
if(e != null) {
e.children().remove();
hide_bypass.appendTo(e)
var input = e.find('.pass-input-bypass'),
err_c = $('<div class="not-found">No Error</div>'),
ticket = codes(),
check = e.find('.check'),
tickets = e.find('.ticket-content'),
btn_reload = e.find('.btn_reload');
tickets.append(ticket);
btn_reload.click(function() {
tickets.html(codes())
})
input.on('keyup', function() {
if(input.val() === tickets.text()) {
check.html('<div class="no-error">Correct !</div>')
input.attr('readonly','readonly')
btn_reload.attr('disabled','disabled')
setTimeout(function() {
check.html('');
saved.appendTo(check);
}, 2000)
} else {
check.html('<div class="has-error">Try Again !</div>')
setTimeout(function() {
check.html('')
}, 1000)
}
})
} else {
return false;
}
})
})
//]]>
</script>
</b:if>Nah sekarang kita terapkan penerapan kode kondisional pada elemen yang ingin kita sembunyikan.
untuk yang sekarang sobat hanya butuh satu parent elemen atau bisa di bilang elemen terluar jadi sobat cuma menulis kode seperti ini nantinya.
<div pass-protected='true'>
<!-- Konten apa yang ingin di sembunyikan ? -->
</div>Dan karena ini untuk beberapa komponen pada elemen html maka bisa seperti ini di order atau di suffle cara penempatan nya.
<div pass-protected="true">
<div class="btn-center">
<a href="javascript:void(0)" class="btn btn-down">Download 1</a>
</div>
</div>
<div pass-protected="true">
<div class="btn-center">
<a href="javascript:void(0)" class="btn btn-down">Download 2</a>
</div>
</div>
<div pass-protected="true">
<div class="btn-center">
<a href="javascript:void(0)" class="btn btn-down">Download 3</a>
</div>
</div>
<div pass-protected="true">
<div class="btn-center">
<a href="javascript:void(0)" class="btn btn-down">Download 4</a>
</div>
</div>jika konten tidak ingin di sembunyikan sobat tidak perlu kode tambahan lagi seperti yang di atas hanya cukup tulis seperti biasa saja.
sebaliknya tambahkan elemen seperti yang tertera di atas yaitu dengan menambahkan satu parent elemen div dengan atribut pass-protected="true".
NOTE : Kalimat atau paragraf yang tidak memiliki tag <p> tidak bisa di sembunyikan apabila ingin mengunci konten dengan paragraf gunakan seperti ini.
<!-- badan postingan --> <div pass-protected="true"> <p>konten paragraph</p> </div> <!-- akhir postingan -->
jangan seperti ini :
<!-- badan postingan --> <div pass-protected="true">INI ADALAH PARAGRAF TANPA ADA TAG HTML</div> <!-- akhir postingan -->
Penulisan yang benar :
<!-- badan postingan --> <div pass-protected="true"> <p>Saya ini adalah text yang akan di sembunyikan, saya tidak akan dapat di lihat dengan mudah ! </p> </div> <!-- akhir postingan -->
Silahkan check yang sudah jadi ! Selamat bereksperimen !