اضافة زر الاعجاب بصفحة الفيس بوك عائم بجوار المدونة


السلام عليكم ورحمة الله وبركاته
--
في هذه التدوينة سوف اقدم لكم اضافة  مميزة "زر الاعجاب بصفحة الفيسبوك عائم بجوار المدونة " لها دور كبير جدا بحيث تجعل الزائر ينجذب اليها ليقوم بعمل اعجاب لصفحتك على الفيسبوك . الاضفة فى الاصل من موقع اجنبى وانا عربتها وجئت بها لكم .

كما يمكنك معاينتها من خلال المدونة
______________________

طريقة التركيب

  1. توجه الى القالب ثم تحرير html
  2. ابحث عن الوسم </body> وضع الكود التالي  فوقه مباشرة

<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='http://c.top4top.net/p_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%2Fdabourphone%2F&layout=box_count&locale=ar_AR&sdk=joey&share=false&show_faces=false'></iframe> </div>

مع مراعاة تغيير كلمة dabourphone بمعرف صفحتك على الفيس بوك (اسم صفحتك فى عنوان url )  .

دبور فون

M.H.I

هناك تعليقان (2):

نسعد ونتشرف بتعليقاتكم
لكن فى إطار الموضوع وليس خارجه حفاظاً على راحتك الشخصية
لوضع اى اكواد Html فى التعليقات يرجى تحوليها اولاً بمحول الأكواد من هنا
لذلك نرجو منك ان تستعمل كل شىء بطريقته الصحيحة شكراً لتفهمك 😊

أحدث الأخبار

10/recent