How To Add the +1 Button to Your Blog

Viyan Pradita Selasa, Juni 07, 2011

Google +1 button , Google meluncurkan kembali tombol +1 button lagi, pada bulan Maret kemarin, sebagai cara untuk membantu berbagi konten web dan membuat pencarian yang lebih personal dan relevan. Google +1 tombol memungkinkan Anda untuk mempermudah dalam menandai dan berbagi link dalam sebuah artikel website/blog lebih mudah di internet. Karena berbagi didasarkan pada Profil Google Anda, dan ia memiliki jangkauan yang luas dan visibilitas.

Ada 2 (dua) langkah cara membuatnya, Bila Sobat tertarik silahkan ikuti langkah-langkah berikut ini:

1. Menambahkan +1 Button di Blogger Cara Pertama



Untuk cara pertama bagi pengguna template asli dari blogger,
Pergi ke Desain> Page Elements di dashboard Blogger Sobat, temukan area posting Blog, klik Edit, dan pilih "Tampilkan Saham Tombol"pilihan. Jika Sobat sudah menggunakan tombol Share, tombol +1 secara otomatis akan muncul sebagai pilihan baru.

Penting !!
masalah untuk cara yang pertama adalah tombol share / berbagi tidak muncul walaupun sudah diaktifkan, ini kasus yang sering terjadi, termasuk pada template saya, disini saya tambahkan juga Cara Memunculkan Share Button Blogger, berikut caranya:

  • Tugas sobat yaitu mengoreksi kode yg sya jelaskan berikut
  • Cari kode pertama, diatas kode <b:includable id='backlinks' var='post'>

<b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.emailThisMsg/></span>
</a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.blogThisMsg/></span>
</a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
</a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
</a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToOrkutMsg/></span>
</a></b:if><b:if cond='data:top.showBuzzButton'><a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span>
</a></b:if>
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
</b:includable>

  • Amati juga untuk Kode kedualetaknya dibwah kode post-footer : <div class='post-footer'> atau di posisi line 2, line 3,misalnya line 2 : <div class='post-footer-line post-footer-line-2'>

<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>


Nah, kode diatas itu dasar yg ada pd template standart. pada kode kedua inilah yg ditemplate saya tidak ada. sekarang sobat coba bandingkan/samakan dengan kode yg ada di template sobat. caranya:

Masuk akun blogger, klik design, kemudian klik edit posting, pilh "Show Share Buttons" seperti digambar pertama diatas.
Selanjutnya coba save terlebih dahulu, dan cek apakah muncul tombol sharenya, jika di template Sobat tidak muncul silahkan ke tab menu Edit HTML > Centang kotak kecil disamping tulisan "Expand Widget Templates".

Langsung pencet CTRL+F / F3 untuk mempermudah pencarian, cek lah kedua kode diatas, kalo ada yang berbeda/kurang, pastilah kelihatan, nah disitulah permasalahnnya.
intinya usahakan kode yg ada ditemplate sobat dengan kode yang saya kasih diatas.
Hehhee.. kelihatan ribet, tp sebenere mudah.
Cara ini saya dapat di:
http://sodiycxacun.web.id/2011/06/cara-memunculkan-share-button-blogger.html

Nah, sekarang dengan cara yang ke 2 (dua)

2. Menambahkan +1 Button di Blogger Cara Kedua
Masalah keduanya adalah tombol share blogger muncul tapi tombol "+1" tidak muncul, dan dibawah ini adalah cara untuk mengatasinya:

Kode untuk menambahkan & menampilkan tombol Google +1:
  • Buka halaman Google +1 untuk kode umum untuk menampilkan tombol +1 website Anda, blog atau jurnal online.
  • Salin kode berikut dan paste di template Anda di Tempat mana yang ingin anda tampilkan tombol +1. Ini akan menunjukkan default 24px ukuran tombol standar.
  • Kode pertama, silahkan letakkan di atas kode </head> Preview-nya seperti dibawah ini

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

