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

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

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

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

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

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

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

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

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

بتقنية jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>



<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqeqK1CQtEexqEg2Kv48KaeWYLD5Z8UyYLEvExs7ZWPE4mZCdCwDT2wa5lwmiOMExU7SVazbtL8nrecFpy-SWhk_OW5He1x-t3s4ZJxEPKsa5D23VJUTn0kPubD3Ia03i4Ez6JQ6qMr3f-/s1600/condaianllkhir.com.jpeg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->

</style>
 <script language='JavaScript'>

imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLu2Gj4vIKFEit17Qgx5mri9Jc7MKOHdCpqBorsZDKs19ZIYtgQ7ls0N1v4SN8-gkAI8S_MoBk84-PFv2K7qrNGme1O6suQtvAfLAFOV1jvbBeX9P3J0TKEf1dLMDT2LyBVxN7CTbiBlEy/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLu2Gj4vIKFEit17Qgx5mri9Jc7MKOHdCpqBorsZDKs19ZIYtgQ7ls0N1v4SN8-gkAI8S_MoBk84-PFv2K7qrNGme1O6suQtvAfLAFOV1jvbBeX9P3J0TKEf1dLMDT2LyBVxN7CTbiBlEy/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLu2Gj4vIKFEit17Qgx5mri9Jc7MKOHdCpqBorsZDKs19ZIYtgQ7ls0N1v4SN8-gkAI8S_MoBk84-PFv2K7qrNGme1O6suQtvAfLAFOV1jvbBeX9P3J0TKEf1dLMDT2LyBVxN7CTbiBlEy/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLu2Gj4vIKFEit17Qgx5mri9Jc7MKOHdCpqBorsZDKs19ZIYtgQ7ls0N1v4SN8-gkAI8S_MoBk84-PFv2K7qrNGme1O6suQtvAfLAFOV1jvbBeX9P3J0TKEf1dLMDT2LyBVxN7CTbiBlEy/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLu2Gj4vIKFEit17Qgx5mri9Jc7MKOHdCpqBorsZDKs19ZIYtgQ7ls0N1v4SN8-gkAI8S_MoBk84-PFv2K7qrNGme1O6suQtvAfLAFOV1jvbBeX9P3J0TKEf1dLMDT2LyBVxN7CTbiBlEy/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;



home_page = "http://www.condaianllkhir.com/";



limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://cdn.rawgit.com/DrRO/condaianllkhir/master/Recent.js' type='text/javascript'></script>

</div>

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

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


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

http://www.condaianllkhir.com/

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

numposts = 10;

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

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

بقلم Dr.Rasha Omran

مطورة تطبيقات الهاتف ، سفيرة ببرنامج Women Techmakers التابع لجوجل ، أهتم بالمحتوى الرقمى وأحببت أن أدون كل ما تعلمته فى هذا الموقع للإفادة فى أعمال هادفة