Membuat Widget G+ Author Di Blog

Widget G+ Author Di Blog
Entah apa namanya widget ini, namun saya menyebutnya widget G+ Author atau mungkin G+ Profil kali ya... Ya... terserah Anda mau menyebutnya apa hehehe... Widget ini tentunya sering kita temui jika kita menyorotkan mouse ke nama profil G+ seperti ini +Kompi Ajaib  (coba sorotkan mouse ke link profil G+ tersebut).

Nah... ada kan penampakannya? Seperti itulah widget G+ Author yang akan kita bahas kali ini. Karena jika kita hanya menyimpan link G+ profil saja, maka widgetnya baru akan muncul bila disorot mouse. Tapi dengan ini, widget G+ Author ini akan tetap tampil di blog kita, seperti pada contoh di bawah ini.


Nah bagaimana Anda tertarik untuk mencoba membuatnya di blog Anda? Caranya cukup gampang, Anda tinggal copy kode di bawah ini dan mem-paste-nya di gadget HTML/JavaScript di sidebar atau mungkin pada postingan seperti contoh di atas (paste pada post editor HTML).

<div class="g-person" data-href="//plus.google.com/117950600521728942551" data-rel="author"></div>
<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';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Yang perlu Anda ganti hanyalah kode yang berwarna merah di atas. Silahkan ganti dengan kode profil G+ Anda. Jika ada yang belum tahu cara mendapatkan kode profil G+, silahkan masuk ke profil G+ Anda dan lihat pada address bar browser di sebelah atas, nah di situ ada kode profil G+ yang berupa angka yang mirip dengan kode berwarna merah di atas.

Jika Anda berniat menaruhnya di sidebar, sebaiknya lebar sidebar blog Anda minimal 300px karena lebar widget ini otomatis 300px.

Dan jangan khawatir tentang masalah validasi HTML5 dan skor SEO blog, karena setelah saya coba ternyata widget ini tidak error pada validasi HTML5 dan tidak mengurangi skor SEO blog ketika dicek di Chkme. Selamat mencoba...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments