Menambahkan Tombol Share G+1 di Blog part1

Akhir-akhir ini terdengar kabar kalau google telah menambah tombol share dengan Id G+1, menurut penjelasannya sih itu merupakan nilai Plus jika kita memasanag dan ada yang ngeshare lewat tombol share G+1 itu, dan tombol Share G+1 itu sudah di tambah atau di upgrade di tombol share bawaan Google, jadi sepertinya saatnya kita mulai memakai tombol Share bawaan blogger ini, dimana saya sering liat para blogger kebanyakan memakai tombol share pihak ke tiga, tapi ada kalanya itu dikarena saat kita mau memasang tombol share yang bawaan Blogger tapi tidak muncul, ini biasanya terjadi saat kita menggati template dari situs-situs penyedia Template gratis maupun berbayar, saya juga sering mengalami hal ini, malah setiap saya mengganti template selalu tidak bisa muncul tombol sharenya saat saya activekan tombol share dari bawaan Blogger, dan setelah diactivekan lewat blogger ternyata masih tidak bisa muncul. ternyata harus ada yang ditambah lagi, ok langsung saja ikuti langskah berikut untuk memulai pemasanag tombol share yang G+1, ada dua cara untuk membuat tombol share ini,

A. Hanya menambahkan tombol share G+1 saja (akan di bahas di postingan berikutnya)

B. menambahkan tombol share gabung dengan tombol share bawaan Blogger lainnya

B. Ok kita coba menambahkan tombol share gabung dengan tombol share bawaan Blogger lainnya

1. Login ke Blogger

2. ke Tab Design -->> Page Element (untuk mengkativekan tombol share Blogger dulu)

- Klik edit di kolom Post

- Beri tanda Centang/cheklist di bagian

- Save

3. Kemudian ke Tab Edit HTML (Centang Expand Widget Template)

4. Cari Kode </head> (cari dengan ctrl+f)

5. masukkan kode script berikut tepat di atas tag </head>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/> (jika Blog kita berbahasa inggris)

6. Kemudian Cari kode <span class='post-icons'> jika tidak ada cari kode <data:post.timestamp/> , jika masih tidak ada cari kode, <div class='post-footer-line post-footer-line-1'> (Saya Buat banyak pilihan karena ini tergantung data yang ada di Blog post yang di activekan.

7. setelah salah satu kode diatas ketemu Masukkan Kode script dibawah ini ..

- Jika yang ketemu Kode <span class='post-icons'> atau <data:post.timestamp/>(Letakkan kode scrip t di bawah tepat ini di atasnya)

-Jika yang ketemu hanya <div class='post-footer-line post-footer-line-1'> (maka letakkan kode script dibawah ini tepat di bawahnya.(tepat setelah kode <div class='post-footer-line post-footer-line-1'>)

<div class='post-share-buttons goog-inline-block'>

<b:if cond='data:post.sharePostUrl'>

<b:include data='post' name='shareButtons'/>

</b:if>

</div>

Catatan:

- Jika Blog kita adalah blog baru artinya blog yang kita buat sesudah di activekan tombol share Plus one ini, maka sampai langkahnyya sampai disini saja (Save saya Templatenya), lebih mudah lagi jika memakai template bawaan blogger, maka tidak perlu mengikuti langkah diatas, langsung activekan saja. bisa langsung muncul karena sudah compatible sama blog baru.

-sedangkan Jika Blog kita tergolong blog lama, seperti contohnya blog saya ini di buat tahun 2009, maka harus ada tambahan lagi langkahnya. silahkan ikuti langkah berikutnya.

8. cara mengetahui code script blog lama atau bukan , cari kode <b:includable id='shareButtons' var='post'>

Kode Script Tombol Share Blog lama

<b:includable id='shareButtons' var='post'>

.....................................

</b:includable>

Kode Script Tombol share Blog Baru

<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 + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>

..........................................

</a></b:if>

<b:if cond='data:top.showDummy'>

<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>

</b:if>

</b:includable>

Perhatikan kode yang bercetak tebal, di Blog lama tidak terdapat kode goog-inline-block share-button sb-email, dan juga belum ada kode yang berwarna merah diatas.

Jadi jika blog kita termasuk blog dengan kode tombol share kode lama maka silahkan sobat replace dengan kode dibawah ini.

Perhatikan Kode

<b:includable id='shareButtons' var='post'>

</b:includable>

-Ganti/replace semua kode yang berwarna merah dengan kode dibawah ini: (ingat jangan sampai kelewatan ngeblock kodenya!!!

<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>

</a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>

</a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>

</a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>

</a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + "&target=orkut"' expr:title='data:top.shareToOrkutMsg' target='_blank'>

</a></b:if><b:if cond='data:top.showBuzzButton'><a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + "&target=buzz"' expr:onclick='"window.open(this.href, \"_blank\", \"height=415,width=690\"); return false;"' expr:title='data:top.shareToBuzzMsg' target='_blank'>

</a></b:if>

<b:if cond='data:top.showDummy'>

</b:if>

Dan save template

silahkan cek di template sobat, apakah sudah berhasil, jika belum silahkan tanya lewat komentar.