no-style

إضافة صندوق إعجاب فيس بوك منبثق إحترافي جديد 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 بلون يناسبك
وأخيرا إضغط على حفظ وتوجه الى مدونتك لمشاهدة النتيجة

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

للتحميل


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

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

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

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

9 تعليقات

  1. شكرا لك اخي

    و لكن لم استطيع نسخ الاكواد جميعها من صندوق الاقتباس

    لان الروابط باللون الاحمر مع كود الالوان لا يمكن نسخها

    هل يمكن ان ترفق الاكواد بملف نصي قابل للتحميل و شكرا

    ردحذف
  2. مرحبا بك أخي الكريم
    نشكرك على التبليغ
    لقد وضعنا رابط لتحميل كود الاضافة
    http://zipansion.com/2sq96
    لا تنسى الانضمام الى متابعي المدونة الاوفياء

    ردحذف
  3. شكرا لك على تعبك

    يبدو ان رابط التحميل لم يعد يعمل

    ردحذف
  4. أهلا وسهلا أخي الكريم
    نشكرك على التبليغ
    تفضل رابط التحميل : http://zipansion.com/35CGf

    ردحذف
  5. شكرا لكم على الرد و الاهتمام و لكن بعد التحميل للاسف لم تعمل الاضافة هل يمكن التاكد منها
    و لكم كل التحية و التقدير

    ردحذف
  6. مرحبا بك أخي الكريم
    لقد قمنا بتجربة الاضافة وهي تعمل بشكل جيد
    للتتأكد بنفسك أضغط على الرابط التالي
    https://el3araby-web.blogspot.com/p/html-editor.html
    أضف كود الاضافة في صندوق html ثم اضغط على معاينة

    ردحذف
  7. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  8. أزال المؤلف هذا التعليق.

    ردحذف
  9. مشكوررر

    https://www.egymovz.ml

    ردحذف

إرسال تعليق

أحدث أقدم