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

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

انقر للمشاهدة!

كيفية إضافة صندوق الإعجاب بصفحة فيسبوك فيمدونة بلوجر؟

1. إنتقل من blogger.com --> القالب --> تحرير html ثم بإستخدام رمز الإختصار ctrlوf أبحث عن الرمز </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/mdadice' 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%2Fmdadice&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>

2. غير mdadice بمعرف مدونتك على فيسبوك

3. أبحث عن الرمز ]]></b:skin> ثم أضف الكود التالي فوقه مباشرة:

#open-fb{background-color:#FFFFFF;border:4px solid rgb(210,210,210);bottom:0;border-bottom:0;float:right;height:auto;margin-bottom:0;margin-right:5px;position:fixed;left: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%)}}

4. أنقر على حفظ القالب ثم قم بالنقر على "عرض المدونة" لمشاهدة النتيجة.

By glok

Similiar tagsبلوجر