Cara Membuat/Memasang Tombol Google +1 di Blogger/Blogspot



Seperti yang telah ramai diberitakan di dunia internet, Google telah membuat satu fitur baru:" Official Google +1 Button" yang merupakan tool bagi pengunjung blog/web serta search engine untuk memberikan "voting" bagi sebuah halaman blog/web yang menurutnya memiliki nilai (value) manfaat yang besar. Menurut Google, +1 Button juga memberikan referensi dan rekomendasi bagi Google dalam menentukan peringkat suatu halaman web di search engine (SERPs). Oleh karena itu, memasang tombol +1 Google bisa menjadi salah satu alternatif bagi pemilik blog/web untuk meningkatkan SEO blog/web tersebut. Meskipun saat ini fitur Google +1 baru muncul di domain google.com, namun memasangnya mulai sekarang tidak ada salahnya, karena di domain tersebut pun semua website di berbagai belahan dunia juga diperhitungkan, apalagi jika nanti fitur ini juga muncul di domain google.co.id, pasti lebih bermanfaat dan berkali lipat efeknya terhadap SEO dan SERPs.

Untuk template blogger yang default atau secara official merupakan bawaan blogger, fitur ini dapat dibuat dengan mudah melalui halaman page elements/edit gadget, karena fitur ini sudah secara resmi ditambahkan ke Blogger. Perhatikan gambar berikut:


Tombol +1 Google dapat dengan mudah ditampilkan dengan mencentang "Show Share Button". Masuk ke dashboard > design/rancangan > kemudian klik "edit post " di bagian badan template dan akan tampil pop up window seperti gambar di atas.

Namun, bagi template yang sudah dimodifikasi dan bukan default template, fitur "share button" biasanya telah dihapus. Oleh karena itu diperlukan editing template HTML untuk menambahkan fitur/tombol +1 Google tersebut.
Secara official, ada 3 jenis button atau tombol Google +1:
standard
medium
small

1. Masuk ke dashboard > design/rancangan > edit HTML >"expand widget templates"
2. Copy kode berikut dan paste tepat SEBELUM </head>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
3. Copy kode berikut:
<!-- Google +1 Button  -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;padding:4px;'>
<g:plusone size="standard"></g:plusone>
</div>
</b:if>
<!-- http://buka-rahasia.blogspot.com -->
Kostumisasi Tombol Google +1:
a. Ganti standard dengan medium atau small jika ingin mengubah ukuran tampilan button/tombol seperti contoh di atas.
b. Ganti right dengan left jika ingin button/tombol berada di sisi kiri.
c. Kode berwarna biru akan menampilkan tombol hanya ketika halaman posting dibuka. Jika anda menggunakan auto readmore, maka tombol tersebut tidak akan muncul di post summary, sehingga tampilan post summary tidak akan rusak.  Jika anda tidak menggunakan auto readmore atau menggunakan readmore tapi tetap ingin menampilkannya di post summary, hapus kode biru tersebut.

Cara Memasang Google +1 Button:
(Update: Ini sekaligus untuk menjawab beberapa permasalahan yang disampaikan dalam beberapa komentar di bawah):

>> Karena banyaknya permasalahan ketika memasang tombol Google +1, kode yang harus dicari saya ubah untuk memudahkan pemasangan (meskipun sebenarnya sama saja, hanya untuk memudahkan pencarian)
4. Jika ingin memasang button di bagian bawah posting, cari <div class='post-header-line-1'/> (gunakan Ctrl+F) dan paste kode tersebut tepat di BAWAH-nya. Jika kode tersebut tidak ketemu, letakkan kode di ATAS <data:post.body/>.
5. Jika ingin memasang button di bagian bawah posting, cari  <data:post.body/> (gunakan Ctrl+F) dan paste kode tersebut tepat di BAWAH-nya.
6. Save template.

>> Tombol Google +1 sebenarnya sampai saat ini masih menjadi uji coba Google, baik dalam script-nya (beta) maupun dalam fungsinya sebagai vote dan share hasil pencarian. Seperti yang saya amati, script Google +1 masih tidak stabil; baik dalam fase file downloading-nya maupun ketika diload oleh beberapa browser tertentu. Kadang-kadang tombol tidak muncul atau kita tidak bisa melakukan vote, sehingga, ketika setelah script dipasang tombol tidak muncul, kemungkinan juga disebabkan oleh permasalahan itu.


mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

