Sayfa ile hareket eden Facebook beğen (like box) eklentisi

Sayfa ile hareket eden Facebook beğen (like box) eklentisi
Sayfa ile hareket eden Facebook beğen (like box) eklentisi
Blogger (blogspot) blog sayfalarına Facebook eklentisi nasıl eklenir? Blogger için sayfa ile hareket eden Facebook like box (beğen kutusu) eklentisi...

Blogger bloglarınız için kullanmak isteyeceğiniz bir eklentiyi sizlerle paylaştım bu yazımda. Bu eklenti, blog sayfalarınızın sağ ya da sol alt köşelerinde görünen ve sayfa ile birlikte hareket eden Facebook like box yani Facebook beğen kutusu eklentisi. Bu özel olarak tasarlanmış eklenti sayesinde blogunuzu ziyaret edenlerin, Facebook sayfanızı beğenmeye teşvik edebilirsiniz. Bu sayede beğeni sayınızı da arttırabilirsiniz. Ayrıca bu eklentinin mobil uyumlu olduğunu da belirtmeliyim. (Bu arada sevgili dostlar bu eklenti eski sürüm Blogger temelarında düzgün çalışmayabilir, haberiniz olsun)

Şimdi Facebook beğen (like box) eklentisini Blogger'a ekleyelim:


1. Öncelikle Blogger kullanıcı panelinde, sol tarafta yer alan "Şablon" ardından açılan sayfada "HTML Düzenle" sekmelerine tıklayarak kodların olduğu kısma ulaşın.

2. Kodların arasından Ctrl F yardımıyla aşağıdaki kodu bulun
</style>
3. Bulduğunuz bu kodun hemen üstüne aşağıdaki kodları ekleyin.
#open-fb{background-color: #FFFFFF; border: 4px solid rgb(210, 210, 210); bottom: 0; border-bottom: 0; float:left; height: auto; margin-bottom: 0; margin-right: 5px; position: fixed; right: 0; width: auto; z-index: 10;}
.close-fb{color: #333!important; position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11px;}
.slideUp{
 animation-name: slideUp;
 -webkit-animation-name: slideUp;
 animation-duration: 1s;
 -webkit-animation-duration: 1s;
 animation-timing-function: ease;
 -webkit-animation-timing-function: ease;
 visibility: visible !important;
}
@keyframes slideUp {
 0% {
  transform: translateY(100%);
 }
 50%{
  transform: translateY(-8%);
 }
 65%{
  transform: translateY(4%);
 }
 80%{
  transform: translateY(-4%);
 }
 95%{
  transform: translateY(2%);
 }
 100% {
  transform: translateY(0%);
 }
}
@-webkit-keyframes slideUp {
 0% {
  -webkit-transform: translateY(100%);
 }
 50%{
  -webkit-transform: translateY(-8%);
 }
 65%{
  -webkit-transform: translateY(4%);
 }
 80%{
  -webkit-transform: translateY(-4%);
 }
 95%{
  -webkit-transform: translateY(2%);
 }
 100% {
  -webkit-transform: translateY(0%);
 }
}
4. Daha sonra yine Ctrl F yardımıyla aşağıdaki kodu bulun.
</body>
5. Bulduğunuz bu kodun hemen üstüne ise aşağıdaki kodu ekleyin.
<div class='slideUp' id='open-fb'>
<a class='close-fb' href='#close-fb-like-box' onclick='hide(&apos;open-fb&apos;)' title='Close'><i class='fa fa-times'/></a>
<div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/blogtecrubem' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogtecrubem&amp;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/>
</span></div></div>
<script type='text/javascript'>
function show(target) {
    document.getElementById(target).style.display = &#39;block&#39;;
}
function hide(target) {
    document.getElementById(target).style.display = &#39;none&#39;;
}
</script>
6. Son olarak kırmızı renkle yazılmış olan "blogtecrubem" yerine kendi Facebook sayfanızın kullanıcı adını yani url sini yazın. Ardından şablonu kaydedin ve blogunuzu kontrol edin. Tüm yapmanız gerekenler bunlardı. Bu arada 3. aşamda mavi renkle belirttiğim right kelimesinin yerine left yazarsanız eklentinin sol alt köşede görünmesini sağlarsınız.

✋Bu içerik Kişisel Blog - BlogTecrübem tarafından hazırlanmıştır.

4 yorum:

  1. Önemli bir bilgilerden :)) Sağ olasın...

    YanıtlaSil
    Yanıtlar
    1. Rica ederim, evet güzel bir eklenti...

      Sil
  2. Eğer facebook sayfam kilitlenmemiş olsaydı çok işime yarardı kesin :(

    YanıtlaSil
  3. Hocam Twitter İçin de Olanı Varsa İyi Olur... Ben Sadece Twitter Kullanıyorum da. Yine de Teşekkürler...

    YanıtlaSil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın. (Hemen silinir!)
3. Yazım ve dil bilgisi kurallarına uymaya çalışın lütfen. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

 
Bumerang - Yazarkafe

Copyright © 2017 Kişisel Blog | Blog Tecrübem. Tüm hakları saklıdır.
I Blogger!