أداة الأعجاب بصفحة الفيسبوك أسفل مدونات بلوجر

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

طريقة تركيب الأداة للبلوجر
قبل كل شي قم بعمل نسخة أحتياطية للقالب في حال حدوث أخطاء وكذلك لغر السلامة,توجة الى لوحة تحكم بلوجر وأختر المظهر ومنها أنقر على تحرير HTML وقم بالبحث عن كود ]]></b:skin> وقم بنسخ ولصق الكود التالي فوق الكود أو الوسم ]]></b:skin>

#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> وقم بنسخ ولصق الكود التالي فوق الكود أو الوسم </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//رحيل-القوافي-1142439085886087/' 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%2F/رحيل-القوافي-1142439085886087/&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>

قم بتغيير اسم الصفحة الخاص بي والذي تجدة مرتين الى أسم الصفحة الخاص بك للفيسبوك وقم بعملية حفظ القالب.

والى هنا أنتهى الدرس وفي حال أعجبك قم بمشاركة الموضوع على مواقع التواصل الأجتماعي ولاتنسى ترك تعليق لدعمنا وتحفزنا نحو الأفضل.