Blogger Tutorial

Cara Memasang Google +1 [Plus One] Button Di Blogspot

15.05,18 Comments


Tanpa perlu saya jelaskan pun, sebenernya saya yakin sebagian besar diantara anda pasti udah gak asing lagi dengan nama Google +1 [Plus One] Button. Bahkan tanpa saya menuliskan postingan ini pun, saya rasa banyak diantara anda yang sudah menggunakannya di blog anda masing-masing, bener gak? Lantas kenapa akhirnya saya memutuskan untuk membuat postingan ini? karena ada seseorang yang menanyakan pertanyaan berikut ini kepada saya:

"Mas, barusan saya coba pasang tombol G+1 di blog saya (Catatan: saya gak tau dia dapet tutorialnya dari mana), tapi kenapa ya tombol itu hanya muncul di home dan tiba-tiba menghilang jika saya masuk kesalah satu postingan, gimana cara munculin tombol itu disetiap postingan? tq"


Okeh, sebelum menjawab pertanyaan diatas, ada satu pertanyaan lain yang ditunjukkan kepada saya, yang secara kebetulang masih nyambung sama pembahasan tentang Google +1 [Plus One] button ini hhe ... dan pertanyaannya adalah:

"Apa sebenernya kegunaan Google +1 [Plus One] button ini hingga kita harus memasangnya di Blog?"


Boleh saya jawab? okeh, gini klo menurut saya pribadi sebenernya anda gak harus masang Google +1 [Plus One] button di blog anda, karena tanpa anda pasangpun orang lain sebenernya bisa memberikan +1 untuk halaman home/ Index blog anda maupun salah satu postingan anda jika kebetulan mereka mendapati salah satu postingan anda muncul dalam hasil pencarian mbah "Google" dengan keyword yang sedang mereka cari.

Kenapa? karena dalam hasil pencariannya, Mbah "Google" sebenarnya sudah menampilkan Google +1 [Plus One] Button. Klo gak percaya silahkan perhatikan gambar dibawah ini:

Catatan: Screen shoot diatas saya ambil dengan mengetikkan keyword "Google AdSense". Dan hasil pencariannya untuk keyword "Google AdSense" yang kali ini screen shootnya saya gunakan untuk contoh sebenernya masih banyak lagi yang lain, cuma secara etika klo saya mau nayangin screenshoot url lain saya mesti minta izin dulu kan? makanya saya pilih Urlnya Mbah Google aja yang netral, lagian yang saya comot gambar "Adsense for Search" juga kan, jadi gak mungkin tiba-tiba Google meminta saya menghapus gambar diatas wkwkwk...

Intinya, saya cuma ingin menunjukkan kepada anda bahwa dalam hasil pencariannya, Google pun telah menambahkan Google +1 [Plus One] button yang bisa langsung di klik jika anda sedang dalam keadaan LogIn ke Google Account. So, tanpa perlu dipasangpun sebenernya orang lain bisa memberikan +1 untuk anda.

Tapi ya balik lagi, klo di cek secara detail pun visitor blog anda gak semuanya berasal dari Google kan? pasti adalah yang dateng dari Ask.Com, Yahoo!, Bing atau lainnya. Bener gak? Nah untuk mereka yang mengunjungi blog anda dari Search Engine atau referall link lain kaya Directory Blog, secara default mereka gak akan ngeliat tombol Google +1 dalam hasil pencariannya Ask, Yahoo!, bing maupun lainnya, padahal bisa aja pengunjung yang dateng ke blog anda ingin memberikan +1 karena mereka merasa postingan anda bermanfaat dan kebetulan mereka memiliki Google Account. Bener gak? Nah, disini letak kegunaan Google +1 [Plus One] button tersebut jika anda memasangnya di Blog anda, karena orang lain dapat dengan mudah memberikan +1 jika mereka merasa postingan anda bermanfaat bagi mereka.

