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

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

اخواني اخواتي زوار واعضاء مدونة تدوين باحتراف ان شاء الله في هذا الموضوع سوف اشرح لكم بالفيديو كيف تضيف صندوق اعجاب الفيسبوك عائم في مدونة بلوجر، في البداية يجب ان نفهم الفكرة اولا، الفكرة بسيطة وهي ان نجعل الصندوق مخفي في الجانب الايمن للمدونة بحيث بمجرد ان يمرر الزائر الماوس على ايقونة ستكون ظاهرة سينزلق الصندوق لبظهر له بحيث يمكنه الاعجاب بصفحتك.

الفكرة سهلة جدا بمكنك مشاهدة المعاينة من هنا : معاينة

الشرح بالفيديو :

الأكواد المستعملة في الشرح :

<!-- Facebook wedget -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function (){
jQuery(&quot;.slide_likebox&quot;).hover(function(){
jQuery(&quot;.slide_likebox&quot;).stop(true, false).animate({right:&quot;0&quot;},&quot;medium&quot;);
},function(){
jQuery(&quot;.slide_likebox&quot;).stop(true, false).animate({right:&quot;-250&quot;},&quot;medium&quot;);
},500);
return false;
});
</script>
<!-- / Facebook wedget -->

/*--------------------
facebook wedget
--------------------*/
.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3podSfERlp7yOGhYPLPMcOk4Sikf70qhrhtEtFlDePty6lRkBzT-mg3zqXz_3ygexJJNHRX5rbxsvf8N0Fh_qeQ1rfK5S19CixnEdfDEfV3c6Q2lZo16JN4eu2M069slxJsyvjGU7fVk/s1600/fb_bg.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}
/*--------------------
facebook wedget
--------------------*/

<div class="slide_likebox">
<div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/tadwintop&amp;width=238&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe>
</div>
</span>
</div><a style='color: #666666;font: normal 10px tahoma,arial;text-decoration: none;' target="_blank" href='http://tadwinpro.blogspot.com/' rel='dofollow'>تدوين باحتراف</a>
</div>

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