Cara Mudah Membuat Social Content Locker di Blogspot - Berapa banyak orang yang menggunakan situs jaringan sosial untuk meningkatkan Traffic Website mereka? Ada jutaan Blogger profesional yang sepenuhnya tergantung pada trafik social media. Namun, sangat sulit untuk mendapatkan eksposur sosial dengan cepat. Meskipun, ada beberapa widget yang membantu untuk meningkatkan pengikut sosial, tetapi tidak cukup. Jika kita ingin mendominasi web sosial, maka kita harus memanfaatkan setiap kesempatan yang kita miliki. Untuk itu, kali ini saya memberikan antisipasi Sosial Widget sepanjang masa, Sosial Content Locker.
Social Locker terdiri dari tiga tombol media social dan locker dengan bentuk horizontal. Tombol Sosial terdiri dari Facebook, Twitter dan Google plus. Setiap kali, seseorang akan menekan tombol Like, Tweet atau Plus +1 maka akan menampilkan konten yang tersembunyi. Hal ini memungkinkan seseorang untuk mendapatkan pengikut sosial yang lebih nyata. Dan tentu saja Social Content Locker ini GRATIS untuk pengguna Blogspot, tidak seperti Social Content Locker untuk situs Worpress yang Premium dan memiliki masa trial selama beberapa hari .
Bagaimana Cara Memasang Social Content Locker di Blogger?
Langkah sangat sederhana yang bahkan seorang anak kecil dapat mengikutinya. Tidak perlu belajar coding HTML karena semua yang harus kita lakukan adalah copy paste coding. Cukup ikuti petunjuk berikut.
- Masuk ke Blogger.com > Template > Edit HTML
- Cari kode </ head> dan pastekan kode CSS berikut tepat di atasnya :
<link href='https://dl.dropboxusercontent.com/u/137869302/lockercss.css' rel='stylesheet' type='text/css'/>
Setelah menyisipkan kode diatas, simpan template dan lanjut ke langkah berikutnya.
Sekarang setiap kali seseorang ingin menambahkan Social Content Locker di artikel tertentu, maka ia dapat mengikuti instruksi berikut. (Ingat: Langkah-langkah yang sama juga dapat digunakan pada Gadget di Area dan bahkan dalam sebuah template).
- Masuk ke Blogger.com > New Post.
- Pilih Tab HTML dari post editor blogger dan paste coding berikut.
<article id="default-usage">
<div class="to-lock" style="display: none;">
<!--Hidden Content Starts (You can Use HTML BELOW)-->
<div style="text-align: center; margin-bottom: 20px;">
<img src="Add_Hidden_Image_Here" alt="" style="margin: auto;" />
</div>
<div style="text-align: justify">
Tambahkan Teks Yang Akan Disembunyikan Disini
</div>
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</div>
</article>
<div id="mblunlocker"> </div>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/lockers.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Share it To Unlock This Content",
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: "http://www.sagacyber.com/",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "http://www.facebook.com/sagacyber.us",
appId: "408184442589211"
},
google: {
url: "http://www.sagacyber.com/"
}
});
});;;;
</script>
Instruksi :
Untuk Facebook : Ganti http://www.facebook.com/sagacyber.us dengan Halaman Facebook Anda.
Untuk Twitter : Ganti http://www.sagacyber.com/ dengan URL website Anda atau URL Posting
Untuk Google+ : Ganti http://www.sagacyber.com/ dengan URL website Anda atau URL Posting.
Ganti Add_Hidden_Image_Here dengan gambar yang ingin Anda sembunyikan.
Ganti "Tambahkan Teks Yang Akan Disembunyikan Disini" Dengan teks yang ingin Anda sembunyikan dari pengunjung.
Ingat : Jangan lupa untuk Menambahkan ID Facebook App Anda. Jika tidak tombol Like Facebook tidak akan tampil dengan benar. yaitu Ganti 408184442589211 pada kode diatas .
Selesai : Sekian artikel Cara Membuat Social Content Locker di Blogspot, saya harap widget ini akan membantu setiap orang untuk menarik pengunjung lebih banyak ke situs Anda. Jangan ragu untuk meninggalkan komentar Anda ^^