News Update :

Wednesday, December 21, 2011

Memasang Tombol Google +1 [Plus One Button] Di Blog

Share this article :

21:33 |

Pernahkah sobat memasang script tombol Google +1 tiba-tiba hilang (gak muncul) sedangkan scrip itu diambil dari situs resminya google (http://www.google.com/webmasters/+1/button/) kejadian tersebut sering dialami semua pengguna blog jadi jangan langsung putus asa.

Berikut tutorial Memasang Google +1 [Plus One] Button Di Blog
1. Login ke Akun Blogger sobat masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template sobat)
4. Cari kode </head> (Biar gampang pake CTRL+F aja)
5. Klo udah, letakkan script dibawah ini tepat diatas atau sebelum kode </head> tersebut.

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>

atau

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'id'}
</script>
Jika sobat lebih suka menggunakan bahasa Indonesia.

6. Kemudian letakkan Script dibawah ini ditempat yang sobat inginkan
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;padding:4px;'>
<g:plusone size='standard'/>
</div>
</b:if>

Biasanya sih orang-orang lebih suka meletakkan script tersebut dibawah kode <div class='post-header-line-1'/>, tapi beberapa ada juga yang meletakkannya sebelum atau setelah kode <data:post.body/> karena mereka gak bisa menemukan kode <div class='post-header-line-1'/> tersebut.

Tapi biar gampang gini aja, klo sobat mau meletakkannya dibagian atas postingan sobat bisa meletakkan script tersebut sebelum atau diatas kode <data:post.body/> atau kode <p><data:post.body/></p>

Tapi klo sobat ingin meletakkannya dibagian bawah postingan, silahkan letakkan script tersebut setelah atau dibawah kode <data:post.body/> atau kode <p><data:post.body/></p>

7. Jika, sudah Save Template sobat dan lihat hasilnya. Klo tahap demi tahap dalam panduan diatas sudah sobat ikuti dengan benar, seharusnya Google +1 [Plus One] button sudah dapat sobat lihat di setiap postingan blog sobat.

Dan sebagai catatan: kata standart yang saya beri warna merah dapat sobat ganti dengan medium atau small, jika sobat ingin merubah bentuk buttonnya, untuk lebih jelasnya silahkan kunjungi page resmi dari Google +1 button di LINK BERIKUT INI

Dan kata right pun dapat sobat ganti dengan left jika sobat lebih suka button tersebut terlihat disebelah kiri.

Atau sebagai options lain, jika tidak ingin memasangnya didalam postingan, sobat bisa memasangnya secara float dibagian atas atau bawah sebelah kiri atau kanan blog sobat, seperti yang dapat sobat lihat di blog ini (klo saya masangnya di sebelah kanan atas), dengan mengikuti panduan dibawah ini:

Ikuti panduan 1-5 diatas, klo udah cari Kode ]]></b:skin>, dan letakkan css berikut tepat diatas atau sebelum kode ]]></b:skin> tersebut:

#g_plusone {
position:fixed;_position:absolute;top:10px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+
document.documentElement.clientWidth - offsetWidth); }

Kemudian cari kode </body> dan letakkan script dibawah ini, tepat diatas atau sebelum kode </body> tersebut:

<div id='g_plusone'>
<g:plusone size='tall'/>
</div>

Untuk apa? untuk memanggil variabel yang kita buat di css tadi, dan klo mau variabelnya bisa sobat rubah sesuka hati sobat hhe...

Klo udah, Save template dan lihat hasilnya.

Luangkan waktu anda untuk berkomentar..

Note :- Kindly g+1 this post if you found it useful
Euro Live Streaming
You Might Also Like :


Post a Comment