How to add the button "Like to Unlock" the article Blogspot
Before starting, I recommend that you should back up the current view of the blog in order to avoid unnecessary mistakes. And if you are not clear on how to use Blogger, you can view basic serial blogger on his blog
Let Start !!
Step 1: First, you need to add the jQuery library to your blog by adding the following paragraph at the bottom of the <head>
<Script src = 'https: //ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>If you do ever more to the blog jQuery library can then skip this step
first
Step 2: Next, add the code below to above the closing </ 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);
window.twttr return || (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);
}) ();
plusOned function (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) {
$ ( ". Hide"). Show ();
$ ( ". Show"). Hide ();
}
});
//]]>
</ Script>
Step 3: Add the code below into the upper card ]]> </ b: skin>
.hide {
display: none;
background: # f9f9f9;
color: # 111;
border-radius: 5px;
border-bottom: 4px solid # f1f1f1;
padding: 20px;
}
.show {
padding: 20px;
background: # f9f9f9;
color: # 111;
border-radius: 5px;
border-bottom: 4px solid # f1f1f1;
text-align: center;
}
.show .fb-like {
margin-top: 0;
top: -7px;
position: relative;
}
.show .twitter-share-button {
margin-right: 25px;
}
How to use it?
To add the button "Like to Unlock" in the article, first switch to the HTML editor
<Div class = "hide">Including:( ...... ..) is the content will be hidden
..........
</ Div>
<Div class = "show">
To unlock the content, use one of the social buttons below. Thank you for your support and love.
<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 =" doiguocmoc "
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>
Finally, publish the article. Now, to see the hidden content, users will be forced to like, twitter, +1 your article.
Good luck
0 Response to "How to add the button "Like to Unlock" the article Blogspot"
Post a Comment