11‏/01‏/2013

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


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

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

وإليكم مثال مباشر للإضافة من أجل أن تتوضح الفكرة أكثر : مثال مباشر

الآن نذهب إلى طريقة التركيب

أولا نذهب إلى لوحة التحكم في المدونة ثم القالب بعد ذلك تأخد نسخة إحتياطية للقالب تم تضغط على تحرير html  ثم متابعة.
 الآن أمامك القالب ، سوف تبحث عن الكود التالي <head> ثم اضف الكود التالي اسفله :

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

 وبعد ذلك إحفظ القالب وتوجه إلى التخطيط ثم إضافة أداة ثم html /javascript وبعد ذلك انسخ الكود التالي في الأداة:


<script type="text/javascript">
 /*<![CDATA[*/
 jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
 /*]]>*/
 </script>
 <style type="text/css">
 .abtlikebox{background: url("http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png") 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%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .abtlikebox span a{color: gray;text-decoration:none;}
 .abtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="abtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FYOURPAGENAME&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://www.ency-bl.blogspot.com"> موسوعة بلوجر</a></span>
     </div>
 </div>

 مع تغيير YOURPAGENAMEبإسم صفحتك على الفيسبوك

 إلى هنا نصل إلى نهاية الشرح ولمن واجه مشاكل مع هذه الإضافة يترك تعليق .
 


هل حقا إستمتعت بهذه التدوينة ؟

إذن أدخل بريدك الإلكتروني لتتوصل بجديد المواضيع

0 comments:

إرسال تعليق