MASIGNCLEAN101

Cara Menciptakan Tombol 'Share To Unlock' Konten Premium Blogger


Mei 08, 2018
Cara Menciptakan Tombol 'Share To Unlock' Konten Premium Blogger
Selasa, 08 Mei 2018
Tombol 'Bagikan untuk Membuka Kunci (Share to Unlock) Konten Premium Blogger ini dalam bahasa Inggis disebut "Social Content Locker" atau "Share to Unlock Content".


Pesan yang tertulis juag biasanya "Share to Unlock This Content" atau "Bagikan untuk Membuka Kunci Konten Ini".

Tombol "Share to Unlock" ini yakni fitur atau widget yang dipakai untuk mengunci konten premium.

Konten premium yakni konten yang tidak gratis. Harus ada imbalan dari pembaca atau pengunjung untuk dapat mengakses konten tersebut dalam postingan blog, yaitu dengan cara like atau share (bagikan) ke media sosial.

Jadi, untuk mengakses konten premium ini, pembaca/pengunjung "dipaksa" untuk membagikannya lebih dulu ke akun media umum atau mengeklik tombol Suka, Bagikan, atau Tweet.

Dengan kata lain, fitur ini meminta pengunjung blog untuk "membayar" dengan cara Tweet, Like, atau Share kalau mereka ingin mengakses konten tersebut. Ini pola penampakannya:

Konten Premium Blogger ini dalam bahasa Inggis disebut Cara Membuat Tombol 'Share to Unlock' Konten Premium Blogger

Cara Membuat Tombol 'Share to Unlock' Konten Premium Blogger

1. Tema > Edit HTML
2. Simpan isyarat berikut ini di atas isyarat </head>

<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
<link href='http://cdn.rawgit.com/menightfury/social-locker/master/style-ver2.css' rel='stylesheet'/>
<script src='http://cdn.rawgit.com/menightfury/social-locker/master/script-ver2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
  $('.socialLocker .to-lock').sociallocker({
    buttons: {order:["facebook-share","twitter-tweet","linkedin-share"]},
    twitter: {url:"http://twitter.com/romel_tea"},
    facebook: {appId:1234567890, url:"https://www.facebook.com/romelteamedia"},
    linkedin: {url:"https://linkedin/in/romeltea"},
    text: {
      header: "Share to Unlock This Content",
      message: "This content is locked. Tweet, Share, or Post to LinkedIn to unlock it."
    },
    locker: {close: false, timer: 0,},
    theme: "secrets"
  });
});
//]]>
</script>

Customization
  • Buttons buttons: {}
  • There are seven buttons available for content locking. These are,
  • Facebook Like: "facebook-like"
  • Facebook Share: "facebook-share"
  • Google Plus One: "google-plus"
  • Google Plus Share: "google-share"
  • Twitter: "twitter-tweet"
  • Twitter Follow:"twitter-follow"
  • Linkedin Share: "linkedin-share"
  • You can apply any number of buttons for your blog. You can even change the order of these buttons in the order:[] option.
  • Separate each button with a comma (,).
  •  Text text: {}

3. Save. Simpan template!

4. Saat menulis posting, klik mode HTML. Copas isyarat ini untuk menampilkan Tombol 'Share to Unlock'

<article class="socialLocker">
 <div class="to-lock" style="display:none;">
  -- Your Content / Link Download --
 </div>
</article>

DEMO











CARA LAIN
Ini penampakannya.

Konten Premium Blogger ini dalam bahasa Inggis disebut Cara Membuat Tombol 'Share to Unlock' Konten Premium Blogger

Cara memasangnya:

1. Tema > Edit HTML.
2. Simpan isyarat berikut ini di atas isyarat </head> 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'type='text/javascript'/>

Catatan: Jika isyarat di atas sudah ada, eksklusif saja ke tahap berikut ini.

3. Simpan isyarat berikut diatas isyarat </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>
<style>
.secret {
text-align:center;
display:none
}
.secret-share {
padding: 20px;
text-align: center;
border: 3px solid #ddd;
background: #f8f8f8;
}
a.download-btn {
text-transform: uppercase;
font-size: 22px;
background: #7b7b7b;
padding: 10px 20px;
display: inline-block;
border: 1px solid #000000;
text-decoration: none;
color: #fff;
}
.secret-share .fb-like {
margin-top: 0;
top: -7px;
position: relative;}
.secret-share .twitter-share-button {
margin-right: 25px;
}
</style>

 4. Simpan template!

5. Saat posting, klik mode HTML. Copy paste script berikut.

<div class="secret">
<a class="download-btn" href="#">Download</a>
</div>
<div class="secret-share">
<p>Share via Facebook / Twitter / Google Plus to see Link Download</p>
<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="mybloggerlab" 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>

Catatan: isyarat warna merah yakni konten premium. Contoh di atas kalau konten premiumnya berupa link download. Anda dapat mengubahnya kalau kontennya selain link download.

6. Publikasikan!

Share to Unlock untuk Blog WordPress

Untuk blog selfhosted CMS WordPress tinggal pasang dan aktifkan Plugin Content Locker.

Itu beliau Cara Membuat Tombol 'Share to Unlock' Konten Premium Blogger. Tapi ingat, ada Social Lock Picker juga lho! Wasalam. (www.romelteamedia.com).*


Sumber
https://rumahsolved.blogspot.com/search?q=social-content-locker-for-blogger
https://geeksflame.com/create-social-content-locker-in-blogger-blogs/
https://rumahsolved.blogspot.com/search?q=social-content-locker-for-blogger
https://rumahsolved.blogspot.com/search?q=social-content-locker-for-blogger

Sumber https://www.romelteamedia.com/
Share This :

Related Post