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ı ]]></b:skin> 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 </body> 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
<div class='slideUp' id='open-fb'>
<a class='close-fb' href='#facebook-begeni-kutusunu-kapat' 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/4moblog' 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%2F4moblog&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>

Nasıl göründüğüne aşağıdaki resimden bakabilirsiniz.