إضافة صندوق إعجاب الفايسبوك في الجانب الأيمن لمدونتك بشكل إحترافي

تعلمون جميعا مدى أهمية ربط المدونات بمواقع التواصل الإجتماعي مثل الفايسبوك وتويتر وذالك في جلب المزيد من الزوار لمدونتك وفي كسب زوار دائمين ومتابعين لجديد مواضيع مدونتك

أقدم لكم اليوم موضوع جميل ومهم جدا ألا وهو

إضافة صندوق إعجاب بصفحتك على الفايسبوك في الجانب الأيمن من مدونتك كالشكل التالي :

1- إذهب إلى قالب ثم تحرير HTML

2- إضغط على CTRL + F وقم بالبحث على </head> 

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

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

3-ثم إذهب إلى التخطيط 

إضغط  إضافة أداة ثم HTML / JAVASCRIPT
و أضف الكود التالي

 
<div class="widget-content">
<!--Floating Facebook Widget START-->
<script type="text/javascript"> 
/*<![CDATA[*/ 
jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/
</script> <style type="text/css"> 
.theblogwidgets{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4drLYtjVBetOdAZ09le5Qn_dF7I-8L8trZUpcnQf45BjbAX7ssqhXCuCZzftgifhTGEOmU8H3m-sk6rKGYMr-Ee3IqnHHI4kt1yQUMJY94QlF1IPxMPkaW8NLX7Q1Yj9ExJLQlePnx9e1/") 
no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}
.theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.theblogwidgets span a{color: gray;text-decoration:none;}
.theblogwidgets span a:hover{text-decoration:underline;} }
</style><div class="theblogwidgets" style="right: -250px;">
<div>
<!-- Lixe boxe--> 
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fmontada.ibda3&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" 
scrolling="no" frameborder="0"
style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;">
</iframe><span><center>
<a style="color:#a8a8a8;font-size:8px;" href="http://wahat-alma3rifa.blogspot.com/2013/12/like-box.html">widgets blogger</a></center></span></div>
</div><!--Floating Facebook Widget END-->
</div>

4- قم بتغيير montada.ibda3 بإسم صفحتك على الفايسبوك
إذا صادفتك أي مشاكل أكتبها في التعليق

من فضلك شارك هذا الموضوع اذا اعجبك

بقلم Mester Pro

مدون مغربي مهتم بالتقنية والمعلوميات طالب جامعي شعبة الرياضيات التطبيقية أنشأت هذه المدونة لمساعد الشباب في الوصول للمعرفة والعلم

تعليقاتكم تشجعنا على الإستمرار