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

Advertisements

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

0 39

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

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

قد يعجبك ايضا

يستخدم موقع تبسيط ملفات تعريف الارتباط . للتحسين المستمر لزيارتك يمكنك الموافقه او الالغاء في اي وقت . موافقاقرا المزيد