Membuat Link Pop Up Profil G+ Di Blog

Link Pop Up Profil G+
Postingan saya kali ini masih berhubungan dengan postingan sebelumnya yaitu Membuat Widget G+ Author Di Blog. Yang saya maksudkan dengan membuat link pop up profil G+ di blog yaitu ketika link profil G+ disorot mouse maka akan keluar pop up profil G+ disertai dengan photo. Jika pada postingan hal ini sangat mudah dilakukan, kita tinggal mengetikan nama profil G+ seseorang dengan diawali tanda baca plus (+). Seperti contoh berikut ini (silahkan sorotkan mouse pada link-nya): +Kang Ismet, +Beben Koben, +Leony Li, +Aulia MP, +andre wedhos, +Google, dan lain-lain (ma'af kalau tidak semua saya sebutkan hehehehe...ini hanya sekedar contoh saja).

Namun berbeda dengan link di luar postingan, kita harus menyimpan javascriptnya di blog kita (pada edit HTML) sehingga link profil G+ dapat berfungsi. Sebagai contoh silahkan sorotkan mouse ke profil Kompi Ajaib pada Author Box di bawah postingan (link profil di bawah photo). Bagaimana Anda tertarik untuk mencobanya?

Silahkan copy javascript di bawah ini dan paste di atas kode </body>

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

Jika sebelumnya Anda sudah mencoba membuat widget G+ Author di blog seperti pada postingan saya sebelumnya, silahkan hapus javascript yang di widget tersebut agar tidak bentrok.

Untuk menerapkannya pada link seperti di bawah ini:

<a class='g-profile' href='http://plus.google.com/117950600521728942551' target='_blank' title='Kompi Ajaib'>Kompi Ajaib</a>

Silahkan ganti kode yang berwarna merah dengan url profil G+ Anda dan yang berwarna biru ganti dengan nama Anda. Ini bisa Anda terapkan pada semua link profil G+ Anda baik yang berupa tulisan ataupun gambar.

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