دليلك الشامل لتبسيط كل جديد ودخول عالم كبير من الاخبار المميزه

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

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

Advertisements

شارك برايك في الموضوع
قد يعجبك ايضا
التعليقات
^