Blogger Tutorial 08. Menambahkan Tombol Twitter Share

Twitter telah mengeluarkan tombol sharing baru dengan fasilitas counter. Manfaat paling utama dari twitter sharing ini adalah pembaca artikel posting akan otomatis menjadi follower-mu begitu dia tweets posting blog kamu
.

Twitter telah beberapa jenis tombol berbeda-beda, berikut beberapa model tombol tersebut :

Model 1. Tombol dengan Vertical Counter-Floating Kanan Atas (Kode di bawah ini)

<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-related='user-name-twitter-mu:deskripsi-twitter-mu' data-count='vertical' data-via='user-name-twitter-mu'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

Model 2. Tombol dengan Vertical Counter-Floating Kiri Atas (Kode di bawah ini)

<div style="float:left;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-related='user-name-twitter-mu:deskripsi-twitter-mu' data-count='vertical' data-via='user-name-twitter-mu'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

Model 3. Tombol dengan Vertical Counter-Floating Kanan Bawah (Kode di bawah ini)

<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-related='user-name-twitter-mu:deskripsi-twitter-mu' data-count='vertical' data-via='user-name-twitter-mu'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

Model 4. Tombol dengan Vertical Counter-Floating Kiri Bawah (Kode di bawah ini)

<div style="float:left;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-related='user-name-twitter-mu:deskripsi-twitter-mu' data-count='vertical' data-via='user-name-twitter-mu'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

Model 5. Tombol dengan Horizontal Counter-Floating Kanan Atas (Kode di bawah ini)

<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-related='user-name-twitter-mu:deskripsi-twitter-mu' data-count='horizontal' data-via='user-name-twitter-mu'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

Model 6. Tombol dengan Horizontal Counter-Floating Kiri Atas (Kode di bawah ini)

<div style="float:left;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-related='user-name-twitter-mu:deskripsi-twitter-mu' data-count='horizontal' data-via='user-name-twitter-mu'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

Model 7. Tombol dengan Horizontal Counter-Floating Kanan Bawah (Kode di bawah ini)

<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-related='user-name-twitter-mu:deskripsi-twitter-mu' data-count='horizontal' data-via='user-name-twitter-mu'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

Model 8. Tombol dengan Horizontal Counter-Floating Kiri Bawah (Kode di bawah ini)

<div style="float:left;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-related='user-name-twitter-mu:deskripsi-twitter-mu' data-count='horizontal' data-via='user-name-twitter-mu'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

Model 9. Tombol tanpa Counter (Kode di bawah ini)

<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-related='user-name-twitter-mu:deskripsi-twitter-mu' data-count='none' data-via='user-name-twitter-mu'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

Oke rasanya sudah terlalu banyak model & kode yang ditampilkan, untuk lebih bagusnya anda kreasikan sendiri saja yaaaa ....  :)
Nah sekarang caranya pasang seperti ini :
1. Perhatikan setiap pilihan tombol share dengan kode yang berwarna merah. Kode berwarna merah tersbut ganti dengan username & deskripsi twittermu sendiri.
2. Masuk ke dasboard blogger
3. Pilih rancangan
4. Pilih edit html
5. Centang Expand widget templates (Tunggu loading sebentar)
6. Sekarang cari kode dibawah ini (Gunakan fasilitas CTRL F untuk mempermudah pencarian)

<data:post.body/>

7. Masukkan kode tombol twitter yang telah kamu pilih tepat diatas kode langkah nomer 6.
8. Save Templates
9. Tombol share Twitter sudah muncul

-Semoga Bermanfaat-
Knowledge is an open source