Cara Membuat Tweet Button

Pada kesempatan kali ini, saya ingin mengajak anda untuk memasang tombol Tweet By Twitter. Lihat pada gambar berikut

Anda bisa membuatnya dengan mengunjungi Tweet Button
Untuk membuatnya, pertama login ke blog anda --> Rancangan --> Edit HTML klik Expand Template Widget untuk memberi tanda centang
Cari kode

<data:post.body/>

Anda akan menemukan 2 <data:post.body/> jika anda menggunakan Read More Otomatis. Letakkan kode berikut pada <data:post.body/> yang kedua.

Untuk Vertikal Count

<b:if cond="data:blog.pageType == &quot;item&quot;">
</b:if>

<div style="float: right; margin-left: 10px;">

<a class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME" href="http://twitter.com/share">Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script></div>

Untuk Compact Button

<b:if cond="data:blog.pageType == &quot;item&quot;">
</b:if>

<div style="float: right; margin-left: 10px;">

<a class="twitter-share-button" data-count="horizontal" data-via="TWITTER-USERNAME" href="http://twitter.com/share">Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script></div>

Dan Untuk Button No Count

<b:if cond="data:blog.pageType == &quot;item&quot;">
</b:if>
<div style="float: right; margin-left: 10px;">
<a class="twitter-share-button" data-count="none" data-via="TWITTER-USERNAME" href="http://twitter.com/share">Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script></div>

*Edit yang bewarna biru sesuai kemauan anda jika anda mengerti kode tersebut.
*Sedangkan kode yang bewarna merah tersebut adalah model model dari tweet button tersebut.

Sebagai contoh

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right; margin-left:10px;'>
<a class='twitter-share-button' data-count='none' data-via='kukuhcdh' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</b:if>

Kode tersebut adalah kode Tweet No Count yang terletak dibawah
Yang bewarna tebal kuning adalah Username Twitter saya (sekalian di follow bisa, hehe)
Yang bewarna ungu adalah <data:post.body/> yang pertama.
Yang bewarna hijau adalah  <data:post.body/> yang kedua tempat anda meletakkan kode tersebut.

Anda juga bisa menentukan diatas atau dibawah letak Tweet Button anda dengan meletakkan kode yang bewarna orange diatas kode <data:post.body/> yang kedua, sehingga menjadi seperti ini

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div style='float:right; margin-left:10px;'> 
<a class='twitter-share-button' data-count='none' data-via='kukuhcdh' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
 </div> 
</b:if>
 <data:post.body/>

Sebagai contoh lihat gambar berikut
Sekian, Semoga membantu.Dan selamat mencoba

Tweet

Artikel Terkait:

Trick Blog

• Trick Blog | Recent Post With Thumbnail Horizontal
• CSS3 | Transform Rotate : Memutar Text / Gambar
• Trick Blog | Berbagai Macam Cursor
• CSS3 | Create Beautiful Button
• CSS3 | Create Bubble Coda Style
• CSS3 | Membuat Background Pada Web Full Page
• Membuat Facebook Fans (Like Box) Pada Blog
• Membuat Background Efek Gradient Dengan CSS3
• Menyembunyikan Avatar Pada Komentar Blog
• Cara Memberikan Image Verification Pada Komentar

Twitter

• Twitario - Lihat Tweets Dalam Bentuk Diari
• Social Networking With TweetDeck
• Cara Membuat "Follow Me On Twitter"
• Cara Mengganti Bahasa Pada Twitter
• Cara Protect Twitter