Tuesday, 19 June 2012

Cara Membuat Tombol Google+ Plus di Blog

Salam blogger, pada kesempatan kali ini saya posting trik blogger yang baru yaitu cara memasang tombol google+. Saya yakin pembaca setia blog ini tidak kesulitan untuk memasang tombol Google+ plus, tapi tidak semua juga mengerti caranya, terlebih yang baru membuat blog. Selain itu disini saya juga  mencoba menjelaskan secara rinci dari beberapa masalah yang kadang membuat tombol Google+ tidak bekerja sebagaimana mestinya. Jadi silahkan luangkan waktu sejenak untuk belajar dan amati tutorial dibawah ini.


Berikut langkah-langkah membuat dan memasang tombol google+ plus :

Silahkan memasang Script dibawah ini atas Tag </body>
<!-- Tempatkan tag ini di bagian head atau tepat sebelum tag body penutup --><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Kemudian anda bisa memasang tombol Google+ dimana saja dengan menambahkan kode dibawah ini.

<!-- Tempatkan tag ini di tempat yang Anda inginkan untuk menampilkan tombol +1 --><g:plusone size="small"></g:plusone>

Cara memasang tombol Google+ diatas sebenarnya sudah selesai, tapi jika anda ingin menambahkan kode yang lebih rinci anda bisa mencoba beberapa script dibawah ini:

Tombol Google+ dengan ukuran Standar (24 px)
<g:plusone></g:plusone>

Tombol Google+ dengan ukuran Kecil (15 px)
<g:plusone size="small"></g:plusone>

Tombol Google+ dengan ukuran Sedang (20 px)
<g:plusone size="medium"></g:plusone>

Tombol Google+ dengan ukuran Tinggi (60 px)
<g:plusone size="tall"></g:plusone>

Tombol Google+ Untuk HTML5
<div class="g-plusone" data-size="standard" data-count="true"></div>

Anda juga dapat membuat kreasi tombol Google+ sendiri
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{"parsetags": "explicit"}</script><script type="text/javascript">function renderPlusone() {gapi.plusone.render("plusone-div");}</script><body><a href="#" onClick="renderPlusone();">Render the +1 button</a><div id="plusone-div"></div></body>

Kreasi Tombol Google+ dengan URL khusus
<!-- customized for a specific address --><g:plusone href="https://plus.google.com/108442421331149025926"></g:plusone>
Untuk customize tombol Google+ saya menyarankan anda memasukan url dari Google+ profile atau halaman (page) G+ yang sudah ada buat.

Cara pasang Tombol Google+ disebelah Tombol Facebook (halaman posting)
<span style='float:left; width:65px;'><!-- Place this tag where you want the +1 button to render --><g:plusone expr:href='data:post.url' size='medium'/></span><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.pjumpjhp?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:30px;'/></div>

Kode standar Google+ tidak bekerja pada postingan dalam lingkup halaman home (index).
Pada halaman Posting dengan menggunakan kode <G:Plusone/> biasanya tidak terjadi masalah, tapi saat kalian mencoba memasang tombol Google+ yang ditujukan pada halaman post yang letaknya berada dalam halaman utama ini biasanya bermasalah karena Google+ setahu saya tetap akan mendeteksi sebagai halaman index bukan sebagai halaman post. Untuk mengatasi masalah ini silahkan mencoba menggunakan kode ini <g:plusone expr:href='data:post.url'/>

selamat mencoba dan semoga bermanfaat.

No comments:

Post a Comment