Tuesday, April 3, 2012

Membuat Widget Badge Google+ Page di Blogspot

Setelah Google Friend Connect pensiun, ada aplikasi penggantinya yaitu Google+ Page. Sesuai janji Bro Fahroe di posting sebelumnya, saya kan menjelaskan cara membuatnya.

anda bisa mengikutinya step by step dengan meng-klik linknya, semua link sudah saya set open new window

Pertama, Anda harus punya Google+ Profile dulu ( Google Account) ini syarat mutlak yang gak bisa di ganggu gugat.
Selanjutnya, ...

- Buka halaman hope G+ (https://plus.google.com/) atau di stream anda
Create a Google+ Page
Lokasi Link : Pojok Kanan Bawah
- Perhatikan pojok kanan bawah, disana ada link "Create a Google+ Page". Klik link tersebut. Maka akan muncul halaman seperti dibawah ini :
Create a Google+ Page
Create a Google+ Page

- Pilih jenis page anda pada menu "pick a category".
- Isi data page pada "add your info", yaitu nama Page dan Website. Anda harus setuju dengan semua persyaratan dibagian bawah form. klik Create
- Setelah page terbuat, lengkapi data data pendukung lainnya dengan meng-Klik menu customize. Isikan tagline atau deskripsi page. Anda juga bisa menambahkan picture profil

Buat & Pasang widget badge Google+ Page di blog Anda.

Icon G+
Code:

<a href="https://plus.google.com/112462293693476402133?prsrc=3" rel="publisher" style="text-decoration:none;"><img src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="" style="border:0;width:32px;height:32px;"/></a>
Jika anda cuma ingin memasang icon g+ , cukup copy script diatasi. Ganti tulisan berwarna biru dengan  ID Google+Page anda. pastikan linknya adalah benar seperti dibawah ini.
ID Google+ Page
ID Google+ Page setelah /b/

Badge Widget G+
1. copykan code script dibawah ini di atas </head>


<script type="text/javascript">
window.___gcfg = {lang: 'en'};
(function() 
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
</script>

atau

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'en'}</script>

jangan lupa di simpan (save)

2. Buka layout Template Anda, add element HTML/ Javascript
Copy kode dibawah ini. Masukkan kode ke dalam kotak HTML/Javascript lalu klik "save".

<div class="g-plus" data-href="https://plus.google.com/112462293693476402133?rel=publisher" data-width="300" data-height="131" data-theme="light"></div>

Anda bisa mengatur panjang dan lebarnya, sesuaikan dengan template anda. sesuaikan dengan template blog anda, jika background blog anda putih / warna terang, gunakan theme = "light", jika berwarna gelap gunakan theme ="dark" dan satu lagi ganti tulisan berwarna biru dengan ID Google+Page anda. pastikan linknya adalah benar seperti dibawah ini.
ID Google+ Page
ID Google+ Page setelah /b/
anda akan mendapatkan tampilan seperti ini :

Selamat mencoba.

(brofahroe)


EmoticonEmoticon