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

Cara Membuat/Memasang Tombol Google +1 di Blogger/Blogspot
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 70 Comment(s):

RENO-Planet Ultraman™ said...

Waaah komplit nih tutornya.. makasih banyak gan.

Unknown said...

olret bro...sip dah!

mas gembel said...

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

Unknown said...

saya tes dulu pak...
:)
salam hangat

arishare.blogspot.com

DewiFatma said...

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

Unknown said...

@ 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

mobile phone blog said...

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

RENO-Planet Ultraman™ said...

hehehe..+1 meluncur bro.. :D

Unknown said...

@ mobile phone blog : Good :D

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

anshari said...

kok nggak muncul di blog aku yah ?

Unknown said...

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

Unknown said...

thanks infonya ...
salam kenal

hatta said...

langsung praktek brooo

3zr4 said...

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

Unknown said...

Okay, thanks for your quick response :D

Toys and Hobbies said...

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

Imam Maksum said...

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..

Unknown said...

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

Al Hikmah Blog said...

Nice info | cobain ah

My Laboratorium said...

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

Tutorial Photoshop said...

bingung

Tongkonanku said...

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

FADHOLI said...

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

Darana-xp said...
This comment has been removed by a blog administrator.
dwisTROi said...

tfs sob..
mangtabs nih...

salam damai kami sepanjang hari...

Unknown said...

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

tips ngeblog said...

Good share frend..

Unknown said...

@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

jgdjagtm said...

hehe langsung ke tekape gan :)

Rachmad said...

mantap mas..pasang segera...

Tyo Nugroho said...

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

Unknown said...

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

Rina As said...

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

Unknown said...

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.

Ivan Sujatmoko said...

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

TOP 1 Oli sintetik mobil-motor Indonesia said...

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

Unknown said...

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

Unknown said...

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

YauNi said...

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..

Jadwal Puasa said...

Ada ngaruhnya ga buat seo gan?

Unknown said...

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.

Unknown said...

@Yauni: Ur welcome.

Unknown said...

Good,bisa dicoba nih !Good,bisa dicoba nih !

bisotisme.com said...

Selesai, terimakasih mas

PonselPromo said...

tutorialnya sangat bermanfaat kawan :-)

gang tutorial said...

thank impnya gan

Jurnal Secience said...

toturial ini sangat membantu saya sob.
terima masih sudah berbagi

salam belogger

Frans PC said...

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

Appri said...

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

Unknown said...

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.

Asriadi said...

mantap infonya mas...ditunggu info selanjutnya

gmbelART said...

thanks infonya .. :D

BAGUSBOLASEPAK said...

sudah saya coba dan ternyata sukses bro,,
terima kasih banyak

mjumani said...

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?

rougerdeluffy said...

tak oba dulu ya moga bisa

rougerdeluffy said...

ternyata berhasil makasih ya atas infonya

marketivaus said...

infonya sangat membantu, dan saya sudah pasang sekarang

Anonymous said...

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

Pian Uhuy said...

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

coba di dek

A TechnoLedge Blog said...

udah ane coba gan :) Berhasilll !

Gudang Puisi said...

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

kade said...

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

ChirShud said...

q bingung cara backling...?

Unknown said...

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

qsuwoengs said...

tank's sob infonya..

CERITA CINTA said...

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

Anonymous said...

ijin nyimak gan... nais inponya.

Eko_P90 said...

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

Unknown said...

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

Unknown said...

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

Post a Comment

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.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap