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

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

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



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

ادخل الي مدونتك علي بلوجر ثم انتقل الي التخطيط
اختر اضافة اداة في اي مكان ثم اختر 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("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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/>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
الان اذهب الي مدونتك وتاكد من الاضافة وبالتوفيق
التالي
« موضوع سابق
اقدم موضوع