Lantas apa keuntungannya bagi anda, jika orang lain memberikan +1 untuk postingan tersebut?


Menurut Google, semakin banyak sebuah postingan mendapatkan +1, semakin baik pula postingan tersebut dimata Google, atau dengan kata lain, Google +1 [Plus One] bisa kita samakan dengan ratings atau like, yang diberikan oleh orang lain untuk menilai seberapa bagus konten tersebut dimata mereka.

Gimana? Sampai disini, ada yang berniat untuk masang? Klo ada anda bisa mengikuti panduan yang saya berikan dibawah ini:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
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 anda lebih suka menggunakan bahasa Indonesia.

6. Kemudian letakkan Script dibawah ini ditempat yang anda 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 anda mau meletakkannya dibagian atas postingan anda bisa meletakkan script tersebut sebelum atau diatas kode <data:post.body/> atau kode <p><data:post.body/></p>

Tapi klo anda 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 anda dan lihat hasilnya. Klo tahap demi tahap dalam panduan diatas sudah anda ikuti dengan benar, seharusnya Google +1 [Plus One] button sudah dapat anda lihat di setiap postingan blog anda.

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

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

Atau sebagai options lain, jika tidak ingin memasangnya didalam postingan, anda bisa memasangnya secara float dibagian atas atau bawah sebelah kiri atau kanan blog anda, seperti yang dapat anda 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 anda rubah sesuka hati anda hhe...

Klo udah, Save template dan lihat hasilnya.

Dan sekarang saatnya saya menjawab pertanyaan utama yang menyebabkan saya membuat postingan ini, yaitu kenapa ada yang bisa memunculkan Google +1 [Plus One] button ini disetiap page, tapi ada juga yang hanya bisa menampilkannya di bagian home atau index?

Simple, setelah saya cek ke blog penanya, ternyata dia meletakkan script berikut ini:

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


Sebelum atau diatas kode </body> dan bukan diatas atau sebelum kode </head>, itu kenapa Gooogle +1 [Plus One] button hanya muncul di Home saja dan bukan disetiap page postingan. Gak tau yang nanya dapet tutorialnya dimana, yang jelas itulah penyebab utama Google +1 [Plus One] button hanya tayang dihalaman homenya dan bukan disetiap postingan seperti yang diinginkannya.

Okeh, saya kira itu jawaban saya atas pertanyaan tersebut... Dan untuk anda yang ingin mencoba panduan diatas, saya ucapkan selamat mencoba.... :)




hosting indonesia

You Might Also Like

18 komentar:

  1. Lengkap sekali penjelasannya, pasti saya akan berkunjung kembali

    BalasHapus
  2. Mantap mas bro jadi terimakasih atas ilmunya

    BalasHapus
  3. @ serba serbi : sama2 sob... :D

    BalasHapus
  4. Infonya sangat bermanfaat. thx

    BalasHapus
  5. @ kakalushop: Makasih sob... sama2...

    BalasHapus
  6. mantap info google +1.
    jangan lupa jalan-jalan ke blog ku.
    blog dofollow

    BalasHapus
  7. wah...terima kasih sekali sob atas infonya...sudah ane pasang nih tombol google plusnya...
    kalau ada waktu mampir ke blog ane ya..bantu sundul klik google plus...sekali lagi terima kasih...

    BalasHapus
  8. Thx berat mas... keliling2 nyari gak ada yang lengkap. cumen disini aja yang lengkap.. ane dah + gan, g+ balik ya

    BalasHapus
  9. wah, banyak amat nih caranya, ane bingung pake yg mana...

    BalasHapus
  10. Sangat membantu sekali infonya gan..makasi

    BalasHapus
  11. pntes g mncul-mncul ampe puyeng, mksh bro infonya..

    BalasHapus
  12. makasi infonya masbrow..sangat bermanfaat

    http://petrobiz.16mb.com

    BalasHapus
  13. Cukup bermanfaat, makasih y

    BalasHapus