سكريبت آخر المواضيع المتحرك مع مصغرات الصور Animated Recent posts

  بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

السلام عليكم ورحمة الله وبركاته

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

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

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

معاينة الإضافة 

السكريبت بتقنية

بتقنية jQuery

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: right;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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script style='text/javascript'>
//<![CDATA[
(function($){$.fn.vTicker=function(e){var 
f={speed:700,pause:2000,showItems:3,animation:'',mousePause:true,isPaused:false};var e=$.extend(f,e);moveUp=function(a,b,c){if(c)return;var d=a.children('ul');first=d.children('li:first').clone(true);d.animate({top:'-='+b+'px'},e.speed,function(){$(this).children('li:first').remove();$(this).css('top','0px')});if(e.animation=='fade'){d.children('li:first').fadeOut(e.speed);d.children('li:last').hide().fadeIn(e.speed)}first.appendTo(d)};return this.each(function(){var a=$(this);var b=0;var c=e.isPaused;a.css({overflow:'hidden',position:'relative'}).children('ul').css({position:'absolute',margin:0,padding:0}).children('li').css({margin:0,padding:0});a.children('ul').children('li').each(function(){if($(this).height()>b){b=$(this).height()}});a.children('ul').children('li').each(function(){$(this).height(b)});a.height(b*e.showItems);var d=setInterval(function(){moveUp(a,b,c)},e.pause);if(e.mousePause){a.bind("mouseenter",function(){c=true}).bind("mouseleave",function(){c=false})}})}})(jQuery);
//]]>
</script>
<script style='text/javascript' src='http://tavristasos.googlecode.com/svn-history/r100/trunk/recentpostswiththumbnailsv3.js'></script>
<script style='text/javascript'>
var numposts = 10;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = false;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 5,
animation: 'fade',
mousePause: true,
height: 0,
direction: 'down'
});});
</script>
<div id="sai">
<script src='http://your-site.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>
<span style="color: #999999;"><a href="http://www.condaianllkhir.com/" target="_blank"><span style="font-size: xx-small;">Get it here</span></a></span>

طريقة التركيب:
 الدخول على التصميم ثم إضافة أداة 

Html,Javascript
نسخ الكود السابق ولصقه بالنافذة
ثم قم بهذه التعديلات بعد الفاصل: 


وضع رابط موقعك أو مدونتك بدلا من 

http://yoursite.blogspot.com/

ويمكن التحكم بعدد المواضيع عن طريق التغيير فى القيمة 

var numposts = 15;

وعدد المواضيع المعروضة عن طريق التغيير فى القيمة

showItems: 7,

والتحكم فى سرعة الحركة عن طريق التغيير فى القيم

speed: 500,
pause: 3000,

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


إقرأ المزيد http://www.condaianllkhir.com/2011/12/animated-last-posts.html#ixzz2e1Pvugno