إضافة صندوق إعجاب فيس بوك منبثق إحترافي جديد 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>