إضافة صندوق اعجابات الفيس بوك بطريقة عرض رائعة لمدونات بلوجر

المصدر   هنا

السلام عليكم ورحمة الله وبركاته

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

بطريقة عرض مميزة ورائعة وشكل جذاب 

حيث يكون الصندوق مخفي على الجانب الايمن من الشاشة ولا يظهر سوى بمرور المؤشر عليه (للمشاهدة)

الان سوف نتعلم طريقة اضافة هذه الاضافة اولاً قم بحفظ نسخة احطياتيه من القالب تجنباً لحدوث اي خطأ.

الان اذهب الى لوحة تحكم المدونة ثم اختر تصميم ثم تحرير HTML

ثم قم اضغط من لوحة التحكم على (Ctrl+F)وابحث عن هذا الكود 

</head>

ثم انسخ كود الJQuery والصقه فوقه مباشرة وقم بحفظ القالب.

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

الان اذهب الى عناصر الصفحة ومن هناك اختر اضافة اداة ثم اختر اضافة HTML/JavaScript كما في الصورة

 الان اضف هذا الكود في المربع

<script type="text/javascript">
 /*<![CDATA[*/
 jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
 /*]]>*/
 </script>
 <style type="text/css">
 .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhieI7PU2nlBuaCDvRv1JB3sr0XCx7JUXaKOLa7NSRQanZLEXB6sZWYClK-KhHlQl2N8dlKVOw4kvicSFbyihOdLEadlWAnSuIQGcw6S6JYneiP0y14CtWKXBdJMDylJohqTzb-pdfv4q4/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .abtlikebox span a{color: gray;text-decoration:none;}
 .abtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="abtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FIslamkidz&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://www.taqnya09.blogspot.com/">Taqnya09</a></span>
     </div>
 </div>

اخر خطوة قم بتغير الكلمة التي بالون الاحمر الى اسم المستخدم الخاص بصفحتك على الفيس بوك ويمكنك الحصول على اسم المستخدم من هذا الرابط https://www.facebook.com/username/.