Cara Membuat Share Unlock Pada Tombol Download

February 16, 2015

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.  ^_^
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

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

1 comment

oh, bgitu ya gan..
ane coba pkai ah.. XD

Balas

Mohon berkomentar yang relavan dan tidak menaruh link hidup yah ^_^