أداة آخر المواضيع مع مصغرات الصور - متحركة

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


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

 السكريبت بتقنية
بتقنية 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,

يفضل وضع صورة فى كل موضوع لتظهر بالإضافة.

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

الأقسام: الصور