كيفية إضافة أداة أحدث أو آخر المواضيع متحركة ومنزلقة بشكل جديد وجذاب مع مصغرات الصور على مدونات البلوجر

 

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

الخطوة الأولى : إضافة مكتبة jQuery

1- قم بتسجيل الدخول إلى لوحة تحكم مدونتك و اضغط على قالب من القائمة الجانبية.

2- ثم أنقر على "تحرير Html".

* لا تنسى أخذ نسخة إحتياطية لقالب مدونتك، لاسترجاعها عند حدوث أي خطأ ( تعلم كيف تقوم بأخد نسخة إحتياطية لقالب مدونتك و استرجاعها عند الضرورة ).

3- بعد ذلك اضغط على Ctrl + F للبحث عن السطر أسفله :

</head>

4- ثم انسخ السطر التالي مباشرة فوقه:

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

5- و قم بحفظ القالب.

الخطوة التانية : تركيب أداة أحدث أو آخر المواضيع متحركة  

1- قم بالدخول على تصميم القالب ثم اضغط على إضافة أداة واختر HTML/JavaScript.
2- ثم قم بنسخ الكود التالي ولصقه بالمكان المخصص بكود HTML/JavaScript

<!-- Start Recent Post with Spy effect for blogger.com by Afkarpro --> 
<style type="text/css" media="screen">
<!--
/*
 * Recent Post with Spy effect for blogger.com
 * Widget Bloggerized By - Rachid El Mokhtari
 * URL -  http://www.afkarpro.blogspot.com
 * === Scrolling Recent Posts Widget By AfkarPro == */

#afkarpro-widget {
    overflow: hidden; margin-top: 5px; padding: 0px 0px; height: 285px;
}
#afkarpro-widget ul {
    width: 310px; overflow: hidden; list-style-type: none; padding: 0px 0px; margin: 0px 0px;
}
#afkarpro-widget li {
    float: none; height: 80px; list-style-type: none; margin: 0 0 5px; overflow: hidden; width: 288px; border-bottom: 2px dotted #DDDDDD; border-radius: 10px 10px 10px 10px; border-right: 2px solid #DDDDDD; padding: 5px;
}
#afkarpro-widget li:hover {
    border-bottom: 2px dotted #E3671F; border-right: 2px solid #E3671F;
}
#afkarpro-widget li a {
    text-decoration: none; color: #4B545B; font-size: 15px; height: 18px; overflow: hidden; margin: 0px 0px; padding: 0px 0px 2px 0px;
}
#afkarpro-widget li a:hover {
    color: #e3671f;
}
#afkarpro-widget img {
    float: right; margin-top: 10px; margin-right: 0px; background: #EFEFEF; border: 0; margin-left: 10px;
}
#afkarpro-widget img {
    -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 1px; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));  background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#afkarpro-widget img:hover {
    -moz-transform: scale(1.1) rotate(-350deg); -webkit-transform: scale(1.1) rotate(-350deg); -o-transform: scale(1.1) rotate(-350deg); -ms-transform: scale(1.1) rotate(-350deg); transform: scale(1.1) rotate(-350deg); -webkit-box-shadow: 0 0 10px #e3671f, inset 0 0 5px rgba(255,255,255,1); -moz-box-shadow: 0 0 10px #e3671f, inset 0 0 5px rgba(255,255,255,1); box-shadow: 0 0 10px #e3671f, 0 0 5px #FFFFFF inset;
}
.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;
}
#mashable a:hover{
    color: #e3671f;
}

