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

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

أهلا ومرحبا بكم من جديد زوار ومتابعي مدونة الاوائل الكرام

جئت لكم اليوم بإضافة رائعة ومهمة

وهي اضافة صندوق الاعجاب الخاص بصفحة الفيسبوك

اسفل الصفحة بشكل ثابت

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

لانها تعتبر اسهل طريقة للتواصل مع الزائر

 في حالة اراد ان يستفسر عن شئ.

وايضا فهي مفيدة لانها تعمل علي زيادة معجبين الصفحة الخاصة بك.

معاينة الاضافة

• معاينة

تركيب الاضافة

اذهب الي قالب ثم تحرير html/javascript ثم تبحث عن

</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/ONLiveEgypt' 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%2FONLiveEgypt&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>

وتقوم بتغيير ONLiveEgypt الي اسم مستخدم صفحتك

بعد ذلك اضغط حفظ النموذج 
ومبروووك عليك

واذا واجهتك اي مشكلة قم بوضع تعليق وسنرد عليك في اقرب وقت