أغلاق

اضافه زر اعجاب عائم لفيسبوك رائع !!

كتابة Sanad Nabil بتاريخ : 2 يوليو 2016 - آخر تحديث: 3 أغسطس 2018
اضافه زر اعجاب عائم لفيسبوك رائع !!
اضافه زر اعجاب عائم لفيسبوك رائع !!

السلام عليكم ورحمه الله وبركاته اليوم ساقدم لكم درس من دروس بلوجر عباره عن اضافه جميله
زر اعجاب رائع لمدونات بلوجر خفيف وانيق وسهل التركيب للغايه فقط ضعه في اداه HTML/JavaScript  وسوف يعمل معك

الان قم بالدخول للتخطيط وضع الكود التالي في اداهHTML/JavaScript   

<style>
.fb-like {
position: fixed;
bottom: 16px;
left: 16px;
z-index: 99999;
background: #3a5795;
border-radius: 100%;
box-shadow: 1px 2px 16px rgba(0,0,0,0.6);
height: 64px;
width: 64px;
}
.fb-like img {
padding: 16px;
visibility: visible;
opacity: 1;
}
.fb-like-button {
bottom: 45px;
position: fixed;
height: 40px;
visibility: hidden;
opacity: 0;
left:24px;
border-radius: 100%;
width: 60px;
}
.fb-like:hover .fb-like-button {
visibility: visible;
opacity:1;
left:24px;
height:65px;
border-radius: 0px;
}
.fb-like:hover img{
visibility: hidden;
opacity:0;
width:50px;
}
.fb-like:hover {
background: #fff;
border-radius: 3px;
height: 102px;
width: 76px;
box-shadow: 1px 3px 20px rgba(0,0,0,0.7);
}
</style>
<div class=’fb-like’><img src=’https://lh3.googleusercontent.com/-2KbrEjv2NwM/V0Tow1dTB_I/AAAAAAAABfE/oI53KtnFSuIGasJXfzOqEnY8FQZzNSv8ACLcB/h120/36fuv53.png’/>
<iframe allowtransparency=’true’ class=’fb-like-button’ frameborder=’0′ scrolling=’no’ src=’https://www.facebook.com/v2.5/plugins/like.php?app_id=113869198637480&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D42%23cb%3Df2938f6778%26domain%3Ddevelopers.facebook.com%26origin%3Dhttps%253A%252F%252Fdevelopers.facebook.com%252Ff12322327c%26relation%3Dparent.parent&container_width=613&href=http%3A%2F%2Ffacebook.com%2Ftapseet%2F&layout=box_count&locale=ar_AR&sdk=joey&share=false&show_faces=false’></iframe> </div>

التعديلات
قم بتغييرtapseet لمعرف صفحتك علي فيس بوك
مثال
www.facebook.com/tapseet

انت رائع ! كن ايجابيا وضع بصمتك بمشاركة الموضوع
رائع جدا !
X
هل لديك مقترحات لتحسين تجربتك أكثر؟
الإسم *
بريدك الإلكتروني *
إرسال
إرسال