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:
<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:
<style type="text/css">Keterangan:
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>
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.
