Advertisements

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

0

Advertisements

السلام عليكم ورحمه الله وبركاته اليوم ساقدم لكم درس من دروس بلوجر عباره عن اضافه جميله
زر اعجاب رائع لمدونات بلوجر خفيف وانيق وسهل التركيب للغايه فقط ضعه في اداه 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 data-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

اترك تعليق

يرجي التسجيل لترك تعليقك

شكرا للتعليق