Menambah icon share G+1 (GOOGLE PLUS ONE) di Blog

Akhir-akhir ini terdengar kabar kalau google telah menambah tombol share dengan Google Plus One (G+1), menurut penjelasannya sih itu merupakan nilai Plus jika kita memasang dan ada yang share 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 G+1, ada dua cara untuk membuat tombol share ini,

Hanya menambahkan tombol share G+1 saja
Menambahkan tombol share gabung dengan tombol share bawaan Blogger lainnya

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

Login ke Blogger
Ke Tab Design -->> Page Element (untuk mengaktifkan tombol share Blogger dulu)

- Klik edit di kolom Post
- Beri tanda Centang/cheklist di bagian
- Save

Kemudian ke Tab Edit HTML (Centang Expand Widget Template)
Cari Kode </head> (cari dengan ctrl+f)
Tepat di atas tag </head> ketikan (copy) kode berikut :

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

(jika Blog kita berbahasa inggris)

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

{lang: 'id'}

</script>

(Jika Blog kita berbahasa indonesia)

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'> (banyak pilihan karena ini tergantung data yang ada di Blog post yang di aktifkan.
Setelah salah satu kode diatas ketemu masukkan kode script dibawah ini :

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

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

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

</b:if>

</div>

- Jika yang ketemu Kode <span class='post-icons'> atau <data:post.timestamp/> (Letakkan kode script di bawah ini tepat 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'>)

*Catatan:

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

>> Sedangkan jika Blog kita tergolong blog lama, seperti contohnya blog yang di buat tahun 2009, maka harus ada tambahan lagi langkahnya. Silahkan ikuti langkah berikutnya.

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'>

<a class='share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>

<span class='share-button-link-text'><data:top.emailThisMsg/></span></a>

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

</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 biru diatas.

Jadi jika Blog kita termasuk Blog dengan kode tombol share kode lama maka silahkan replace kode dibawah ini :

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

<a class='share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>

<span class='share-button-link-text'><data:top.emailThisMsg/></span></a>

<span class='share-button-link-text'><data:top.blogThisMsg/></span></a>

<a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>

<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>

<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>

<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>

</b:includable>

Ganti/replace kode di atas 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'>

<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 + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' 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 + "&target=twitter"' 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 + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' 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 + "&target=orkut"' 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 + "&target=buzz"' expr:onclick='"window.open(this.href, \"_blank\", \"height=415,width=690\"); return false;"' 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>

Terakhir SAVE TEMPLATE

Sumber : lihat di sini

DAFTAR ISI

Menambah icon share G+1 (GOOGLE PLUS ONE) di Blog

0 komentar:

Posting Komentar