G+ Followers Popup pada Blogger

Berhubung besok libur dan siang in lagi santai di kantor, gk ada kerjaan akhirnya iseng utak-atik popup buat versi followers/circle G+ pada blogger.

berikut tampilan popupnya:

Spoiler

masih banyak space kosongnya soalnya yg follow pages G+ ku baru 2 orang, yg satu saya sendiri, satunya lagi gk tau siapa

Berikut ini code popupnya yang tinggal dipasang di widget edit/html blogger:

Spoiler

Code:

<style type='text/css'>
#fade {display: none;background: #000;position: fixed; left: 0; top: 0; z-index: 10;width: 100%; height: 100%;opacity: .60;z-index: 9999;}
.popup_block{display: none;background: #252525;padding: 0 4px; border: 1px solid #333;float: left;position: fixed;top: 50%; left: 50%;z-index: 99999;-webkit-box-shadow: 0px 0px 20px #000;-moz-box-shadow: 0px 0px 20px #000;box-shadow: 0px 0px 20px #000;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
img.btn_close {float: right;margin: -36px -8px 0;}
.popup p {padding: 5px 10px;margin: 5px 0;}
*html #fade {position: absolute;}
*html .popup_block {position: absolute;}
.wrapper {padding:5px; margin: 4px auto; width: 310px; height: 310px;border-radius: 0px;position: relative;z-index: 90;background:#eee;background-image:-moz-linear-gradient(top, #fff, #eee);background-image:-ms-linear-gradient(top, #fff, #eee);background-image:-o-linear-gradient( top, #fff, #eee);background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-webkit-linear-gradient(top, #fff, #eee);background-image:linear-gradient(top, #fff, #eee);border:1px solid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 0 #9a9a9a;-webkit-box-shadow:0 1px 0 #9a9a9a;box-shadow:0 1px 0 #9a9a9a;padding:10px;}
.inner  {border:1px dashed #ccc;padding:0.5em;-moz-box-shadow:0 0 0 1px #fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff}
.ribbon-wrapper-green {width: 85px;height: 88px;overflow: hidden;position: absolute;top: -3px;right: -3px;}
.ribbon-green {font: bold 15px Sans-Serif;color: #333;text-align: center;text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform:rotate(45deg);position: relative;padding: 7px 0;left: -5px;top: 15px;width: 120px;background-color: #00E100;background-image: -webkit-gradient(linear, left top, left bottom, from(#00E100), to(#00FF00));background-image: -webkit-linear-gradient(top, #00E100, #00FF00);background-image: -moz-linear-gradient(top, #00E100, #00FF00);background-image: -ms-linear-gradient(top, #00E100, #00FF00);background-image: -o-linear-gradient(top, #00E100, #00FF00);color: #fff;-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);-moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);box-shadow: 0px 0px 3px rgba(0,0,0,0.3);}
.ribbon-green:before, .ribbon-green:after {content: "";border-top:3px solid #6e8900;border-left:3px solid transparent;border-right: 3px solid transparent;position:absolute;bottom: -3px;}
.ribbon-green:before {left: 0;}
.ribbon-green:after {right: 0;}
</style>
<a href="#?w=auto" rel="popup3" class="poplight"></a>
<div style="display: none; margin-top: -200px; margin-left: -200px;" id="popup3" class="popup_block"><a href="#" class="close"><img src="https://lh5.googleusercontent.com/-R7QaXS6MEag/UXrZrbgNHlI/AAAAAAAAOcI/Ndly41_AOMI/s36/89a5e725_smush_close.png" class="btn_close" title="Close Window" /></a>
<div class="wrapper"><div class="inner"><div class="ribbon-wrapper-green">
<div class="ribbon-green">Google +</div>
</div>
<center><div class="g-plus" data-action="followers" data-height="290" data-href="https://plus.google.com/113750800916808910377" data-source="blogger:blog:followers" data-width="292">
</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></center>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.fn.popOpen = function(){
popID = $(this).attr('rel'); //Get Popup Name
popURL = $(this).attr('href'); //Get Popup Href To Define Size
//Pull Query & Variables from href URL
query= popURL.split('?');
dim= query[1].split('&');
popWidth = dim[0].split('=')[1]; //Gets The First Query String Value
//Fade In The Popup And Add Close Button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
//Define Margin For Center Alignment
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin To Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade In Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
};
//When You Click On A Link With Class Of Poplight And The Href Starts With A #
$('a.poplight[href^=#]').click(function() {
$(this).popOpen(); //Run PopOpen Function On Click
return false;
});
$('a.poplight[href=#?w=auto]').popOpen(); //Run PopOpen Function Once On Load
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When Clicking On The Close Or Fade Layer
 	$('#fade , .popup_block').fadeOut(); //Fade Them Both Out
$('#fade').remove();
return false;
});
popOpen
});
</script></div>

sebelum dipasang pada widget blogger, tekan Ctrl+F pada code diatas terus cari : "https://plus.google.com/113750800916808910377" dan silahkan ganti dengan fanpages teman2 di G+.

sementara sampai detik ini saya masih bingung caranya pasang cookie record pada popup ini sesuai dengan thread saya di https://www.bersosial.com/topic/1023/help-popup-facebook-buat-blogger jadi kl di share gini siapa tau aja ada yg minat pakai terus bisa nge-edit dipasangin cookie record, boleh deh di share disini cara pasang cookie recordnya biar bisa cuma sekali muncul per visitor

 

bukannya Popup seperti ini

bukannya Popup seperti ini agak menganggu visitor ya , soalnya saya saja males kalo ada Popup semacam itu di blog orang

 

@samuel : selama tombol

@samuel : selama tombol closednya jelas dan loadnya cepat gk bakal ganggu visitor, nih video keterangan dari si mamat dari mas @Dan di threadku yg ttg popup facebook :

 

wphoet wrote:

coba test di blog yang saya kelola dulu deh

Nice info deh

 

wah iya kebetulan mau libur

wah iya kebetulan mau libur agak panjang nih, nanti dicoba ah tipsnya thx mas @wphoet

 

Untuk saat ini masih banyak

Untuk saat ini masih banyak yg belum tau mengenai Google+ , jadi saya lum pasang yg google+ dan memilih pesbuk

 

wah menarik ni mas @wphoet,

wah menarik ni mas @wphoet, saya baru tahu bisa pasang fan pages + di web/ blog, nice info dech

 

@samuel, @masaiya-chang &

@samuel, @masaiya-chang & @noetral silahkan dicoba2 sekalian tnya2 tmnnya siapa tau ada yg bisa setting cookie recordnya biar cuma bisa nongol sekali per pengunjung datang biar jadi tambah keren popupnya kl bisa di setting kapan harus nongol dan kapan gk boleh nongol

@cayun : iyanih lagi coba peruntungan di g+ siapa tau besok2 booming fanpageku bisa tambah berjubel circlenya soalnya kl dilihat2 setiap buka account baru di gmail biasanya langsung dpt account g+

 

Mas @wphoet jago coding iya?

Mas @wphoet jago coding iya? Mantabs nih popup-nya.

 

sakaji wrote:

sbnrnya sya gk begitu paham jg ttg coding, cuma sering tray & error aja jadi hitung2 coba2 utak-atik sambil belajar mempraktekan yg ada di sini www.w3schools.com

 

wah ini tutorial mantaap..

wah ini tutorial mantaap.. bukannya kalau G+ bagusan +1 ? https://developers.google.com/+/web/+1button/

 

fahmi wrote:

@fahmi : ini widget barunya di blogger, coba cek di menu widget blogger, modelnya kyk follower fanpage facebook, jadi buat nambah circle supaya yg di circle bisa ikutin trs postingan kita, kan lumayan kl dpt +1 dari circle kita sendiri. jadi kyk sdh punya pelanggan ttp gitu jadi istilahnya pembaca kita ikat di fanpage supaya kemungkinan ada yg ngasih +1 lebih besar gitu mas fahmi kl yg widget +1 doank kan pembaca cuma ngasih +1 trs sdh besok datang lagi apa gak kita gk tau, dan besok kl kita buat postingan baru belum tentu mereka tau. nah kl pakai widget follow circle ini otomatiskan mereka ngikutin trs, jadi besok2 kl ada postingan baru kemungkinan dpt +1 ada dari mereka yg sdh ngikutin fanpage.

 

@wpoet : oh iyaa ya semacam

@wpoet : oh iyaa ya semacam follower ya,, kalau begini google page kamu musti dihandle dengan baik postingannya.. nanti kan banyak followernya supaya mereka senang
g+ kamu yang mana? itu google page kan? sy mau add

 

fahmi wrote:

iya kyk follower pages gitu, ntar ujung2nya buat cari +1 juga iya itu pagesku, kl ID G+ ku yg ini : https://plus.google.com/106421813453893113093

 

wphoet wrote:

Ikutan" donk, Udah saya add tuh Google+ nya @wphoet

 

samuel wrote:

o iya ntar sya cek dulu, soalnya lagi keasikan muter2 baca2 artikel di bersosial

 

cookiesnya masih belum ada ya

cookiesnya masih belum ada ya, jadi ngeribetin visitor blog, karena selalu muncul

 

samuel wrote:

blm ada, coba ntar jumat atau gak sabtu coba saya utakatik lagi buat tambahin cookienya. soalnya lgi garap gambar autocad kantor nih jdi agak sibuk bbrp hri ini