Blogger için Facebook Sayfa Eklentisi #2

Bir önceki içeriğimizde Blogger için Facebook Sayfa Eklentisi paylaşmıştım. İsteyenler önce ona bakabilir. Bu içerikte iste sayfanın sağ alt köşesinde, sayfayla birlikte hareket eden ve ziyaretçi kapatmadıkça orada duran minik Facebook Sayfa eklentisi paylaşacağım. Nasıl ekleneceğine bakacak olursak.

1. Adım
Öncelikle CSS kodlarını eklememiz gerekiyor. Blogger > Tema > HTML'yi Düzenle yolunu izleyerek aşağıda paylaşmış olduğum kodları ]]> kodunun hemen üstüne yapıştıralım.

CSS
#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%);
 } 
}

2. Adım
Daha sonra

Virüs bulunmuyor. www.avast.com

kodunu bulalım ve hemen üstüne aşağıdaki kodları yapıştıralım.
Not:Kodlar arasında koyu harfe belirttiğim "https://www.facebook.com/4moblog" yazan yerlere kendi sayfa adresinizi yazmalısınız.

HTML