Menyembunyikan Link Download Dengan Tombol Sharing SNS

Buat kalian yang suka berbagi link download tapi tidak ingin membaginya begitu saja, kalian membutuhkan cara ini menyembunyikan link Download dengan tombol sharing SNS. Dengan cara ini akan terjadi simbiosis mualisme diantara kalian dan pengunjung blog anda. Pengunjung mendapatkan link download mereka dan kita mendapatkan publikasi blog kita di SNS mereka.

ini adalah contoh tampilannya

Bagaimana apakah kalian tertarik?

Kalau kalian tertarik maka ikutin cara berikut:

1. Pertama Pasang Framework jQuery. Untuk memunculkan dan menyembunyikan objek,
diperlukan sentuhan jQuery. Oleh karena itu silahkan pasang kode ini di atas </head> pada edit template html blog anda.

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

2. Kedua Pasang kode CSS berikut diatar kode ]]></b:skin> atau </style> pada edit template html blog anda.

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

3. Ketiga pasang scipt berikut untuk menampilkan tombol sharing diatas kode </body> atau di atas </head> pada edit template html blog anda.

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

4. Keempa untuk memunculkan tombol SNS seperti Like facebook, Tweet atau Google Plus dan juga objek (link download) maka camtumkan kode berikut pada html postingan yang akan kita buat.

<div class="secret">
Letakan kode atau link download yang akan kamu sembunyikan disini </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="Nama Blog Kalian" 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>