اضافة صندوق الفيسبوك الجانبي المنزلق

مدونة بروفيسور كمبيوتر 8:41 م اضافات اجتماعية, اضافات بلوجر,

اضافة صندوق الفيسبوك الجانبي المنزلق

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

معاينة

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

ادخل الي مدونتك علي بلوجر ثم انتقل الي التخطيط

اختر اضافة اداة في اي مكان ثم اختر HTML/javaScript

الان انسخ الكود التالي داخل الاداة ثم قم بحفظ الاداة

<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/AVvXsEhYuJtFohStrCMDQqWYBhVyV3TbvOc3BHZ_fsr-oe0DZFpeV_DZJk1h7HmxdECBX0zcgtmZ3IuXJ0fda34NasVe2-vPnfS1a21hDQ9leglihWkJOI0nLaumMNukCQ3X2b5nU3thCiHqLwG0/s150/w2b_facebookbadge.pn") 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%2Fprofessor.pc.1&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><span>Widget by:<a href="http://www.MyBloggerTricks.com">My Blogger Tricks</a></span></div></div>

قم بحفظ الاداة ثم توجة نحو مدونتك ثم اختر قالب ثم اختر تحرير HTML
الان اضغط علي "Ctrl + F" سوف يظهر معك مربع للبحث داخل القالب اكتب <head/> ثم اضغط انتر
الان ضع هذا الكود فوق الوسم <head/>