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


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

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

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



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


<!-- 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(http://3.bp.blogspot.com/-V6QSID3VFDk/VGyVDKJ4wSI/AAAAAAAAAyQ/vrxYMe-1qP0/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>
بالنسبة للكود الاخير قم يتغيير ماهو ملون برابط صفحتك على الفيسبوك .
هل أعجبك الموضوع ؟
خدمة تصميم بنرات

هناك 3 تعليقات:

  1. مشكوووور اخي واريد رآيك في مدونتي
    معلومة ويب: http://info-wb.blogspot.com/

    ردحذف
    الردود
    1. شكراا اخي على مرورك الكريم، بانسبة لمدونتك فهي جيدة والقالب انيق ومتناسق اتمنى لك التوفيق والاستمرار

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

    ردحذف

جميع الحقوق محفوضة لمدونة تدوين باحتراف 2014/2013