Cara Agar Like atau Share dulu Sebelum Melihat Link Download

Bingung mau kasih judul apa untuk artikel satu ini. Namun pada intinya, disini kita bisa menaruh atau lebih tepatnya menyembunyikan sebuah Link. Bisa berupa link untuk mengunduh dan lain lain.

Mungkin sebelumnya Anda pernah menjumpai sebuah blog yang menampilkan widget Like Facebook, Share to twitter, maupun Google Plus dengan tampilan seperti ini



Nah, jika Anda memilih salah satu option diatas, maka sesuatu baru bisa ditampilkan.
Trik ini saya dapat dari blog kangismet dengan judul Share to Unlock The Download Button

 Sebelum saya menulis panjang lebar, silahkan lihat dulu contohnya disini

 Nah, untuk memasang pada blog Anda, silahkan ikuti petunjuknya berikut ini:

1.Masukkan jQuery ini pada template Anda. Jika sebelumnya telah menyimpan jQueri ini, maka lewati langkah satu.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

2. Masih dalam template, cari kode ]]></b:skin>
Masukkan CSS ini diatasnya
.secret {text-align:center;display:none}
.secret-share {padding:20px;text-align:center;border:3px solid #ddd}
3. Masukkan javascript berikut diatas </body>
<script type='text/javascript'>
//<![CDATA[
/* Facebook */
(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.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      status     : true,                              
      xfbml      : true                                
    });
    FB.Event.subscribe('edge.create', function(href, widget) {
        $.event.trigger({
            type: "pageShared",
            url: href
        });  
    });
};
/* Twitter */
  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="https://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) {
        $.event.trigger({
            type: "pageShared",
            url: event.target.baseURI
        });
    });
});
/* Google Plus */
(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);
  })();
function plusOned(obj){
    console.log(obj);
    $.event.trigger({
        type: "pageShared",
        url: obj.href
    });
}

/* Listen for the pageShared event */
$(document).on('pageShared',function(e){
    if(e.url == window.location.href){
        $(".secret").show();
        $(".secret-share").hide();
    }
});
//]]>
</script>
Apabila pada template sobat sudah ada kode yang mirip seperti no 3, silahkan hapus dan ganti dengan kode di atas.
Simpan Template

4. Masukkan kode ini didalam postingan mode HTML (bukan compose)
<div class="secret">
Link yang disembunyikan disini</div>
</div>
<div class="secret-share">
Bagikan melalui Facebook / Twitter / Google Plus untuk melihat Link Download
<span class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90" expr:data-href="data:post.url" style="margin-right: 25px;"></span><a class="twitter-share-button" data-count="horizontal" data-related="" data-via="kangismetdotnet" expr:data-text="data:post.title" expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a><span class="g-plusone" data-callback="plusOned" data-count="true" data-size="medium" expr:data-href="data:post.url"></span></div>
Source: http://blog.kangismet.net/2014/01/share-to-unlock-download-button.html
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini