Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Cara Membuat Pop Up Widget Google+ Follower

Pop Up Widget Google+ Follower Cara Membuat Pop Up Widget Google+ Follower – setiap blogger tentunya mempunyai akun Google+ dan pada biasanya mereka menerapkan atau memasang widget Google+ follower pada sidebar ataupun footer blognya. Apabila ingin membuat widget Google+ follower menjadi bergaya pop up maka bisa dilakukan dengan langkah simple menggunakan kode yang terdapat dibawah. Style widget Google+ follower ini terdapat dua macam, pada style pertama terdapat foto-foto atau gambar dari banyaknya follower anda dan pada style kedua widget Google+ follower hanya menampilkan foto profil dari akun Google+ anda sendiri. Dibagian bawah widget Google+ follower ini juga dilengkapi tombol close sehingga apabila pengunjung tidak menginginkan pop up widget Google+ muncul maka mereka bisa langsung klik tombol close untuk menghilangkan dari layar atau layout blog. Untuk cara menerapkannya kedalam blog, berikut adalah tutorial Cara Membuat Pop Up Widget Google+ Follower di blog.

1. Login ke akun blogger.
2. Copy pilihan kode berikut ini.
Style 1:
Pop Up Widget Google+ Follower
<style type="text/css">
html #googleplusevolutions {
position: absolute;
}
#googleplusevolutions {
display: block;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
margin: 0;
overflow-y: auto;
z-index: 9999;
}
#googlefaceblogevolutions {
background-color: #E9FBE9;
overflow: none;
}
.googlefaceblogevolutions {
width: 310px;
height: 380px;
position: fixed;
top: 45%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
border: 7px solid #52E052;
padding: 20px;
z-index: 9999;
}
.titletop {
background: #52E052;
color: #fff;
font-size: 16px !important;
font-weight: bold;
margin: 5px 0;
width: 92%;
padding: 10px;
line-height: 20px;
font-family: Arial !important;
float: left;
z-index: 9999;
}
</style>

<div id="googleplusevolutions">
<div id="googlefaceblogevolutions" class="googlefaceblogevolutions">
<h3 class="titletop">Get Update Article - Faceblog Evolutions</h3>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/104093787575230359634" data-source="blogger:blog:followers" data-width="350">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'en'};
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>
<br/>
<center style="float:left; cursor:pointer;"><a style="font-size:xx-small; color:#000; font-weight: bold; background-color: #52E052; padding: 5px 10px; border: 1px solid #00ff00; text-decoration:none;" onmouseup="document.getElementById('googleplusevolutions').style.display='none'">[X] CLOSE</a></center>
<center style="float:right; margin-right:10px;"><a target='_blank' style="font-size:xx-small; color:#52E052; text-decoration:none;" href="http://mas-andes.blogspot.com/2013/08/cara-membuat-pop-up-widget-google.html">Get This Widget</a></center>
</div></div>

Style 2:
Pop Up Widget Google+ Follower
<style type="text/css">
html #googleplusevolutions {
position: absolute;
}
#googleplusevolutions {
display: block;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
margin: 0;
overflow-y: auto;
z-index: 9999;
}
#googlefaceblogevolutions {
background-color: #E9FBE9;
overflow: none;
}
.googlefaceblogevolutions {
width: 300px;
height: 190px;
position: fixed;
top: 45%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
border: 7px solid #52E052;
padding: 20px;
z-index: 9999;
}
.titletop {
background: #52E052;
color: #fff;
font-size: 16px !important;
font-weight: bold;
margin: 5px 0;
width: 280px;
padding: 10px;
line-height: 25px;
font-family: Arial !important;
float: left;
z-index: 9999;
}
</style>

<div id="googleplusevolutions">
<div id="googlefaceblogevolutions" class="googlefaceblogevolutions">
<h3 class="titletop">Get Update Article - Faceblog Evolutions</h3>
<div class="g-person" data-href="//plus.google.com/104093787575230359634" data-theme="dark" data-layout="landscape" data-showcoverphoto="false" 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>
<br/>
<center style="float:left; cursor:pointer;"><a style="font-size:xx-small; color:#000; font-weight: bold; background-color: #52E052; padding: 5px 10px; border: 1px solid #00ff00; text-decoration:none;" onmouseup="document.getElementById('googleplusevolutions').style.display='none'">[X] CLOSE</a></center>
<center style="float:right; margin-right:10px;"><a target='_blank' style="font-size:xx-small; color:#52E052; text-decoration:none;" href="http://mas-andes.blogspot.com/2013/08/cara-membuat-pop-up-widget-google.html">Get This Widget</a></center>
</div></div>
Keterangan:
Ubah 104093787575230359634 dan ganti dengan ID Google+ anda.

3. Selanjtunya tinggal memasang kedalam widget blog dan langkahnya seperti biasa, klik Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode tersebut kemudian klik Simpan.

Berlangganan artikel via email

56 Response to "Cara Membuat Pop Up Widget Google+ Follower"

avatar
Anonymous

Keren nih mas ... :D Nanti aku pasang dah ... :D

Balas

Cocok nih bagi yang sering merasa terganggu dengan pemandangan Google + follower di blog. :)

Balas

Selamat malam dengan menu tutorial yang fresh dari mas andes

Balas

wah keren juga nih kalau jadi popup bisa lebih ringan blognya

Balas
avatar
Anonymous

nice post sobat,
keren nih,,
.
kunbal >> http://lensaglobe.blogspot.com

Balas

Salam Mas Andes..? wuihhh mantap artikel baru yah Mas..?
Idzin simak mu nyoba di blog saya Mas..? tapi sebelum nya
blog saya sudah pakai profil Google +..itu gimana Mas..biarin saj
Profil G+ Nya..? apa gimana tuh..? mohon penjelasanya trima kasih
Karrysta - http://karristaent.blogspot.com

