اليوم جئت لكم بإضافة مميزة جدا وهي عبارة عن صندوق معجبي صفحة المدونة على الفيسبوك لكن ما يميز هذا الصندوق هو أنه منسدل يعني أنه يكون مخفي لكن عند مرور الفأرة عليه يخرج بطريقة جميلة مما يزيد شكل المدونة جمالية.
وإليكم مثال مباشر للإضافة من أجل أن تتوضح الفكرة أكثر : مثال مباشر
الآن نذهب إلى طريقة التركيب
وإليكم مثال مباشر للإضافة من أجل أن تتوضح الفكرة أكثر : مثال مباشر
الآن نذهب إلى طريقة التركيب
أولا نذهب إلى لوحة التحكم في المدونة ثم القالب بعد ذلك تأخد نسخة إحتياطية للقالب تم تضغط على تحرير 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgoIoM5FxJJO51lTMk08eKn6gQLk6sCHXnqvAEKWi7rlHAoZ6SFzqjia08uHRRhSf538xgrvZrzlpv6ag2Y_y6F9CJX9P5tnkQJu6sjohRPACBAw4EmiU7xyKT0oWBys88je7cqd2CX8o/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&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&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بإسم صفحتك على الفيسبوك
إلى هنا نصل إلى نهاية الشرح ولمن واجه مشاكل مع هذه الإضافة يترك تعليق .
بقلم رشيد إدعلي
مؤسس مدونة موسوعة بلوجر ،شاب مغربي طموح محب للتدوين و التقنية بشكل عام يسعى إلى الإرتقاء بالمحتوى العربي، طرق التواصل معي إما من خلال موقع التواصل الإجتماعي فيسبوك أو من خلال البريد الإلكتروني : rachidox2@gmail.com
هل حقا إستمتعت بهذه التدوينة ؟
إذن أدخل بريدك الإلكتروني لتتوصل بجديد المواضيع
0 comments:
إرسال تعليق