إضافة صندوق إعجاب فيس بوك منبثق إحترافي جديد 2018

إضافة صندوق إعجاب فيس بوك منبثق إحترافي جديد 2018

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

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

سنتعرف اليوم على طريقة تركيب صندوق إعجاب فيس بوك منبثق إحترافي فقط وحصريا على مدونة العربي ويب (جديد 2018)

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

صورة الأضافة

لمشاهدة عرض توضيحي

للمعاينة

خطوات تركيب صندوق إعجاب فيس بوك على مدونتك

تابع معي ...

أولا توجه الى لوحة تحكم مدونتك  من هنا 

2 - التخطيط >> أضافة أداة html >>

3 - أضف الكود التالي في الأداة html

<style>
 
    .tw_float_ads_main_Wrap{
        max-width: 350px;
        max-height: 350px;
        position: fixed;
        z-index: 98765;
        background: rgb(59,89,152);
        top: 50%;
        left: 50%;
        margin-left: -175px;
        margin-top: -175px;
        box-sizing: border-box;
        box-shadow:0 0 3px rgba(0,0,0,0.2);
        border-radius: 10px;
        display: none;
    } 
 
    .tw_float_ads_close{
        margin: 0 auto;
        text-align: center;
        padding: 30px 20px 30px;
        position: relative;
    }
 
 .tw_float_ads_close #tw_close_button
{
   font-size: 25px;
    color: #fff;
    position: absolute;
    top: -12px;
    right: -10px;
    display: inline-block;
    box-shadow:0 0 3px rgba(0,0,0,0.2);
    z-index: 9999999;
    background: rgb(59,89,152);
    padding: 5px;
    border-radius: 5px;
}
 
#tw_close_button{
        cursor:pointer;
}
#TW_credits{
    font-size: 25px;
    color: #fff;
    position: absolute;
    bottom: 2px;
    right: 5px;
    display: inline-block;
    text-shadow:0 0 3px rgba(0,0,0,0.2);
    text-decoration: none!important;
    }
 
</style>
<div class='tw_float_ads_main_Wrap' id='tw_float_ads_main_Wrap'>
    <div class='tw_float_ads_close'>
     
       <span id='tw_close_button' style='float: right'>
         
           <i id='TW_Close_Button' class="fa fa-times" aria-hidden="true" title='close the Advertisment'></i>
         
       </span>
     
       <div>
         
     <div class="fb-page" data-href="https://www.facebook.com/mahwouss2/" data-width= '300' data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/mahwouss2" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/mahwouss2">Trending Widgets</a></blockquote></div>
         
       </div>
   <span id='TW_credits' style='float: right; font-size: 12px;'><a style='text-decoration: none!important; color: #fff;' href="
https://goo.gl/pHMFzH">Get This Widget</a></span>
 
    </div>
 
    <div style='clear:right'></div>
 
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<script type="text/javascript">
window.onload = function(){
var tw_closeButton = document.getElementById('tw_close_button');
 
var tw_float_ads_main_Wrap = document.getElementById("tw_float_ads_main_Wrap");
myVar = setTimeout(function(){ tw_float_ads_main_Wrap.style.display = 'block' }, 3000);
tw_closeButton.onclick = function(){
 
  document.getElementById("tw_float_ads_main_Wrap").style.display = 'none';
 
}
}
</script>

للتعديل على الإضافة لتتناسق مع مدونتك

أولا إستبدل معرف صفحتي هذا mahwouss2 بمعرف صفحتك
2 - إستبدل كود اللون rgb(59,89,152 بلون يناسبك

وأخيرا إضغط على حفظ وتوجه الى مدونتك لمشاهدة النتيجة

إذا واجتك مشكلة في نسخ الكود يمكنك تحميله عبر الضغط على الرابط التالي

للتحميل

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها

باب التعليقات مفتوح للجميع

لا تنسى مشاركة التدوينة مع الأصدقاء عبر مواقع التواصل ليستفيد الجميع

إدعمنا لكي نستمر في تقديم المزيد