Blogger Popup Facebook Beğenme Widget Kutusu

8/17/2016
Blogspot Facebook Widget

Popup Blogger Facebook Kutusu ile blog ziyaretçilerinizin facebook sayfanızı da tanımasına yardımcı olun. CSS kodları ile Blogger/Blogspot sitenizde sayfaların açılışlarında ziyaretçileri karşılayan ve blogunuzun facebook sayfasının görünmesini sağlayan Popup Facebook Widget kutusunu blogunuza ekleyebilirsiniz.

Burada hedeflenen amaç blogunuzun facebook sayfasında paylaşmış olduğunuz yayınların yeni ve mevcut ziyaretçilerinizine görünür olmasını sağlamaktır. Ziyaretçiler blogun en önemli yaşam kaynağıdır. Bu yüzden ziyaretçilerinizle sadece blog sayfanızda değil sosyal ağlar üzerinde etkileşim içerisinde olmalısınız.

Bir önemli husus da dünyadaki hemen hemen tü insanların bir facebook sayfası olduğunu unutmayın. Bu vesileyle blogunuzun facebook sayfasının popülerliğini artırarak önemli bir blogger sitesi takipçisine sahip olabilirsiniz. Blogger Popup Facebook Kutusu özeliğinin ana nedeni de bu, facebook sayfanızın popülerliğini artırmaya teşvik etmek. Böylece blog sitenizin trafiğini artırmaya devam edebilirsiniz.

Blogger sitenize Popup Facebook Kutusunu eklemek için aşağıdaki adımları takip edin;

Blogger Sitesine Popup Facebook Kutusu Ekleme

1. Blogger hesabınıza giriş yapın ve blogspot sitelerinizden eklemek istediğiniz blogu seçin. Seçmiş olduğunuz blogun kumanda panelinden Şablon > HTML'i Düzenle tıklayın. Açılan blog şablon kodları arasında CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin.
.bepopup-container{background:#fff url(https://cdn.rawgit.com/jquerycods/gif/master/0.2.1.gif) no-repeat 50% 50%;padding:0;position:fixed;top:50%;left:50%;z-index:90001;-webkit-box-shadow:0 0 15px 0 rgba(50,50,50,0.8);transform:translateY(-50%) translateX(-50%)}
.bepopup .bepopup-close{position:absolute;top:9px;right:20px;font-weight:600;font-family:Verdana;font-size:18px;cursor:pointer;color:#fff}
.bepopup .bepopup-close:hover{color:#ccc}
.bepopup .bepopup-header{font-size:20px;padding:10px;text-align:center;color:#fff;background-color:#3B5998;text-shadow:1px 2px 4px #3B5998}
.bepopup .bepopup-header p{font-size:10px;padding:0;margin:0;font-weight:400;text-transform:initial}
.bepopup .bepopup-content{padding:10px 20px}

2. Yine CTRL+F yardımıyla </body> kodunu bulun ve aşağıdaki javaScript kodlarını </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.
<script src='https://cdn.rawgit.com/jquerycods/like/master/fb.js' type='text/javascript'/>
<script type='text/javascript'>
  $(&#39;#popup-box&#39;).bepopup({
  &#39;autoOpen&#39;: true
});
</script>

3. Blogunuzun kumanda panelinden Yerleşim > Gadget Ekle yolunu takip ederek HTML/JavaScript ekleyin ve aşağıdaki HTML kodları HTML/JavaScript içerisine kopyalayıp yapıştırın ve kaydedin.
<div id="popup-box" class="bepopup">
<div class="bepopup-container">
<div class="bepopup-header">
<div class="bepopup-close" data-dismiss="bepopup">x</div>
Blogger Eklentileri Facook Sayfası
<p> Fabook sayfamızda tüm son güncellemelerden daha hızlı haberdar olmak için, sayfamıza katılın.</p>
</div>
<div class="bepopup-content">
<div class="fb-page" data-href="https://www.facebook.com/bloggereklentileri" data-width="400" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"></div></div>
</div>
</div>
</div>


Popup Facebook Kutusu Açıklaması

Blogunuza eklemiş olduğunuz pop-up facebook kutusunun çalışması için, HTML kod içerisinde bulunan https://www.facebook.com/bloggereklentileri olan yere kendi blogunuzun facebook URL'si ekleyin. Blogunuzun anasayfasına gelerek pop-up facebook kutusunun çalıştığını kontrol edin.

Blogger Eklentileri | Blogger Facebook Widget / Blogspot Facebook Widget / Blogger Popup Facebook Beğenme Widget Kutusu

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

3 yorum

Paylaşımınız için teşekkürler, yeni Blogger eklentileri de bekliyoruz

Cevap

Merhaba, bu kodu bloguma ekledim. fakat popupu kapatmak için x düğmesine bastığımda kapanmıyor bunun sebebi ne olabilir?

Cevap

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> blogunzda bu kodun olup olmadığını kontrol edin

Cevap