70 comments:

  1. Waaah komplit nih tutornya.. makasih banyak gan.

    ReplyDelete
  2. wah bisa langsung di coba nie..!! sebelumnya trimakasie...!!

    ReplyDelete
  3. saya tes dulu pak...
    :)
    salam hangat

    arishare.blogspot.com

    ReplyDelete
  4. Kayaknya aku punya udah ada dengan sendirinya tuh, Mas. Akunya malah yang bingung kemarin, ini angka +1 apaan? Kok ada dimari? :D

    ReplyDelete
  5. @ mas gembel, Ari_Creative : yup silahkan dicoba bro-bro semua, salam hangat juga :D

    @ uni Dewi: Iya uni, kan itu template punya uni bawaan official dari Blogger, jadi fitur itu otomatis udah ditambahkan. :D

    ReplyDelete
  6. mantep bang... baru aja di asang di blog ane... keren....

    ReplyDelete
  7. @ mobile phone blog : Good :D

    @ RENO-Planet Ultraman™ : Thanks a lot, bro! :D

    ReplyDelete
  8. kok nggak muncul di blog aku yah ?

    ReplyDelete
  9. @ anshari:
    silahkan dicek lagi, mungkin ada kesalahan dalam memasang script.

    ReplyDelete
  10. thanks infonya ...
    salam kenal

    ReplyDelete
  11. atas ketidak nyamanan ini saya mohon maaf...
    link nya sudah terpasang..
    thx

    ReplyDelete
  12. Okay, thanks for your quick response :D

    ReplyDelete
  13. sukses mas,, thx tipsnya,
    cuma point 4 ga muncul n pas ane cobain point 5 malah muncul di bawah judul tombolnya, hehe

    ReplyDelete
  14. Bang.. Q baru aja nyoba tapi kok tombolnya gak mau keluar, pdhal sudah bner masangnya,. Q pake template lay out tolong solusinya..
    Dan salam kenal..

    ReplyDelete
  15. yup salam kenal juga, silakan baca update saya pada postinbg di atas.

    ReplyDelete
  16. thanks infonya
    kalau jalan2x mampir ya ke
    http://mylaboratorium.blogspot.com/

    ReplyDelete
  17. Thank you bgt tutornya, gan. akhirnya tombol google +1 terpasang di blog saya. :)

    ReplyDelete
  18. Bener2 up to date nih artikelnya bro ... nice share

    ReplyDelete
  19. This comment has been removed by a blog administrator.

    ReplyDelete
  20. tfs sob..
    mangtabs nih...

    salam damai kami sepanjang hari...

    ReplyDelete
  21. ckkckckckckc pada pelit pelit orang disini masa dah di kasih tau cara pasang google +1 ga ada yang vote +1 ni blog durjana kalian semua ..... sabar ya gan.... hehehehhheh
    klo ga sabar liat vote +1 nya kecil pakel +1 exchange ajah gan.... bisa dapet ratusan vote +1 perhari hehehehehehhe.... sama kaya blog w

    ReplyDelete
  22. @Tongkonanku, Toys and Hobbies,dwisTROi, tips ngeblog:
    yup, terima kasih kembali.

    @fajrih: its okay, bro. bagi saya pribadi, saya tidak meminta, apalagi memaksa pengunjung mengklik/vote +1 Google, follow, atau yang sejenisnya di blog saya. itu semua terserah pengunjung untuk menentukan. Setiap tindakan akan tercermin dengan sendirinya. Saya juga kurang sepakat dengan segala sesuatu yang kurang natural. itu prinsip saya untuk blog ini.Persahabatan terbangun karena komunikasi dan bukan karena pamrih-pamrihan. thanks for the comment, anyway. :D

    ReplyDelete
  23. hehe langsung ke tekape gan :)

    ReplyDelete
  24. mantap mas..pasang segera...

    ReplyDelete
  25. Sudah saya coba. Tapi ga muncul masbro... hehehe...

    ReplyDelete
  26. silahkan dicoba lagi, jika memang tidak muncul2, kemungkinan juga karena masalah script +1 Google yang masih belum stabil, seperti yang saya sampaikan di atas.

    ReplyDelete
  27. Button google +1 tidak muncul di blog sy padahal script sudah sy masukkan di atas tag head
    kenapa ya...

    ReplyDelete
  28. Anda kan pake template official dari Blogger, jadi script yang anda pasang tidak bisa muncul karena crash dengan Button plus one yang sudah ada di bagian bawah posting.

    ReplyDelete
  29. terima kasih untuk infonya... sangat bermanfaat... :D

    ReplyDelete
  30. kalo saya masangnya di sidebar mas bro, tapi kalo dari opera mini kenapa gak muncul ya?

    ReplyDelete
  31. dari opera mini, halaman yang terload secara otomatis adalah mobile version, dan versi ini tidak memunculkan widget bro... jadi menurut saya lebih baik dicoba dipasang di bagian posting saja :D

    ReplyDelete
  32. Mantrap,thanks sob....keep your update...

    ReplyDelete
  33. Wah wah.. Karena aq pake template dari luar(bukan bawaan blogger) jadi ga bisa munculkan sepenuh nya tombol share. Alhasil aku cuma masang google +1. Cari kesana kemari ga ada yang cocok dengan template ku. terus nemu Tutor 1 ini, cihuy.. berhasil.. Makasi ya kk. Senangnya.. walau ga bisa nampilkan sepenuhnya share button dari blogger. hik hik.. Aku banyak belajar dari blog ini, baik dari kode, design, ceo, dll. semua deh.. ada juga posting yang ku buat ngambil referensi dari sini. ^_^
    Makaci yah..

    ReplyDelete
  34. paling tidak Google +1 menyumbang popularitas halaman di mata Google. Ada statistik Google +1 loh di Google Wevmaster Tools. So pasti itu berkaitan dengan SEO.

    ReplyDelete
  35. Good,bisa dicoba nih !Good,bisa dicoba nih !

    ReplyDelete
  36. tutorialnya sangat bermanfaat kawan :-)

    ReplyDelete
  37. toturial ini sangat membantu saya sob.
    terima masih sudah berbagi

    salam belogger

    ReplyDelete
  38. Thanks untuk postingan lengkapnya..., Bila sempat kunjungan balik sob

    ReplyDelete
  39. mau nanya sob, cara biin daftar isi d halaman dengan tampilandaftar isi kayak gini gimana ya http://dunia-blogger.blogspot.com/p/daftar-isi.html

    ReplyDelete
  40. anda bisa merujuk ke posting ini: http://buka-rahasia.blogspot.com/2011/05/daftar-isi-sitemap-di-bloggerblogspot.html
    atau jika ingin benar2 mirip, dalam kesempatan lain akan saya post scriptnya.

    ReplyDelete
  41. mantap infonya mas...ditunggu info selanjutnya

    ReplyDelete
  42. sudah saya coba dan ternyata sukses bro,,
    terima kasih banyak

    ReplyDelete
  43. Kok punya ku gak mau muncul2 yah.. padahal dah coba pasang sana sini.. kode yang di maksud juga gak bisa di temukan pake ctrl F jadi harus di pasang di mana yah?

    ReplyDelete
  44. ternyata berhasil makasih ya atas infonya

    ReplyDelete
  45. infonya sangat membantu, dan saya sudah pasang sekarang

    ReplyDelete
  46. thx bro, dah kepasang nehh..
    http://just4free-download.blogspot.com
    download free pc n mobile games

    ReplyDelete
  47. saya pasang di sebelah tombol like facebook kok ga sejajar mas ???

    coba di dek

    ReplyDelete
  48. Bagus mas artikelnya
    Sangat membantu bagi pemula seperti saya :-)
    Makasih banyak deh

    ReplyDelete
  49. gan, mw nanya... gmna cara buat tweet, facebook like, dan tombol +1 kyk di sidbar agan ?

    ReplyDelete
  50. wah telat nich,, tapi mantap gan,, thakns for sharing,
    gudangkoleksi.blgospot.com

    ReplyDelete
  51. Tutorial blog ini bagus kak. Barusan nyoba-nyoba juga buatnya. Makasih banyak. Semoga bisa ngeblog dengan baik lagi dan mendesain blog sebaik mungkin
    http://agiegi.blogspot.com

    ReplyDelete
  52. ijin nyimak gan... nais inponya.

    ReplyDelete
  53. Saya udah nyoba dan berhasil.
    terima kasih gan...

    ReplyDelete
  54. Letak expand widget itu di mana yah mas ? . Kok saya cari-cari setelah edit html itu ndak ada mas...

    ReplyDelete
  55. SUdah tidak ada. Sekarang editor sudah dalam bentuk baru. Informasinya sudah saya sampaikan di bawah artikel. simak di sini: http://buka-rahasia.blogspot.com/2013/08/cara-mencari-kode-blogger-template-editor.html

    ReplyDelete

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.