اضافة صندوق اعجابات فيسبوك عائم اسفل المدونة

Mohamed Fesal
يناير 10, 2017

اضافة صندوق اعجابات فيسبوك عائم اسفل المدونة

اضافة جميلة جدا لمدونتك تمكنك من اضافة صندوق اعجابات لصفحتك علي فيس بوك في مدونتك بشكل رائع حيث ان الاضافة عائمة تتحرك مع الصفحة.
من مميزات الاضافة انها لا تاخذ مكان من الصفحة لانها صغيرة جدا .

ايضا الاضافة متجاوبة مع الهواتف فلا تسبب مشاكل عن فتح مندونتك من الهاتف.

طريقة تركيب الاضافة :

قم بتحرير القالب
ابحث عن <style/>

قم بلصق هذا الكود فوقة

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

قم بالبحث عن <body/>

قم بلصق هذا الكود فوقة

<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/sharekny.tech' 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%2sharekny.tech&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>

واخيرا قم  ستجد sharekny.tech مكررة مرتين في الكود قم بتغيرهم باسم المستخدم الموجود برابط صفحتك علي الفيسبوك