Tuesday, December 29, 2009

Menambah Icon Tweet This dan Retweet pada Blogspot

Twitter telah menjadi fenomena baru setelah Facebook, yaitu salah satu social network yang paling pesat pertumbuhannya, dan ini akan mendatangkan lebih banyak pengunjung pada blog yang sudah mempunyai pengikut setia/follower.

Lalu bagaimana memanfaatkan Twitter ini untuk menaikkan traffic pada blog kita? Sederhana sekali, tambahkan icon Tweet This atau Retweet pada Blog kita (dalam hal ini Blogspot). Icon Tweet This maupun Retweet dapat kita letakkan pada awal posting kita maupun pada akhir posting.

Berikut penjelasan singkat bagaimana menambahkan icon Tweet This maupun Retweet pada awal posting kita.

Mulai dengan Retweet :

1. Login ke Dashboard kemudian masuk ke "Layout" dan buka Tab "Edit HTML". Sebaiknya lakukan Backup Template sebelum melakukan perubahan ini dengan men-download template sebelumnya.
2. Kemudian selanjutnya centang pada kolom "Expand Widget Template".
3. Gunakan Ctrl + F untuk mencari kode berikut jika ingin menambahkan icon Tweet This atau Retweet setelah Judul Posting :
<div class='post-header-line-1'>

atau kode ini jika ingin menambahkan icon Tweet This atau Retweet pada sebelah kanan atas posting anda :
<div class='post-body entry-content'>

4. Masukkan Kode dibawah ini setelah kode pada poin No. 3 :
<div style='float:right; margin-left:14px;'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

5. Simpan Template Anda dan Lihat Hasilnya .... Cukup mudah bukan...

Anda bisa merubah icon Retweet diatas yaitu seperti ini :
dengan icon yang lebih kecil seperti ini : dengan mengganti kode pada langkah No 4. dengan kode dibawah ini :
<div style='float:right; margin-left:14px;'>
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>


Sedangkan untuk menggunakan Icon Tweet This masukkan Kode dibawah ini untuk menggantikan Kode pada langkah No. 4. :
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://i34.tinypic.com/105uwy8.jpg'/></a>

Tampilan Iconnya seperti ini :

Anda dapat merubah Iconnya sesuai selera dengan masukkan target url icon Tweet This kesukaan Anda.
Bisa Anda cari disini : 100 Remarkably Beautiful Twitter Icons and Buttons

Ingin menambahkan Icon Tweet this setelah Posting?
Pada Langkah No. 3 diatas cari kode seperti ini :
<div class='post-footer-line post-footer-line-1'>

Jika tidak ketemu bisa juga memasukkan kodenya setelah kode ini :
<p><data:post.body/></p>

Kemudian setelahnya masukkan kode ini :
<b:if cond='data:blog.pageType == "item"'><span style='float: left; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDBv5gqyC6KJetdnIPs5q0sSNOeDLn58v9e3kz2ifNaslXD6H-Eap17om8OgIxBJ13S0nbSkdUZN3s42BJyWOL-IVa1NE0YVGpW3OmxTTyLOCzsyqxUaCn2YhgADDfz0CNSWzzL_VHn8Ft/s128/twitter-16x16.png) left no-repeat; padding-left: 20px;'><script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<script charset='utf-8' src='http://s.bit.ly/TweetAndTrack.js?v=1.01' type='text/javascript'/>
<a expr:onclick='"return TweetAndTrack.open(this, \"" + data:post.url + "\");"' href='#'>
<span style='display:none;'>I'm reading: <data:post.title/></span>Tweet this!</a></span></b:if>

Simpan Template Anda dan Selesai.

1 comment:

andre said...

thx tutorialnya
sangat berguna bagi nubi sperti saya yang baru belajar
------------------------------------
gadget
http://gadget-mini.blogspot.com/