13‏/08‏/2016

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

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

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

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

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. أنقر على حفظ القالب ثم قم بالنقر على "عرض المدونة" لمشاهدة النتيجة.




ليست هناك تعليقات

إرسال تعليق

تعليقاتكم تشجعنا على تقديم المزيد وهي محل إهتمامنا دائمًا

© جميع الحقوق محفوظة مداد الجليد 2013 - حقوق الطبع والنشر | مدعومة بكل فخّر من blogger | سياسة الخصوصية