Selamat Sore sob, apa kabarnya hari ini ? untuk hari ini saya akan membagikan Tutorial Membuat Share To Download Di Blog. Saya mengambil tutorial ini dari blog milik Kang Ismet. Tutorialnya sangat mudah sekali tinggal masang dan mengedit sedikit saja. Nah, berikut penjelasan dan tutorial pemasangannya
Share To Download sangat bagus untuk blog yang memang dikhususkan untuk mendownload entah itu software,game,dan lainnya. Selain itu Share To Download dapat mendongkrak posisi artikel di page utama google. Cara kerjanya cukup simple yaitu jika pengunjung mengklik Like.Tweet,G+ maka link download akan muncul.
Berikut Tutorialnnya:
1. Taruh JQUERY ini diatas kode </head>. Jika Jquery ini sudah ada maka tidak perlu dipasang lagi
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
2. Taruh kode CSS ini diatas
]]></b:skin> atau
</style>
.secret {text-align:center;display:none}
.secret-share {padding:20px;text-align:center;border:3px solid #ddd}
3. Taruh kode ini diatas
</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>
Nah, saat sobat membuat artikel atau postingan masukkan kode ini dibagian HTML. Ingat pada HTML
<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>
Selesai, dan tinggal diedit sedikit bagian yang penting saja. Bagaimana ? cukup mudah bukan ? semoga tutorial ini bermanfaat.
Jika ada masalah silakan berkomentar. Terima Kasih