/* ========== Scrolling Recent Posts Widget By AfkarPro ======== */
-->
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjebASTKQmHHxFsUxK4YRNF7yA9ajWLDAz-m-zlgnRt2BUsvbOecDOu6i4pQBnMU8JUlBf0OpTfAewyMKyu7T2LhzHewTZiJ6kTx43ullFiqJvvnrLpeG78XPCBnQxm8YkpZAej8hoNBGSS/s1600/No-Thumbnail+-+afkarpro.blogspot.com.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjebASTKQmHHxFsUxK4YRNF7yA9ajWLDAz-m-zlgnRt2BUsvbOecDOu6i4pQBnMU8JUlBf0OpTfAewyMKyu7T2LhzHewTZiJ6kTx43ullFiqJvvnrLpeG78XPCBnQxm8YkpZAej8hoNBGSS/s1600/No-Thumbnail+-+afkarpro.blogspot.com.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjebASTKQmHHxFsUxK4YRNF7yA9ajWLDAz-m-zlgnRt2BUsvbOecDOu6i4pQBnMU8JUlBf0OpTfAewyMKyu7T2LhzHewTZiJ6kTx43ullFiqJvvnrLpeG78XPCBnQxm8YkpZAej8hoNBGSS/s1600/No-Thumbnail+-+afkarpro.blogspot.com.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjebASTKQmHHxFsUxK4YRNF7yA9ajWLDAz-m-zlgnRt2BUsvbOecDOu6i4pQBnMU8JUlBf0OpTfAewyMKyu7T2LhzHewTZiJ6kTx43ullFiqJvvnrLpeG78XPCBnQxm8YkpZAej8hoNBGSS/s1600/No-Thumbnail+-+afkarpro.blogspot.com.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjebASTKQmHHxFsUxK4YRNF7yA9ajWLDAz-m-zlgnRt2BUsvbOecDOu6i4pQBnMU8JUlBf0OpTfAewyMKyu7T2LhzHewTZiJ6kTx43ullFiqJvvnrLpeG78XPCBnQxm8YkpZAej8hoNBGSS/s1600/No-Thumbnail+-+afkarpro.blogspot.com.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "هو عدد التعليقات";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 15;
home_page = "http://www.afkarpro.blogspot.com/";
limitspy=3;
intervalspy=4000;
</script>

<div id="afkarpro-widget">
<script src='https://afkarpro-js.googlecode.com/svn/trunk/ScrollingRecentPostsWidget_SpyEffect-By-afkarpro.blogspot.com.js' type='text/javascript'></script>
</div>
<div arial="arial" helvetica="helvetica" id="mashable" sans-serif="sans-serif" style="background: #fefefe; border-image: initial; border-top: 2px dotted #e9e9e9; border-bottom: 2px dotted #e9e9e9;font-size: 10px; padding: 1px 8px 1px 3px; text-align: right; border-radius:5px; margin-bottom:0px">
<a href="http://afkarpro.blogspot.com/2013/08/Animated-Scrolling-Recent-posts-for-Blogger-with-Thumbnails.html" target="_blank"> Get it here </a>
</div>
<!-- End Recent Post with Spy effect for blogger.com tested on Afkarpro.blogspot.com -->  

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

+ قم بتغيير مايلي :  برابط موقعك أو مدونتك.

+ var numposts = 15 : من هنا يمكنكم التحكم بعدد المواضيع بالتغيير من قيمتها.  
+ limitspy: 3 : من هنا يمكنك تعديل عدد المواضيع المعروضة بالتغيير من قيمتها.
+ showPostDate = true : من هنا يمكنك إظهار أو إخفاء تواريخ المواضيع و ذلك بتغيير القيمة true بـ false.
+ للتحكم فى سرعة حركة المواضيع بما يناسبك قم بالتغيير في القيمة التالية : intervalspy=4000

+ لإخفاء تواريخ المواضيع و عدد التعليقات قم باستبدال هذا السكريبت : https://afkarproرابط موقعكjs.googlecode.com/svn/trunk/ScrollingRecentPostsWidget_SpyEffect-By-s  بــالسكريبت التالي : https://afkarpro-js.googlecode.com/svn/trunk/ScrollingRecentPostsWidget-By-رابط موقعك

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

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

و دمتم في رعاية الله وحفضه