Membuat Share to Unlock The Download Button - kemaren ada yang tanya bagaimana cara buat tombol Share to Unlock The Download ? sebetulnya udah ada yang share cara bikin share to download ini , namun karena ada yang tanya , kali ini saya akan berikan tutornya kepada anda .
Share to Unlock The Download Button ini maksudnya 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 :
Berikut Cara Membuat Share to Unlock The Download Button
Langkah 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.
Langkah 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}
Langkah 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.
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 , semoga cara artikel tersebut bermanfaat bagi anda , jika anda mengalami kesulitan silahkan tanya
9 Komen Tips Membuat Share to Unlock The Download Button di Blog
hehe jadi kayak maksa ya gan :D hihihi....
Saya cb dulu kang y? sekalian request cara membuat pesan komentar kyk blog ini..
Di tempe saya gk fungsii =(
heheh iya gan , jika dia butuh maka dia akan senang hati untuk share
pasang jquerynya dulu gan
penampakan kasarnya seh udah jadi di template ane kang tapi yang bikin ane bingung di simpan d mana yah link donlodnya,, kan gini klo di klik tombol share nya ntar muncul link donlodnya, nah disitu ane bingungnya kang.
Ane td nyuba, udah klik share di blog ane sendiri tp link downloadnya malah ngak ada kang... hehehe
Mohon pencerahannya... maklum msh nyubi kang... =D
nahh iyaa saya juga gk isa kluar link download stelah berhasil share :v
mohon pencerahan :D
hahaha lumayan lah,, walaupun pas dicoba gak bisa..
pas bikin kode nya di postingan,, terus udah di publish,, pas ane liat malah ancur gan
Ada cara simple tanpa edit script tapi dengan menggunakan layanan pihak ke 3 nama layanannya paywithapost, berhubung tidak diperbolehkan berkomentar dengan url, silahkan search aja ya teman-teman!
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish