Cara Tambah Icon Social Media Sharing Button Di Entry Blog Post
Untuk rakan blogger yang membuat blog baru samada menggunakan template blog blogspot yang mudah atau menggunakan template blog percuma dari mana-mana web, anda mungkin perasan bila ada antara template blog percuma yang anda dapat tidak mempunyai 'social media button share'?Bagi blogger, butang 'share' untuk media sosial seperti Twitter, Facebook, Google+ dan Pinterest ini penting untung menaikkan trafik blog anda.
MrJocko baru sahaja tambah icon Social Media Sharing Button di blogpost Travelibur.com. Jom sama-sama kita belajar bagaimana untuk meletakkan kod html Icon Social Sharing Button Di Entry Blog Post.
1. Go to Template > Edit HTML.
2. Back up your template.
3. Tick the Expand Widget Templates checkbox on top right of the code window.
4. Next, locate the first instance of <data:post.body/> tag and paste the following code immediately above it:
We place this limit because the button only pins the page on which it appears. As such on homepage (if we were to allow it there), every instance of the button will pin the homepage, not the post (as it’s “supposed” to).
The Pinterest script in line 45 must occur only once in your blog. Omit this line if you’ve already had the script in your blog.
5. Buttons positioning To position the buttons at the bottom of post, place the code below (instead of above) <data:post.body/>.
6. Preview before saving.
Enjoy!
![]()
![]()
Untuk rakan blogger yang membuat blog baru samada menggunakan template blog blogspot yang mudah atau menggunakan template blog percuma dari mana-mana web, anda mungkin perasan bila ada antara template blog percuma yang anda dapat tidak mempunyai 'social media button share'?Bagi blogger, butang 'share' untuk media sosial seperti Twitter, Facebook, Google+ dan Pinterest ini penting untung menaikkan trafik blog anda.
MrJocko baru sahaja tambah icon Social Media Sharing Button di blogpost Travelibur.com. Jom sama-sama kita belajar bagaimana untuk meletakkan kod html Icon Social Sharing Button Di Entry Blog Post.
1. Go to Template > Edit HTML.
2. Back up your template.
3. Tick the Expand Widget Templates checkbox on top right of the code window.
4. Next, locate the first instance of <data:post.body/> tag and paste the following code immediately above it:
<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(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 =
"http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(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);
})();
</script>
<!-- Twitter -->
<script>!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0
10px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en'
data-related='' data-via='' expr:data-text='data:post.title'
expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url'
size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font=''
layout='button_count' send='true'
show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px;
width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin'
expr:href='"http://pinterest.com/pin/create/button/?url=" +
data:post.url'><img
src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside'
data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/'
style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js'
type='text/javascript'></script>
<style type='text/css'>
#pin-wrapper > a {background-image:none !important;}
</style>
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->
Note: Pin It button will only appear on post pages.
We place this limit because the button only pins the page on which it appears. As such on homepage (if we were to allow it there), every instance of the button will pin the homepage, not the post (as it’s “supposed” to).
The Pinterest script in line 45 must occur only once in your blog. Omit this line if you’ve already had the script in your blog.
5. Buttons positioning To position the buttons at the bottom of post, place the code below (instead of above) <data:post.body/>.
6. Preview before saving.
Enjoy!
Travelibur Sebelum
Travelibur Selepas
