الرئيسية صندوق الإعجاب بالفيس بوك بطريقة جميلة

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

صندوق الإعجاب بالفيس بوك بطريقة جميلة جدا وظاهرة للزائر دائما وبدون إزعاجه

أولا نبحث عن :
]]></b:skin>
 نضيف فوقه الكود التالي : 
._1dro ._1drp 
{direction: rtl!important; }
 #open-fb{background-color: #FFFFFF; 
 border: 4px solid rgb(210, 210, 210);
 bottom: 0; border-bottom: 0; float:left; 
 height: auto; margin-bottom: 0;
 margin-right: 5px; position: fixed;
 right: 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%); } }
 ثم نبحث عن :
</body>
 ونضيف فوقه الكود التالي : 

<div class='slideUp' id='open-fb'>
<a class='close-fb' href='#close-fb-like-box' onclick='hide(&apos;open-fb&apos;)' title='اغلاق'><i class='fa fa-times'/></a>
<div class='fb-like-box ' data-header='false' data-height='62' 
data-href='https://www.facebook.com/ComputerForumkings' 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%2FComputerForumkings&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 = 'block';
}
function hide(target) {
    document.getElementById(target).style.display = 'none';
}
</script>

 ثم نستبدل ComputerForumkings بإسم صفحتك على الفيس بوك

بقلم المهندس كمال خضر

مبرمج متخصص

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

الاشتراك في: تعليقات الرسالة (Atom)