Harry Potter - Golden Snitch

Tutorial - Add Facebook Like, Twitter, Google+ Button Dalam Post



Facebook Share, Twitter Tweet dan Google+ Button merupakan benda yang wajib ada dalam blog korang. Tools ini membolehkan pembaca blog korang untuk share apa post yang mereka nak kongsi dengan rakan2. Terdapat banyak tutorial yang mengajar cara untuk membuat tools ini, namun khai dapati cara inilah yang paling simple.

Tutorial - Add Facebook Like, Twitter, Google+ Button Dalam Post

Korang just ikut langkah2 ni:
1) Masuk ke Dashboard Blogger > Template > Edit Html > Proceed > Tick Expand Widget Templates

2) Korang tekan F3 ataupun CTRL+F, dan cari kod di bawah ni


<data:post.body/>


3) Kemudian korang Copy pula kod di bawah ni


<!-- FB Like, Twitter, Google+ Start-->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='Username Twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</b:if>

<g:plusone size='medium'/>
<!-- FB Like, Twitter, Google+ End-->



  • Paste di atas <data:post.body/> sekiranya korang nak letak di bahagian atas post
  • Paste di bawah <data:post.body/> sekiranya korang nak letak di bahagian bawah post
  • Tukarkan Username Twitter kepada Username Twitter korang


4) Lepas tu korang klik "Preview" untuk melihat hasilnya. Kalau dah ada korang boleh terus tekan save ^_^

OK! sekiranya korang nak ubah style FB like dengan Twitter Tweet, korang korang boleh gunakan kod di bawah ni pada step yang ke "3)"


<!-- FB Like, Twitter, Google+ Start-->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/> </b:if>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='Username Twitter' data-related='' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</b:if>

<g:plusone size='Medium'/>
<!-- FB Like, Twitter, Google+ End-->


Selama Mencuba ^__^


Tags: Tutorial - Add Facebook Like, Twitter, Google+ Button Dalam Post, Facebook like button dalam post, Twiter button dalam post
Sumber: LyssaSecret, HelperBlogger

No comments:

Post a Comment

Don't forget to drop your comment.. Thanks ya!

Tutorial Blog Tutorial Blog Tutorial Blog
Creative Commons License
Khaiangel (Dot) Com is licensed under a
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
.
©KhaiAngel.Blogspot.Com All Rights Reserved