Yandan açılır Google+ takipçi kutusu

Sliding Google+ Followers Box For Blogger
Yandan açılır Google+ takipçi kutusu

Google+ sayfanızı sitenize bağlayın. Google aramada siteniz için daha fazla öneri alın ve Google+ ürününde kitlenizi artırın.
Google Plus için bu güne kadar +1 butonu ya da çevrelerine ekle butonu görmüş olabilirsiniz. Şimdi size tamamen yeni bir özellike tanıtacağız. Google Plus Yandan açılan Takipçi Kutusu. Tıpkı Facebook'unuzda oluşturduğunuz gibi sizi çevrelerine ekleyen insanları gösteren bir kutu. Ayrıca “Çevrelerine Ekle” butonuda yer alıyor.
Blogunuzda hem fazla yer kaplamaması için hemde tasarım açısından görsel güzellik kazandırması açısından güzel bir eklenti.

1. Kumanda paneline giriş yapın.
2. Yerleşim → Gadget ekle → HTML/Javascript bulun.
3. Aşağıda kodu kopyalayıp yapıştırın.
Kırmızı ile belirtdiğim yere Google+ adresini yazın.

Sağdan açılan versiyon

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
//<!-- 
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "-35"}, "medium");}, function() {$(this).stop().animate({right: "-373"}, "medium");}, 500);}); 
//--> 
</script> 
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFP-7YFdqRNVncQSgPzL5loZK_OfZTPjqzuy3sKgjy3TD-zAuQx3lMHVtb9167IDPmiM29oN75vIpJe3SWspge9WaUkEY8Qa2oov1qr0LOzAJF1Jvpkb8OO_s8q0Ouo5es-xSDaXuzmfel/s1600/mef_gplus_sag.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 275px;
padding: 0 33px 0 33px;
width: 340px;
z-index: 99999;
position:fixed;
right:-373px;
top:20%;
}
.gplusbox div{
padding: 8px;
background: white;
border: 2px solid #D64937;
border-radius: 15px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" 

data-href="https://plus.google.com/113884753756003696845" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">

      (function() {
        window.___gcfg = {'lang': 'tr'};
        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>
</div></div>

Soldan açılan versiyon

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
//<!-- 
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({left: "-35px"}, "medium");}, function() {$(this).stop().animate({left: "-373"}, "medium");}, 500);}); 
//--> 
</script> 
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwpUjxU9_6BnIBjTc-7N-XaY4vnitLNoBSVwdfWXJ9eArm1pOSNcZMSmDYmrgEFuLcuRHZooFk4kPQLzGlLvKnJcJBh-z2fsQD9pHpXNDSD-n-AHSVHKPPkFG-R0PuhmM5ag93Bh5mb2q2/s1600/GPlus2.png") no-repeat scroll right center transparent !important;
display: block;
float: left;
height: 275px;
padding: 0px 33px 0px 33px;
width: 340px;
z-index: 99999;
position:fixed;
left:-373px;
top:20%;
}
.gplusbox div{
padding: 8px;
background: white;
border: 2px solid #D64937;
border-radius: 15px;
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" 

data-href="https://plus.google.com/113884753756003696845" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">

      (function() {
        window.___gcfg = {'lang': 'tr'};
        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>
</div></div>

Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...