السبت، 24 أغسطس 2013

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



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


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

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

الخطوة الأولى : إضافة مكتبة 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/AVvXsEg7OEoFRpr47W8mZb6pSWfY7nnTv2XrL-43NT8jxjJtlXOh8GhNwuh4AKO04YzsFT6V2h1EitA20KyALgxn1jLdUwe4ySVrk3dlx06ZBRyTSfIiFnW5j8vD2N9M0ouZMLJHN-zcoVh68Abd/s1600/No-Thumbnail+-+afkarpro.blogspot.com.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7OEoFRpr47W8mZb6pSWfY7nnTv2XrL-43NT8jxjJtlXOh8GhNwuh4AKO04YzsFT6V2h1EitA20KyALgxn1jLdUwe4ySVrk3dlx06ZBRyTSfIiFnW5j8vD2N9M0ouZMLJHN-zcoVh68Abd/s1600/No-Thumbnail+-+afkarpro.blogspot.com.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7OEoFRpr47W8mZb6pSWfY7nnTv2XrL-43NT8jxjJtlXOh8GhNwuh4AKO04YzsFT6V2h1EitA20KyALgxn1jLdUwe4ySVrk3dlx06ZBRyTSfIiFnW5j8vD2N9M0ouZMLJHN-zcoVh68Abd/s1600/No-Thumbnail+-+afkarpro.blogspot.com.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7OEoFRpr47W8mZb6pSWfY7nnTv2XrL-43NT8jxjJtlXOh8GhNwuh4AKO04YzsFT6V2h1EitA20KyALgxn1jLdUwe4ySVrk3dlx06ZBRyTSfIiFnW5j8vD2N9M0ouZMLJHN-zcoVh68Abd/s1600/No-Thumbnail+-+afkarpro.blogspot.com.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7OEoFRpr47W8mZb6pSWfY7nnTv2XrL-43NT8jxjJtlXOh8GhNwuh4AKO04YzsFT6V2h1EitA20KyALgxn1jLdUwe4ySVrk3dlx06ZBRyTSfIiFnW5j8vD2N9M0ouZMLJHN-zcoVh68Abd/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- قبل حفظ الإضافة قم ببعض التعديلات على الكود حسب رغبتك :

+ قم بتغيير مايلي : http://www.afkarpro.blogspot.com برابط موقعك أو مدونتك.
+ var numposts = 15 : من هنا يمكنكم التحكم بعدد المواضيع بالتغيير من قيمتها.  
+ limitspy: 3 : من هنا يمكنك تعديل عدد المواضيع المعروضة بالتغيير من قيمتها.
+ showPostDate = true : من هنا يمكنك إظهار أو إخفاء تواريخ المواضيع و ذلك بتغيير القيمة true بـ false.
+ للتحكم فى سرعة حركة المواضيع بما يناسبك قم بالتغيير في القيمة التالية : intervalspy=4000
+ لإخفاء تواريخ المواضيع و عدد التعليقات قم باستبدال هذا السكريبت : https://afkarpro-js.googlecode.com/svn/trunk/ScrollingRecentPostsWidget_SpyEffect-By-afkarpro.blogspot.com.js  بــالسكريبت التالي : https://afkarpro-js.googlecode.com/svn/trunk/ScrollingRecentPostsWidget-By-afkarpro.blogspot.com.js

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


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




ـ
روابط هذه التدوينة قابلة للنسخ واللصق
URL
HTML
BBCode

هناك 18 تعليقًا :

  1. مدونتك في قمة الروعه ومواضيعك اروع بس يريت تظيف بمدونتك الذي يقوم بتظليل الاكود عشان ننسخ الكود بكل سهوله ويسر

    ردحذف
    الردود
    1. العفو أخي، شكراا لك على زيارة هذه المدونة المتواضعة :) ...

      لقد تم إظافة زر التظليل ابتداءًا من هذا الموضوع، يتبقى لك فقط الضغط على Ctrl + C للنسخ .. ;)

      حذف
  2. السلام عليكم ورحمة الله وبركاته
    أخس كيف لي أنا أضيف اداه اقسام امدونة كما بمدونتكم الكريم مع العلم بأن عرض السايد بار عندي 200 وشكرا لك

    ردحذف
    الردود
    1. و عليكم السلام،

      أدخل على هذا الرابط :
      http://afkarpro.blogspot.com/2013/09/Divide-Blogger-Labels-or-Categories-widget-into-Two-Columns-or-more.html
      لمشاهدة كيفية تقسيم أداة "التسميات" أقسام المدونة إلى عمودين أو ثلاث أعمدة

      حذف
  3. احسنت بارك الله فيك
    http://safa1434.blogspot.com

    ردحذف
  4. اخي انا ركبت الكود
    وظهر
    لكن لا يتحرك ؟!!!!
    فما الحل
    شكرا

    ردحذف
    الردود
    1. الحل يا أخي هو أنه عليك إضافة مكتبة jquery التالية :
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

      بالضبط فوق السطر التالي : </head>

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

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

    ردحذف
  7. مشكووووووووووووووووووووور

    ردحذف
  8. شكراا على الاضافة الرائعة

    ردحذف
  9. شكرا جزيلا لك اخى العزيز
    جزاك الله خيرا

    ردحذف
  10. السلام عليكم ورحمة الله وبركاته
    أخي عندما أقوم بإستبدال عنوان الموقع بموقعي, تختفي المشاركات.. هل من حل, و شكرا

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله تعالى وبركاته
      أخي تأكد من أنك لم تحذف شيء آخر غير رابط المدونة : http://www.afkarpro.blogspot.com/
      على سبيل المثال المزدوجتين "" أو نقطة وفاصلة ; ....

      حذف
  11. ابو عبدالله لقد قمت بالاضافو وظهر شريط بالمواضيع بشكل متحرك ولكن لا توجد صوره مصغرة معروضة بجانب اسم الموضوع مع العلم ان كل موضوع به صور ما الحل وشكرا

    ردحذف
    الردود
    1. أخي إن كنت اتبعت هذا الموضوع بدون أخطاء فستحصل على نفس النتيجة التي على مدونتي !!
      فإذا أردت أن تحل المشكل بسرعة يمكنني مساعدتك فقط أرسل لي رابط قالب مدونتك (o)
      بالتوفيق

      حذف