Menu

Blogger Hover Efekti Google Plus Pop Widget Eklenti Kodları

Blogger Google Plus takipçilerini artırmak makalelerinizin tıklanma oranlarını yükseltmek SEO kalite puanını artırmak için bu eklenti oldukça değerlidir.

Blogger Google Plus eklentisi CSS,jQuery ve HTML ile oluşturulmuştur.Hover efektli profesyonel görünüme sahiptir.

Blogger için Css kodları ile oluşturulmuş bu Blogger Hover Efekti Google Plus Pop Widget Eklenti Kodlarının nasıl göründüğünü ve kodların çalışıp çalışmadığını test etmek için kod deneme penceresini kullanabilirsiniz.Kod Deneme Penceresi

Css kodları ile oynayarak site tasarımınıza uygun şekli ve renklerini de kendinize göre,zevkinize göre ayarlamak da mümkündür.

Blogger Hover Efekti Google Plus Pop Widget Eklenti Kodları



Ayrıca daha önce yayınladığımız aşağıdaki eklentilerde işinize yarayabilir,deneyebilirsiniz.

---6 Adet İnternetten Para Kazandırma Kitapları

---Blogger CSS3 Siyah Açılır Menu Yapma

Blogger Hover Efekti Google Plus Pop Widget Eklenti Kodları

Blogger Hover Efekti Google Plus Pop Widget Eklenti Kodları sitenize yüklemek için,ilk önce Blogger.com giriş yapınız sonra Yerleşim/Gedget Ekle/ HTML/JavaScript adımlarını takip ediniz.

Blogger Hover Efekti Google Plus Pop Widget Eklenti Kodları

HTML/JavaScript tıkladıktan sonra aşağıdaki kodu kopyalayarak resimdeki gibi boşluğa yapıştırınız,Blogger Hover Efekti Google Plus Pop Widget Eklenti Kodları Eklentisini site tasarımınıza uygun olarak istediğiniz yere ekleyebilirsiniz.


<style> .post-body{padding:8px 0 10px} </style>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 500;
summary_img = 390;
img_thumb_height = 120;
img_thumb_width = 180;
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
</style>
 <script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
<style type="text/css">
#gpplikebox{
background-color:#F90101;
display:block;
padding:0;
z-index:99999;
position:fixed;
}
.gpplbadge{
background-color:#F90101;
display: block;
height:150px;
top:50%;
margin-top:-75px;
position:absolute;
left:-47px;
width:47px;
background-image:url("https://lh5.googleusercontent.com/-33-sWU7Gkiw/U-NfVKE7D-I/AAAAAAAAK0A/O1PIOw8wwko/w47-h150-no/Google.png");
background-repeat:
no-repeat;
overflow:hidden;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-bottomleft:8px;
border-top-left-radius:8px;
border-bottom-left-radius:8px;
}
</style>
<script type="text/javascript">
(function(md){
md(document).ready(function(){
var $dur = "medium";
// Duration of Animation
 md("#gpplikebox").css({right: -250, "top" : 100 })
md("#gpplikebox").hover(function () {
md(this).stop().animate({
right: 0
}, $dur);
}, function () {
md(this).stop().animate({
right: -250
}, $dur);
});
md("#gpplikebox").show();
});
})(jQuery);
</script>
<div id="gpplikebox" style="display:none;">
<div class="gpplbadge"></div>
<img src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/+SEOMektebi" data-source="blogger:blog:followers" data-width="245">
</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>
</div>
</div>



Düzenleme:
Yayınladığımız bu eklentiler içinde ki renk kodları #XXXX şeklinde olan kodlardır bunları aşağıdaki SEO Mektebi renk kodları sayfasından istediğiniz renkleri seçerek ekleyebilirsiniz.

SEO Mektebi CSS Renk Kodlarına Buradan Ulaşabilirsiniz

Ayrıca eklentiler içindeki sayısal değerlerle oynayarak site tasarımına uygun olan ölçüleri sağlayabilirsiniz.

Yapılması gereken sarı olarak belirtiğim yere kendi Google Plus ID eklemenizdir.

Sonraki Yazılar
« Prev Post
Önceki Yazılar
Next Post »

Henüz Yorum Yapılmamış " Blogger Hover Efekti Google Plus Pop Widget Eklenti Kodları "

Önerilen Yazı
×