Cara Membuat Share Unlock Pada Tombol Download

Share to Unlock The Download Button? Siapa sh yang gk kenal lagi dengan kata itu? .
Share to Unlock The Download Button bisa di artikan link download akan muncul setelah klik Like Facebook / Tweet atau Merekomendasikan di Google Plus. Link yang disembunyikan biasanya link yang bersifat premium. Jadi, sangat wajar jika sebuah link download ditukar dengan like, tweet atau recomend on Google+.

Tombol Share to Unlock The Download Button ini bisa saya katakan dapat meningkatkan trafik karena setiap orang yang share artikel kita, orang yang tertarik akan langsung mengikuti atau sekedar membaca artikel yang telah di share tersebut. Jadi, tombol share to unlock the download button ini dapat dijadikan alternatif lain untuk meningkatkan trafik blog sobat. Untuk demonya kalian bisa di lihat dibawah ini.  ^_^

• DEMO

Dan ini gambarannya

Pemasangan Script

---

Langkah 1 -> Blogger -> Templates -> Edit HTML
Langkah 2 -> Pemasangan Framework JQuery

Untuk memunculkan atau menyebunyikan objek, kita butuh kan adalah Framework JQuery. Untuk pemasangan jQuery pada template cukup 1 saja. Apabila ada beberapa versi framework jQuery, maka efek-efek tidak akan berjalan. Silahkan pasang kode di bawah ini di atas </head>.

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> 

Langkah 3 -> Pemasangan kode CSS di atas ]]></b:skin> atau bisa di </style>.

 .secret {text-align:centerdisplay:none}
.secret-share {padding:20px;text-align:center;border:3px solid #ddd} 

Langkah 4 -> Pemasangan script untuk menampilkan button, apabila script dibawah ini sudah ada di template sobat, silahkan hapus dan ganti seperti di bawah ini dan terlebih dahulu di backup. Pasang script ini di atas </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> 

Pemasangan Pada Postingan

---

Cara untuk menampilkan Share to Unlock The Download Button, pada posting tinggal copy & paste script di bawah. (tulis pada mode HTML bukan Comopose) :

 <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> 

Gimana sob? semoga bermanfaat ya ^_^

Sumber : KangIsmet