How To Add the +1 Button to Your Blog

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