إضافة مربع الإعجاب فايسبوك المتحرك لمدونة بلوغر

1 - لماذا مربع الإعجاب فايسبوك المنبثق؟

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

شاهد مثال من هنا

نموذج مربع الإعجاب فايسبوك

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

2- إضافة مربع الإعجاب فايسبوك لمدونات بلوجر:

الخطوة الأولى تبدأ بفتح أداة تغيير القالب الخاص بمدونتكم، من قائمة واجهة المدونة نضغط على قالب:

ثم تحرير HTML

من لوحة المفاتيح ننقر ننقر Ctrl+F للبحث داخل القالب عن الكود التالي   </body>  

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

=> الكود:

<style type='text/css'>
#haakblogFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:260px;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#haakblogFBpop a.haakblogclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).bind(&quot;load&quot;, function() {
// Animate Top
$(&#39;#haakblogFBpop&#39;).animate({top:&quot;150px&quot;}, 1000);
// Widget by www.haakblog.com
$(&#39;a.haakblogclose&#39;).click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='haakblogFBpop'>
<!-- Widget  Start -->
<center>
<b>تابعنا على فايسبوك</b></center>
<center>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFolfoly&amp;width=300&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=196282097100252' style='border:none; overflow:hidden; width:300px; height:258px;'/>
</center>
<!-- Widget End -->
<a class='haakblogclose' href='#'>&#215;</a>
<center style='float:right; margin-right:10px;'>
<span style='font-size:xx-small; color:#000; text-decoration:none;'/>
<a href='http://www.folfoly.com/2013/09/add-pop-up-facebook-like-box-blogger.html' style='font-size:xx-small; color:#3B78CD; text-decoration:none;' target='_blank'

rel='dofollow'

>مربع الإعجاب على مدونتك؟</a></center>
</div>

الكود باللون الأحمر هو الخاص بمربع الإعجاب، قوموا بتعويض إسم صفحة  Folfoly  بالأزرق بإسم صفحتكم على الفايسبوك قبل حفظ التغييرات. وافتحوا مدونتكم لتشاهدوا أن مربع الإعجاب فايسبوك تمت إضافته وهو يفتح في كل مرة يقوم الزائر بفتح صفحة جديدة. (طريقة إنشاء عنوان ويب لصفحات فايسبوك)

إضافة مربع الإعجاب فايسبوك يظهر لمرة واحدة فقط