كيفية إضافة آخر المواضيع على البلوجر مع مصغرات الصور بشكل متحرك – بتقنية jQuery

مرحبا بكم زوارنا على مدونة ايـــجي Moon

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

لأنه يتيح لعرض عدد من آخر المواضيع التى تحددها بطريقة متحركة وجميلة

 
يمكن ملاحظة مثال لهذه الإضافة  بمدونة ايـــجي Moon

لنشرع الان في تركيب هذه الإضافة على مدونة البلوجر

*1- قم بالدخول على تصميم القالب ثم اضغط على إضافة أداة واختر HTML/JavaScript

*2- ثم قم بنسخ الكود التالي ولصقه بالمكان المخصص بكود HTML/JavaScript

<script type='text/javascript'>
jQuery.noConflict();
</script>
<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script style='text/javascript' src="http://glitter-text.googlecode.com/files/recentpostticker.js" ></script>
<script style='text/javascript' src='http://glitter-text.googlecode.com/files/recentpostswiththumbnailsv3.js'></script>
<script style='text/javascript'>
var numposts = 15;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
jQuery(document).ready(function($) {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 7,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'down'
});});
</script>
<div id="sai">
<script src='http://EgMoon.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>
<a href="http://egmoon.blogspot.com/2013/05/jquery.html"> Get it here </a> 

*3- قبل حفظ الإضافة سنقوم ببعض التعديلات على الكود

+ قم بتغيير مايلي : http://EgMoon.blogspot.com برابط موقعك أو مدونتك.
+ var numposts = 15 : من هنا يمكنكم التحكم بعدد المواضيع بالتغيير من قيمتها.

+ showItems: 7 : من هنا يمكنك تعديل عدد المواضيع المعروضة بالتغيير من قيمتها.
+ للتحكم فى سرعة حركة المواضيع بما يناسبك قم بالتغيير في القيم التالية : speed: 500,pause: 3000.

ملاحظة :

- يستحسن وضع صورة على الأقل في كل موضوع للحصول على مظهرجيد للإضافة.

- تتميزهذه الإضافة بعدم تعارضها مع أي إضافات أخرى على مدونتك.

*! إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...