Balas

salam juga om Saud Karrysta :)
boleh dihapus jika mau menggunakan pop up saja, boleh juga di biarin saja (tidak dihapus) jika ingin menggunakan keduanya (profil lama dan pop up)

Balas

wah tak coba2 dulu mas :D

Balas

mas Andes Rizky Nugroho, gimana itu ceritanya? di blogku gagal mulu. dan saya sudah berhenti berharap dgn kebaradaan G+, mohon maaf lahir batin ya

Balas
avatar
Anonymous

biasanya yang seperti itu dipake buat iklan/banner ya..

Balas
avatar
Anonymous

Wah udah ada yang baru lagi nih, Cara Membuat Pop Up Widget Google+ Follower, bagus juga mas bikin simple dan nggak makan tempat :)

Balas

Salah satu cara membuat widget followers G+1 menjadi lebih menarik ini...

Balas

haha jangan galau terus mas :)

Balas
avatar
Anonymous

mau di coba gan

Balas

Helooo mas andez, ap kabarnya hey :p
ga prnah keabisan tutorial yah,
nah yg ini nih aku mudeng.
Cz ga ribet kayanya . Hehe
mohon maaf lahir Dan batin ya .

Balas

makin keren dan penuh kreativitas mas

Balas
avatar
Anonymous

Memang kreatif banget nih suka ngakalin widget blog

Balas

Keren tampilannya Mas Andes, tapi Boku belum pasang widget G+ di Blognya Boku. Terima kasih sharenya..

Balas

keren nih mas, belum saatnya dipasangi g+ sih, bikin berat katanya ya mas

Balas
avatar
Anonymous

ini tutorial tahun brapa?

Balas

Kan sekarang tahun 2013

Balas

siapa dulu dong miminnya ...

Balas

Keren sohibku .. mantap nih
layak untuk dipasang ....

Balas

keren neh mas andes..

Balas

wah sangat mantap dan keren mas
terima kasih sudah berbagi

Balas

benar mas ini cocok sekali

Balas

dites dulu mas, ini mantap dan keren

Balas

disini gudangnya tutorial mbak
pokoknya masih banyak lagi..hehe

Balas

benar mas..ini cocok

Balas
avatar
Anonymous

ijin coba !!tanya Hp cross andromeda A5 star enak gak dipakai !! tolong beri balasan di postingan blogku !!

Balas
avatar
Anonymous

bagus nih popupnya, bisa menghemat sidebar

Balas
avatar
Anonymous

saya lagi nyari2 bikin pop up, eh dapet yg ini, hehe.. lumayan lah

Balas

Oke deh Mas Andes terima kasih atas penjelasan nya, yang komplit dan terperinci,..
sukses terus yah Mas...?

Balas
avatar
Anonymous

wahh keren mas pop up nyua

Balas

ternyata ada banyak stylenya juga yah :)

Balas
avatar
Anonymous

sebelumnya saya mohon maaf jika komentar saya ini tidak sesuai dengan topik yang mas andes bagikan,
Saya ingin bertanya tentang gimana cara membuat " ABOUT AUTHOR" seperti yang terletak di blog mas andes.
terima kasih dan mohon panduannya

Balas

maaf jika saya menggunakan Open ID saat berkomentar, karena sekiranya mas andes dapat mengunjungi blog saya untuk memberikan sedikit panduannya tentang komentar saya sebelumnya - SAHABAT BLOGGER 77

Balas

santai saja mbak gapapa bebas mau komentar pake open ID maupun G+

Balas

bisa dilihat pada link ini mbak..
http://mas-andes.blogspot.com/2013/09/membuat-author-box-dibawah-posting-blog.html
http://mas-andes.blogspot.com/2013/09/membuat-widget-author-box-blogger.html

Balas

Terima kasih Mas atas penuturanya sangat bermanfaat
Sekali buat saya hatur nuhun pisan salam Hormat Mas

Balas

Datang lagi di artikel Mas Andes yang keren ini
Makin keren Mas blognya sangat mempesona :)

Balas

selamat siang mas andes..kalau widget diatas kita pasang tanpa pop up gimana mas..?
Terimakasih

Balas

mantep nih perlu dicoba

Balas

Menarik sob sharenya, :D

jadi pengen buat :D

kunjungi balik blog ane sob bila berkenan :beer:

Balas

wahhh keren mas, izin coba ya mas mantep banget biar web jadi lebih menarik nihh alhasil mas www.syahdanshare.com

Balas

Keren mas saya ijin untuk memodifikasi

Balas

layoutnya bagus sekali gan, kalau untuk facebook gimana caranya gan. bantuin dong..makasih ya.
oia.. di blog saya ada
Soal psikotes gratis. kunjungi ya

Balas

Ohh begitu toh..
thanks mas :)

Balas

mas, kalo buat pop up contact form seperti di blog ini gimana? mohon pencerahannya hehe

Balas

makasih gan infonya saya langsung praktek ya tentang cara membuat pop up widget google + followers ,,,,,,,,,,,

Balas

nice post thanks for share

Balas

Mantap mas nya,,, ^^

Balas

NICE ARTIKEL GAN numpang comot :D

Balas

Tips yang mearik, sangat membantu kawan. Makasih ya

Balas

Terime Kaseh Gan, Alias Thank You, Get Script > Edit And > Save

Balas

Terimakasih gan informasinya sangat bermanfaat

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Cara Membuat Pop Up Widget Google+ Follower" ini bermanfaat, share ke jejaring sosial.
Konversi Kode