Cara Membuat Social Locker untuk Blogger

TUTORIAL MENAMBAHKAN SOSIAL LOCKER UNTUK BLOGGER TERBARU

Cara Membuat Social Locker untuk Blogger
Selamat Datang di Blog Orang IT . Postingan saya kali ini akan share bagaimana cara memasang sosial locker untuk pengguna blogger, jadi kita akan mengunci artikel ataupun link download didalam post agar tidak bisa dilihat oleh pembaca sebelum disukai melalui twitter , facebook atau ke google plus lumayan kan kita akan mendapatkan tambahan like fanspage , twitter atau follower google plus dengan sedikit memaksa
Sosial Locker merupakan pengaman dimana kita mengunci link download atau link artikel dengan button like sosial media , nah untuk membukanya sangat mudah pengunjung tinggal menyukai halaman facebook , mengikuti twitter atau menjadi follower google plus saja tentunya ini merupakan langkah jitu dalam memperbanyak follower sosial media

Membuat file dikunci atau disembunyikan sebelum disukai untuk blogger ini ( sosial locker ) sudah dicoba oleh saya dan bekerja , jika sewaktu-waktu tidak works perhatikan link JS siapa tau mati dan silahkan komentar nanti saya upload ulang

Untuk pengguna wordpress yang ingin mencoba sosia locker silahkan mengunjungi link https://wordpress.org/plugins/social-locker/

Sementara untuk pengguna blogspot kita harus mengupload sendiri Javascript dan CSS nya bisa di github ataupun di binbox , langsung saja menuju tutorial cara mengunci menyembunyikan kontent sebelum dibagikan disukai untuk blogger sebagai berikut 

Cara memasang sosial locker untuk blogger terbaru :

1. Buka dasboar blogger
2. Pilih menu template - edit HTML
3. Ctrl+F cari kode </head> letakkan script berikut diatasnya

Cara Membuat Social Locker untuk Blogger
<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
<link href='https://www.dropbox.com/s/j8u0px1qszixxwl/TricksTantraSCL.css?dl=1' rel='stylesheet' type='text/css'/>
<script src='https://www.dropbox.com/s/tskmt978ku8qb7g/TricksTantraSCL.js?dl=1' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
  $('.socialLocker .to-lock').sociallocker({
    buttons: {order:["facebook-like","twitter-tweet","google-plus"]},
    twitter: {url:"https://twitter.com/helmykkurnia"},
    facebook: {url:"https://web.facebook.com/helmyy.kkuerniakediri/"},
    google: {url:"https://plus.google.com/u/0/106763473516559404624"},
    text: {
      header: "Like us To Unlock This Content",
      message: "This content is locked. Like us on Twitter, Facebook or Google plus to unlock it."
    },
    locker: {close: false, timer: 0,},
    theme: "secrets"
  });
});
//]]>
</script>
4. Simpan template 

Selanjutnya kita buka artikel pada menu post terserah yang mana saja , contoh artikel blog bule saya silahkan di edit pilih pada bagian HTML bukan compose

Untuk memasang sosial locker caranya seperti ini tambahkan 

Cara Membuat Social Locker untuk Blogger
<article class="socialLocker">  <div class="to-lock" style="display:none;">  INI DIISI DENGAN ARTIKEL YANG MAU DIKUNCI  tutup dengan kode ini diakhir artikel yang mau dikunci </div> </article> 

5. Publikasikan artikel dan lihat hasilnya 

Cara Membuat Social Locker untuk Blogger
Nah mudahkan , untuk jaga-jaga jika javascriptnya mati anda bisa upload sendiri silahkan didownload melalui link berikut ini
Selain melalui javascript yang lebih simple ada juga lo cara memasang sosial locker langsung pada postingan , cara nya sama saja pada post pilih mode HTML
<div id="paybox">
<div id="paytittle">
                    Silahkan klik like untuk mendownload
</div>
<div id="fb-root">
</div>
<script type="text/javascript">

function habilitar() {
var url = "Disini Link artikel/ download yang disembunyikan";
url = "<a href='" + url + "'>Download disini om.</a> ";
document.getElementById("restricted").innerHTML = url;
}

window.fbAsyncInit = function() {
FB.init({ status : true, cookie : true, xfbml  : true });
FB.Event.subscribe('edge.create', function(response) { habilitar(); });
};

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));

twttr.ready(function (twttr) {
twttr.events.bind('tweet', function(event) {
habilitar();
 });
});

(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>

<br />

<div id="restricted">
<a class="twitter-share-button" data-lang="en" data-text="hola mundo, esto es una prueba." data-via="habilitar" href="https://twitter.com/helmykkurnia"></a>

<g:plusone callback="habilitar" href="https://plus.google.com/u/0/106763473516559404624" size="medium"></g:plusone>

<fb:like href="https://web.facebook.com/helmyy.kkuerniakediri/" layout="button_count" send="false" show_faces="false" width="220"></fb:like>

</div>
Lebih panjang tapi simple ga perlu pakai javascript untuk hasilnya sama saja , ini adalah alternatif kedua cara memasang sosial locker langsung pada postingan artikel tanpa mengotak atik template blog anda
Demikian postingan cara memasang sosial locker di blogger dengan mudah terbaru semoga bermanfaat jika ada keluhan komentar silahkan bertanya melalui komentar dibawah ini akhir kata sekian dan terimakasih sudah mampir di blog sederhana saya . 

 Follow Blog Orang IT dan jangan lupa Like FansPage Helmykkediri dibawah serta jangan lupa untuk klik iklan yang ada pada Blog ini.untuk biaya perawatan admin

4 Responses to "Cara Membuat Social Locker untuk Blogger"

  1. bagus juga jadi variatif dan dinamis, ga membosankan.

    makasih tutorial sederhananya ini.

    BalasHapus
  2. Sudah saya coba baru saja dan berhasil , terimakasih tutorialnya (h)

    BalasHapus
  3. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  4. kalau tombolnya diganti youtube subscribe gimana pasangnya

    BalasHapus

Terimakasih sudah berkunjung ke Blog Orang IT , aturan berkomentar yang baik :

1. Dilarang mencantumkan berbagai macam link aktif dikomentar blog

2. Jika ingin mendapatkan backlink komen dengan name/url yang telah disediakan

3. Link download mati silahkan berkomentar

4. Postingan dirasa outdate atau sudah tidak berguna lagi komen saja jangan sungkan

5. Komentar yang memerlukan jawaban dari admin jangan menggunakan anonymous

6. Berkomentarlah dengan relevans dan tinggalkan jejak diblog saya

7. Klik iklan untuk biaya perawatan admin

Terimakasih sudah mentaati rules aturan berkomentar yang baik