إضافة | صندوق المعجبين الفيسبوك " Fun Box " بتقنية الـ JQuery

بسم الله الرحمن الرحيم
الحمد لله خالق الأولين والآخرين وغافرذُنوب المُذنبين ومهلك الطغاة والجبارين الحمد لله أولاً وآخرا مبتدءاً ومنتهيا الحمد لله فى كل مكان وعلى أى حال وفى كل الأزمان والصلاة والسلام على النذير البشير صلى الله عليه وسلم .. أما بعد ،في هذا الموضوع بإذن الله سأشرح لكم طريق جديدة ومهمة جدا للأصحاب المواقع أو المدونات ،وهي طريقة إضافة صندوق المعجبين على يمين الصفحة في موقعك او مدونتك
إلى يمين الصفحة في موقعك طبعاً سيظهر المعجبون عن مرور الماوس على الإيقونة وهي طريقة تتبيث الصندوق بتقنية الـ JQuery ،إنها حقاً أسهل طريقة ،لقد بحثت كثيراً عن كيفية إدراج صندوق معجبين facebook فوجدت أن الكثير يذكر طرق كلها أكواد وأشياء معقدة للغاية فأنا أعرف الطريق والحمد الله ،وحتى لا أُ كثر من الحديث أتركك مع خطوتيان فقط! ،ادراج صندوق معجبين الفيسبوك إلى مدونتك أو موقعك بكل سهولة ويسر.

 أشر بسهم الفأرة على أيقونة Facebook يمين صفحة المختبر

 لإضافتها توجه إلى تصميم >> تحرير html >> أخذ نسخة احتياطية >> توسيع القالب .

وبعد توسيع القالب قم بالبحث عن هذ الكود بالضغط على Ctrl + F .

</head>

ثم أضف فوقه مباشرة الكود التالي

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

توجه إلى تصميم >> عناصر الصفحة>> إضافة أداة html >> ألصق الكود التالي

<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/AVvXsEjkUowhrOh692YTaZ6A4ZJzIo8ifdh-B7ZIZoH99wbGufeZRsvUluXozRIOCabMTbYUG1HlN7rJ9_XFrFfQXDoEPhXhZlM_RlpfYX3FeYc27PG9o3pAi6fA1aZeGvj137zZj6cch1GEyTdR/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://www.facebook.com/konozblog&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></div></div>

شرح الكود :-

1. استبدل "http://www.facebook.com/konozblog" برابط صفحة مدونتك على الفيسبوك .
2. لتغيير الصورة استبدال رابط الأزرق رابط الصورة التي تريدها . 

أتمنى أن تروقكم الإضافه | ^_^ | والسلام عليكم ورحمه الله وبركاتة’’

بقلم العماد

عماد البدري : غالباً ما يفشل معظم الناس في الحديث عند التعريف بأنفسهم، ويعجبني في هذا المقام أن أنضم لمعظم الناس، فقد حاولت استفزاز نرجسيتي أكثر من مرة لمعرفة من أنا، أو على الأقل لأفتح المجال أمام (الأنا) لتعبّر عن ذاتها , صدقاً لم أجد الكثير لأخطه عن نفسي، إلا بعض عادات أداوم بين الفينة والأخرى على فعلها، وشخصيات أحب تبني أفكارها وآرائها، وأعتقد أن الإنسان يعرف بأقرانه، ومن خلال اهتماماته يمكنك سبر أغواره، ربما هي طريقة جميلة أن تعرفني من خلال ما أحب وما أكره، يمكنكم متابعتي والتواصل معي على صفحتي بتويتر @ ALEMAD5 أو عبر الفيسبوك AL EMAD