Tutorial Membuat 'Social Content Locker' Pada Entri Blogger

LIVE PREVIEW

Add Your Hidden Text Here

Tutorial:

PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.

2. Klik pada Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari (CTRL + F)  kod dibawah:

</head>

6. Copy(CTRL + C) kod dibawah, dan Paste(CTRL + V) sebelum kod </head> :

<link href='https://dl.dropboxusercontent.com/s/mr4fqupuncvljjc/sociallocker.css' rel='stylesheet' type='text/css'/>

7. Klik Save Template.

8. Untuk paparkan 'Social Content Locker' pada entri :

(a) . Pergi ke "Dashboard" >> Klik "New Post" .

(b). Klik pada tab "HTML" .

(c). Copy(CTRL + C) kod dibawah dan Paste(CTRL +V) pada ruang tab HTML:

<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="URL GAMBAR DISINI" alt="" style="margin: auto;" /></div> <div style="text-align: justify">TAMBAH TEKS TERSEMBUNYI ANDA DISINI</div>
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</article>
</div><div id="socialunlocker"> </div>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/x9sycmrs4zh29ry/sociallocker.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://faiz-tutorial.blogspot.com",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "https://www.facebook.com/faiz.tutorial",
appId: "130907070422114"
},
google: {
url: "http://faiz-tutorial.blogspot.com"
}
});
});;;;
   
</script>

KETERANGAN:

• http://faiz-tutorial.blogspot.com - Gantikan dengan URL/Link Blog atau Entri anda.
• https://www.facebook.com/faiz.tutorial - Gantikan dengan URL/Link Fan Page Facebook anda.
• http://faiz-tutorial.blogspot.com - Gantikan dengan URL/Link Blog atau Entri anda.
• Jika 'button like' tidak berfungsi dengan sempurna, gantikan id 130907070422114 dengan APP ID facebook anda.
• Kandungan entri yang anda ingin sembunyikan@lock , anda boleh letakkan diantara <!--Hidden Content Starts (You can Use HTML BELOW)--> dengan <!--Hidden Content Ends (You can Use HTML ABOVE)-->.  Memerlukan sedikit kemahiran dalam kod HTML.
• Anda juga boleh menggunakan kod yang disediakan (yang di 'highlight' warna hijau ), hanya gantikan: 

              # URL GAMBAR DISINI - Gantikan dengan url gambar yang anda ingin sembunyikan.

              # TAMBAH TEKS TERSEMBUNYI ANDA DISINI - Gantikan dengan teks yang anda ingin

                sembunyikan.

              # Untuk tambah link boleh guna kod HTML ini ,   

                          <a href="LINK/URL">NAMA LINK/URL</a>

(d). Publish .. selesai . Kalau tak paham jangan segan-segan bertanya k.... :)



Sumber: 
http://codecanyon.net/item/social-locker-for-wordpress/3667715
http://codecanyon.net/item/social-locker-for-jquery/3408941