</head>
  • Kode yang kedua silahkan letakkan kodenya dibawah kode post footer, untuk post footer biasanya ada line 1, line 2, dan line 3, itulah yg ada di template saya, berikut contoh penempatannya

Menambahkan +1 Button di bawah judul posting blog

<div class='post-header-line-1'/>
<g:plusone></g:plusone>

Menambahkan +1 Button di bawah psotingan blog/post footer

<div class='post-footer-line post-footer-line-1'>
<g:plusone></g:plusone>

Nah begitulah kiranya Cara Menambahkan +1 Button di Blog, pastilah sobat lebih kreatif untuk menempatkan tombol +1 Button tsb, sesuaikan saja dengan template Sobat, dan selera Sobat.
Bila ada masalah silahakan berkomentar ria pada tread ini.
Terimakasih.

Sumber reverensi: http://buzz.blogger.com/2011/06/add-1-button-to-your-blog.html

Article Information:
Description: How To Add the +1 Button to Your Blog
Reviewer: Viyan Pradita - Itemreviewed: How To Add the +1 Button to Your Blog - Rating: 4.5

Ditulis Oleh :

Artikel How To Add the +1 Button to Your Blog ini dipublish pada hari: Selasa, Juni 07, 2011. Semoga artikel ini bermanfaat untuk Anda. 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.

19 komentar
Terjun Ke Kolom Komentar

  1. blog berhasil di folow kak.. ^^

    BalasHapus
  2. +1 Google ini menguntungkan kita maupun Om Google-nya sendiri ^_^

    BalasHapus
  3. @Si Oon: namaya keren ya :D sip, makasih sob, salam kenal

    @Kang AMphi: Huasik, dapet bocoran lagi neh, makasih infonya Mas Bro ?? :))

    BalasHapus
  4. hohohohoho.. 8-} salam kenal juga kak..

    BalasHapus
  5. Kok cara pertama gak berhasil ya ?? hmm

    BalasHapus
  6. @Catatan | Tips | Pengalaman: Whehehe.. keknya saya kurang menambahkan keterangan neh, iya car yang pertama khusus untuk blog yg memakai template asli dari blogger. cara kedua bisa untuk blog yg memakai template bukan dari blogger, saya perbaiki lagi postingannya. makasih sob buat koreksinya :)

    BalasHapus
  7. wahaaahaha ... nice info gan !
    aneh juga baru baca blogger buzz :D :D :p

    BalasHapus
  8. @Erix ( Fix Computer ): Iya neh gan, dapet sedikit masalah, karna share button gak mau nongol :D

    Yang diatas mungkin rada sedikit ribet, tp sebenernya mudah kalo faham dengan apa yg saya maksud. :))

    BalasHapus
  9. mantap bener sob,
    pake trik buat munculin share button bloggernya berhasil
    thanks ya :D

    BalasHapus
  10. @Yohanes: Karena ada kendala, pd template saya juga, jadi saya cari dan share caranya sekalian. sipp.. makasih Mas bro :)

    BalasHapus
  11. Wahhh...sama juga kita posts ini...Siippp and great blogs!
    Salam Jumpa dari Orang Dayak

    BalasHapus
  12. @Onho: Kompak berarti kita, hehehe :))
    Yupz, salam kenal Mas bro...

    BalasHapus
  13. Kayaknya perlu dicoba nih mas bro ;) thanks ya untuk sharing ilmunya

    BalasHapus
  14. NICE infonya friend,
    visit me too...
    http://dollardarineobuxcomtanpareferal.blogspot.com
    http://dollardarineobuxcomtanpareferal.blogspot.com

    BalasHapus
  15. waaww. keren neh. makasih tutornya gan. :)

    BalasHapus
  16. @Made Budi: Sip, silahkan Mas bro?? :)

    @apha: Thank for visiting me blog..

    @RENO-Planet Ultraman: Sama2 gan, makasih kunjungannya

    BalasHapus
  17. @icang : Makasih ya :)

    @GamesFree4All: Silahkan sob :D

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers