جرب..ولن تندم

السبت، 14 سبتمبر 2013

إضافة مربع الإعجاب فايسبوك الجانبي

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

1- طريقة إضافة المربع تبدأ بتغيير كود قالب المدونة. سنفتح أداة تغيير الكود وبالضغط على Ctrl+F سنبحث عن </head> . وتحتها مباشرة سنلصق هذا الكود بعد نسخه:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

ثم نعود لواجهة التخطيط لنختار إضافة أداة جديدة والتي ستكون HTML/JavaScript حيث سنلصق الكود التالي بعد نسخه:
مع تغيير إسم صفحة الفايسبوك باللون الأحمر
<style type='text/css'>
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUpgbZAWsQeTUc849xWFkPHrFFMeqxUCAtSyS9_DhweocNWg0p66ESMjWWSWLbH2PePZg6TtvpFOofQZIa4ZbFfPf4HOHdaxU9lfqZ63esp5LJ9yp6Ef1MlqtLoc2ROpiwNnP8yaHsZwQD/s1600/w2b_vertical-right.png');background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type='text/javascript'>
/*<![CDATA[*/
(function(w2b){
w2b(document).ready(function(){
var $dur = 'medium'; // Duration of Animation
w2b('#fbplikebox').css({right: -250, 'top' : 350 })
w2b('#fbplikebox').hover(function () {
w2b(this).stop().animate({
right: 0
}, $dur);
}, function () {
w2b(this).stop().animate({
right: -250
}, $dur);
});
w2b('#fbplikebox').show();
});
})(jQuery);
/*]]>*/
</script>
<div id='fbplikebox' style='display:none;'>
<div class='fbplbadge'></div>
<iframe src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fmistermo3alem&amp;width=250&amp;height=260&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:250px; height:260px;background:#FFFFFF;' allowtransparency='true'></iframe>
</div>

سنقوم بحفظ الأداة الجديدة، ونفتح المدونة لنرى التغيير الجديد.

مربع الإعجاب المتحرك  والذي يظهر كلما يقوم الزائر بفتح صفحة على المدونة.

0 on: "إضافة مربع الإعجاب فايسبوك الجانبي"