Cara Membuat Tombol Social Content Locker Di Blog

Cara Membuat Tombol Social Content Locker Di Blog - Sosial Media bisa mendatangkan visitor atau juga dapat mendongkerak traffic pada Blog. Para Blogger banyak sekali menggunakan trik ini untuk menaikan traffic Blog dengan me-share content pada Sosial Media.

Selain pada Content, bentuk file juga dapat di bagian ke dalam Sosial Media dengan membuat tombol download sosial media. Tombol ini cocok sekali untuk Blog download, walaupun bukan Blog download bisa juga digunakan untuk Blog yang ingin membagikan Template gratis.

Tombol Social Content Locker berfungsi ketika sosial media kita di like atau di follow, bagi Anda yang ingin memasang tombol ini bisa mengikuti caranya sebagai berikut :

Pertama ; Masuk Ke Akun Blogger

Kedua ; Pilih menu Template, lalu Edit HTML

Ketiga ; Selanjutnya Anda cari Kode </head> , untuk memudahkan dalam pencarian gunakan tombol Ctrl + F pada keyboard.

Keempat : Salin kode dibawah ini dan pastekan diatasnya

<link href='https://googledrive.com/host/0B-vz7n1QSdEfMDZiZXpOR1VCcWs' rel='stylesheet' type='text/css'/>

Kelima ; Kemudian simpan Template

Keenam ; Sekarang menuju Entri baru, langkah ini dilakukan untuk menampilkan Social Content Locker pada postingan. Salin kode dibawah ini lalu terapkan pada Entri baru mode HTML.

<article id="default-usage">
<div class="to-lock" style="display: none;">
<!--Hidden Content Starts (You can Use HTML BELOW)-->
<div style="margin-bottom: 20px; text-align: center;">
<img alt="Thank You" src="" style="margin: auto;" />
</div>
<div style="text-align: justify;">
Tempatkan disini link download yang ingin di sembunyikan
</div>
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</div>
</article>
<br />
<div id="mblunlocker">
</div>
<script src="http://dl.dropboxusercontent.com/u/87795241/Blog/javas.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Please Like to Unlock Download",
message: "Yes, this is Social Locker. Just try it, click on one of buttons."
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
// twitter options
twitter: {
url: "https://twitter.com/yosepyuswana",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "https://www.facebook.com/pages/Aak-share-dot-com/727072134018053",
appId: "591662174265135"
},
google: {
url: "https://plus.google.com/u/0/105248329877134471578"
}
});
});;;;
</script>

Ketujuh ; Publikasikan

Apabila Anda ingin menampilakan Tombol Social Content Locker didalam editor template, Anda cari kode <data:post.body/> . Kode <data:post.body/> biasanya lebih dari satu, Anda pasangakan kode diatas pada kode nomor dua. Namun jika tidak menemui hasil, Anda bisa mencobanya satu demi satu.

Demo CODE

Sekian Cara Membuat Social Content Locker Di Blog, Semoga bermanfaat!

Share this post