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

07 Şubat, 2017
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.

4 yorum:

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

    YanıtlaSil
  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. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
3. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanın.

Copyright © 2016 - 2024 Blog Tecrübem. All rights reserved. Powered by Dijidal.com and Blogger. I Google
Sitede yer alan tüm içerikler Blog Tecrübem'e aittir, kullanım koşulları çerçevesinde alıntı yapılabilir.