زر الاعجاب بصفحة الفيسبوك بشكل جديد للبلوجر

السلام عليكم ورحمة

الله وبركاته

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

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

______________________

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

توجه الى القالب ثم تحرير html
ابحث عن الوسم ]]></b:skin> وضع الكود التالي فوقه مباشرة

.like-fab {
  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;
}
.like-fab img {
  padding: 16px;
  visibility: visible;
  opacity: 1;
}
.like-fab-button {
  bottom: 45px;
  position: fixed;
  height: 40px;
  visibility: hidden;
  opacity: 0;
  left:24px;
  border-radius: 100%;
  width: 60px;
}
.like-fab:hover .like-fab-button {
visibility: visible;
opacity:1;
left:24px;
height:65px;
border-radius: 0px;
}
.like-fab:hover img{
visibility: hidden;
opacity:0;
width:50px;
}
.like-fab:hover {
  background: #fff;
  border-radius: 3px;
  height: 102px;
  width: 76px;
  box-shadow: 1px 3px 20px rgba(0,0,0,0.7);
}

      #HTML6 {margin-bottom:0px;}

.fb_comments_count {
  border-radius: 2px;
  display: inline-block;
  line-height: 13px;
  text-align: center;
  border: 1px solid #9e9e9e;padding: 0 3px;}


.intro {
  width: 100%;
  text-align: center;
  color: #fff;cursor:default;
  background: #30527D url(https://dl.dropboxusercontent.com/s/n8v1j1483x883xh/study-stuff.jpg) no-repeat center;background-size: cover;}
.intro-about {
  font-size: 17px !important;
  direction: rtl;}
@media (min-width:990px){.intro-about{padding: 32px;width: 640px;margin: 0 auto;}.intro{padding:64px;}}@media (max-width:990px) and (min-width:780px){.intro{padding:48px}.intro-about{padding:32px 64px}}@media (max-width:780px) and (min-width:600px){.intro-about{padding:16px 0}.intro{padding:48px}}@media (max-width:600px) and (min-width:450px){.intro{padding: 32px;}.intro-about{display:none}}@media (max-width:450px){.intro{padding:36px}.intro img{display:none}.intro-about{display:none}}
@media(min-width:870px){.rafikoka {font-size: 48px;}}@media(max-width:870px) and (min-width:731px){.rafikoka {font-size: 40px;}.intro-about{font-size:14px!important}}@media(max-width:731px){.rafikoka {font-size:32px;}.intro-about{font-size:14px!important}}


      @media (max-width: 540px){#dropdowns {display:none;}}
.has-dropdown {
    float: right;
    color: #fff;
 background-color: #046dd5;
    height: 72px;
    cursor: pointer;
 z-index: initial;
 font-weight: bold;
}
.has-dropdown:hover {
    background-color: #0357AB;
}
.subjects.has-dropdown {
    width: 120px;
}
.dropdown-head {
    padding: 26px 24px;
}
.dropdown {
    text-align: right;
    height: 0px;
 width: 144px;
    background-color: #fff;
    padding: 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
    z-index: -1;
    visibility: hidden;
    overflow: hidden;
 position: relative;
 border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
 font-weight: normal;
}
.subjects:hover > .dropdown {
    visibility: visible;
    height: 216px;
}
.levels:hover > .dropdown {
    visibility: visible;
    height: 108px;
}
.dropdown li {
    list-style: none;
}
.dropdown li:hover {
    background-color: #eee;
}
.dropdown a {
 display: block;
    padding: 8px 14px
    }
.arrow {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    top: 16px;
    margin-right: 8px;
    position: relative;
}
.fblikebox{background:url(https://dl.dropboxusercontent.com/s/0f6nua8kajp742q/mdroos-fbcover.jpg);background-size:cover;height:82px;}.fblikebox a{float:right}.fbpagename{padding:4px 8px;font-size:22px;color:#fff;text-shadow:.5px .5px 3px rgba(0,0,0,.5);font-weight:700;margin-top:40px}.fbpageimg{position:relative;margin:24px 16px 0 0;border:3px solid #fff;border-radius:3px;box-shadow:.5px .5px 2px 1px rgba(0,0,0,.4)}.fbpagelike{box-shadow:0 0 4px rgba(0,0,0,.3);padding:14px 104px 14px 14px;display:block;background:#fff;width:100%}.fb-like{text-align:left}

ثم ابحث عن page navigation
بعدها ضع الكود التالي اسفله مباشرة
ملاحظة اذا لم تجده قم بوضع الكود فوق الوسم </body>

<div class='like-fab'><img src='https://dl.dropboxusercontent.com/s/f0nbfsttqi1veo3/like.png'/>
<iframe allowTransparency='true' class='like-fab-button' frameborder='0' scrolling='no' src='https://www.facebook.com/v2.5/plugins/like.php?app_id=113869198637480&amp;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&amp;container_width=613&amp;href=http%3A%2F%2Ffacebook.com%2Fth3.1ssam%2F&amp;layout=box_count&amp;locale=ar_AR&amp;sdk=joey&amp;share=false&amp;show_faces=false'/>
</div>

اللون الاحمر : كود زر صفحة الفيسبوك
يمكنك الحصول عليه من هنا

المصدر اورتيلكس للمعلوميات

مدونة تجربية

زر الاعجاب بصفحة الفيسبوك بشكل جديد للبلوجر

مقالات ذات صلة