Cara Membuat Share to Unlock The Download Button di Blogspot

Cara Membuat Share to Unlock The Download Button di Blogspot - Share to Unlock The Download Button adalah kita harus share terlebih dahulu untuk melihat link donwnload, tips ini sudah saya terpkan di tempat download template buatan saya, ok back to topic bagaimana cara bikin share to download di blog.
 

Untuk demonya kurang lebih seperti gambar dibawah ini :

Share to Unlock The Download Button

Berikut Cara Membuat Share to Unlock The Download Button

 
1. Pasang Framework jQuery

Untuk memunculkan dan menyembunyikan objek, diperlukan sentuhan jQuery. Oleh karena itu silahkan pasang kode ini di atas </head>

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

Pemasangan jQuery pada template cukup 1 saja. Apabila ada beberapa versi framework jQuery, maka efek-efek tidak akan berjalan.

 
2. Pasang Kode CSS di atas ]]></b:skin> atau </style>

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

 
3. Pasang Script Penampil Button 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>

Apabila pada template sobat sudah ada kode yang mirip-mirip seperti itu, silahkan hapus dan ganti dengan kode di atas. Jangan lupa untuk membackup dulu template.

 

4. Penulisan pada Postingan

Untuk memunculkan tombol Like, Tweet atau Google Plus dan juga objek (link download) maka format penulisan pada postingan seperti ini (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>

Nah itulah Cara Mudah Membuat Share to Unlock The Download Button di Blogger. Lihat juga postingan sebelumnya mengenai Cara Mudah Mempercepat Loading Blog dengan LazyLoad

 

Penutup

Terima kasih atas kunjungan anda di LingkaranDunia, serta membaca artikel yang mengenai Cara Membuat Share to Unlock The Download Button di Blogspot. Jika ada yang kurang di mengerti silahkan ajukan pertanyaan lewat Email, Facabook LingkaranDunia dan lewat kolom komentar yang kami sediakan di bawah artikel ini.