اضافة مربع الاعجاب Facebook المتحرك الى بلوجر

نعلم جميعا ان كل اصحاب المواقع والمدونات قامو باضافة مربع الاعجاب من الفيسبوك فى مواقعهم ومدوناتهم .ولكن 

لم يقومو باى نشاط . انها اضافات بسيطة widgets الى المدونة .اليوم ابدا بمشاركة هذه الاضافة الجديدة مع 

معرفة الطريقة بالتالى ..

 

ستجد الاضافة فى المدونة اذا اردت تجربتها 

(انضم الى صفحة المدونة فى الفيسبوك لتحصل على كل الجديد)

 1 - اذهب الى بلوجر > التخطيط  .

2 - اضافة اداة  HTML/JavaScript .

3 - قم باضافة الكود التالى الى الاداة ..

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMd79WWgmJN1QdYJ7a4kZaNP8iG72BO6dQAnxypVK-g9LU4XCxJ4JLo6EgHGzdTYiVsbXwr8r46Zn_a6qXZmt2_D7FyRTo_wMXubw1-j4Kxyype5OzM888biNjkgbDixyVlX7ELBvR28lx/s1600/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Flivegy&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe>

 ملاحظة قم بتغيير كلمة livegy باسم المدونة الخاصة بك فى الفيسبوك .

4 - قم بحفظ الاداة .

5 - قم بالذهاب الى قالب > تحرير HTML وقم بتوسيع قالب المستخدم .

6 - قم باضافة الكود التالى فوق <head/> .

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

7 - اضغط حفظ القالب وقم باختبار الاضافة اذا كانت تعمل فى مدونتك .