Menambahkan +1 Button di Blogger

Posted by :campuran


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.


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 dibawah 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 yang ada di template sobat. caranya:

Masuk akun blogger, klik design, kemudian klik edit posting, pilh "Show Share Button" 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 tekan 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.


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 menampilkan tombol +1 di blog.
  • 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 Caranya Menambahkan +1 Button di Blog, pastilah sobat lebih kreatif untuk menempatkan tombol +1 Button.

Semoga sangat membantu dan bermanfaat bagi blogger

Pembaca Kami Juga Membaca:



{ 3 comments... read them below or add one }

Beben Koben mengatakan...

mantab sob...lanjutkan ah \m/
keep posting ☻

joko mengatakan...

mantap ,gan

Ruang Informasi mengatakan...

Selamat Pagi, Happy Blogging........blogwalking me please.

Posting Komentar

Mengatakan...