Membuat Link Pop Up Profil G+ Di Blog

Membuat Link Pop Up Profil G+ Di Blog

Bola Hero Gawai

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

57 Comments Add Comment

wah keren ini kang..langsung praktek btw scriptnya sudah valid html5 blm kang?
makasih sudah ikut diabsen :D

Balas

Keren nih mas... Makin Lama Blog nya Banyak Ikan Cream..... Pemutih wajah :3

Balas

demonya sudah ada diatas tu kang,tinggal disorot mouse aja nama yang ditulis kang adhy atau sorot nama di authorbox.

Balas

manteb mas....! semakin hari semakin berbobot tutornya....!

master kolis udah lama ngak muncul sekarang muncul master adhy...! jempol orang sekampung mluncur mas...!

Balas

lumayan nambah elmu di ebook otak online hehe :D

Balas

mantab banget tutorialnya sobat...terimakasih sudah berkenan berbagi ilmu...salam :-)

Balas

Ada lagi nih yang lebih keren,,,mantaf kang,,

Balas

Terimakasih.. sudah diterapkan pada logo footer di blog saya

Balas

ga usah ditanya lagi.. postingan Kompi Ajaib pasti valid HTML5 :-bd

Balas

Kereeen.. kreatif kang, nuhun infona ah

Balas

kakantun.. nuhun ah di absen :)

Balas

Hehehe...iya mas yang ini juga valid HTML5, lagian ini hanya berupa link. Kecuali salah penulisan link-nya pasti error pada validasinya...

Balas

Iya mas hehehe...padahal sudah saya masukan keyword pada iklannya...mungkin blm ada iklan yang sesuai keyword yang saya berikan hehehe :D

Balas

Ya...seperti yang mas Aulia katakan kang Kudhen

Balas

Ah...biasa aja mas Andre, btw makasih jempolnya :D

Balas

Hehehe...iya lumayan mas bisa nambah ilmu :D

Balas

Sama-sama mas... :D

Balas

Siipp...sudah saya cek OK hehehe :D

Balas

Hehehehe...sami-sami kang...

Balas

heheh keren mas, makin kreasi aja nih.. |o|

Balas

Boleh dicoba nih :D :D :D

http://mestiqui.blogspot.com/

Balas

Hehhehe...biar sista lebih kelihatan cantiknya :D

Balas

Boleh mas Ahmad hehehe :D

Balas

emang salut dah sama kompi ajaib,setiap tutor pasti selalu mengutamakan valid html5 :-)

Balas

Kenapa Ngga Pakai Yang lainya mas.. seperti Adsense ... ?

Balas

ajaib kang bisa ditempel dimana mana he,,,

Balas

Mas bagai mana membuat Post d home menjadi 3 coloum.. (pos bentuk nya seperti saya ) saya sudah rubah kenama masih tetap 2 colom saja ?

Balas

kereen mas.. tapi gak support di template ane, soalnya ane pasang script anti .js nya :)

Balas

hehehehe :) malu ah..

Balas

yang pengganti kode </body> itu mas? Sama saya juga pasang ode itu tapi trik ini berhasil juga...dicoba aja mas kalau tertarik untuk menggunakannya...

Balas

keren dan berguna banget om tutorialnya, cuman kalau sekalian pasang gambar, saya ngga pede ah...hehehe

Balas

Ah bisa aja mamang yang satu ini...hehehe...biar tambah kelihatan kerennya gitu mang...

Balas

hidup valid HTML5 .. memang keren kompi ajaib nih ..........

Balas

keren mas .. mana udah mantap valid HTML5 lagi ...

Balas

Iya mas...semoga bisa berguna

Balas

Kang bisa bantu?

http://validator.w3.org/check?uri=http%3A%2F%2Fbravoseo.blogspot.com%2F2013%2F08%2Fefek-smooth-scrolling-pada-komentar-blog.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Balas

Untuk related post dengan dua kata memang seperti itu...sementara ini belum ada solusinya, jadi hindari penggunaan label dengan dua kata agar related post bisa valid HTML5

Balas

Hihi bisa nongol ke atas gitu ya Mas .. :D Hebat dah ... :D

Balas

Aku ora ngerti basane mas ... :D

Balas

Awal bulan langsung disuguhin artikel tutor yang keren gini .. :D Makasih mas, nanti saya pasang dah ,,:D

Balas

Maksud dari ini apa mas ?? "Element style not allowed as child of element div in this context." Saya rasa ini karena PopUp Like Facebook mas. Kalau boleh tau, bagaimana cara mengatasinya? terimakash :)

Balas

Kira-kira seperti ini mas, kode style tidak boleh ada di dalam div... lebih jelasnya harus lihat kasusnya si mas...

Balas

iya mas, bener berarti mas .. style nya tidak boleh ada di dalam div id="..." mas ... Thanks mas ... :D

Balas

Kak, ini jika diterapkan ke komentar bisakah ?
jadi jika mouse disorot ke komentator blog fitur googl plusnya terbuka.

oh iya, kunjungan balik dari SAGITA COM ni kak.

Balas

Iya sih sudah saya coba kemarin tapi blm berhasil soalnya yang tampil di author comment itu url blogger biarpun memakai akun google, tapi kalau bisa mengubah url blogger menjadi url g+ komentator pasti bisa pakai ini... jadi bisa lebih gampang untuk mengikuti profil G+ komentator ya mbak Iril...

Balas

Yang aku maksut begitulah kak, mohon nanti jika sudah berhasil dishare ya, aku tunggu lo !

Balas

Bingung saya mas, belum berhasil saya coba, apa ada masalah dengan template yang saya gunakan ya?

Eh iya mas, saya mau tanya tapi tidak terkait dengan postingan artikel ini, kenapa related post artikel saya tidak muncul ya?

Balas

Saya pikir ini bisa diterapkan pada jenis template apapun, mungkin ada yang kurang dalam penerapan kodenya...hehehehe....

Untuk related post-nya blog Mas Hari saya lihat normal ah...ada muncul berupa thumbnail kan...

Balas

eh iya ternyata berupa thumbnail, trus mengenai artikel mas diatas berhasil saya praktekin di blog saya.. udah saya test dengan memasukan profil mas kompi di artikel saya terakhir tentang google drive.. thanx sekali lagi mas :D

Balas

wau keren nih ketinggalan kereta... klo comennya jg di buat kayak gini kayaknya mantap juga tuh

Balas

wah tutornya bagus mas tak coba dulu

Balas

Iya cuman merubah profil blogger menjadi profil G+ dg otomatis masih susah :D

Balas

keren tipsnya Bang :) ,,,bang ijin copas ...

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×