Membuat Widget Lencana Google Plus

Setelah sekian lama tidak memperbaharui artikel blog ini karena masalah internet, akhirnya kini saya bisa kembali lagi mempublikasikan artikel. Sekarang saya akan berbagi cara membuat widget lencana (badge) Google Plus di blog. Widget ini sudah saya modifikasi sedemikian rupa agar tampilannya menyesuaikan dengan elemen utama di dalamnya. Misalnya widget ini diletakkan pada sidebar sobat yang lebarnya 300 pixel, maka lebar widget adalah 300 pixel. Tertarik? Berikut cara membuatnya:

Cara Membuat Widget Badge Google Plus

• Buka halaman Tata Letak > Tambahkan Gadget > HTML/JavaScript. Taruh kode berikut ini:

<div class="badgegoogle">

<div class="g-person" data-href="//plus.google.com/u/0/111655849241216835459" data-theme="light" data-layout="landscape" data-showcoverphoto="false" data-rel="author"></div>

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

<script type="text/javascript">

(function() {

var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';
})();
</script>

</div>

• Lalu masuk ke halaman Template > Edit HTML. Masukkan CSS berikut tepat dibawah ]]></b:skin> atau diatas </style>.

.badgegoogle{width:auto;height:auto;overflow:hidden;margin:0;position:relative;text-align:center}

• Simpan template sobat. Silakan lihat hasilnya...

Untuk demo-nya silakan lihat lencana Google Plus saya di bagian sidebar blog ini. Semoga bermanfaat...