الثلاثاء، 25 ديسمبر، 2012

كيفية إضافة آخر المواضيع على البلوجر مع مصغرات الصور بشكل متحرك – بتقنية jQuery



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

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

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

2- 
ثم قم بنسخ الكود التالي ولصقه بالمكان المخصص بكود HTML/JavaScript
<script type='text/javascript'>
jQuery.noConflict();
</script>

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;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  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


<script style='text/javascript' src="http://glitter-text.googlecode.com/files/recentpostticker.js" ></script>
<script style='text/javascript' src='http://glitter-text.googlecode.com/files/recentpostswiththumbnailsv3.js'></script>
<script style='text/javascript'>
var numposts = 15;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
jQuery(document).ready(function($) {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 7,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'down'
});});
</script>
<div id="sai">
<script src='http://afkarpro.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>
<a href="http://afkarpro.blogspot.com/2012/12/animated-last-posts-jQuery-on-Blogger.html"> Get it here </a>
 
3- قبل حفظ الإضافة سنقوم ببعض التعديلات على الكود

+ قم بتغيير مايلي : http://afkarpro.blogspot.com برابط موقعك أو مدونتك.
+ var numposts = 15 : من هنا يمكنكم التحكم بعدد المواضيع بالتغيير من قيمتها. 
+ showItems: 7 : من هنا يمكنك تعديل عدد المواضيع المعروضة بالتغيير من قيمتها.


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

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

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




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

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

  1. السلام عيكم ممكن عندي طلب وهو أني أريد كل موضوع تكون له صورته الخاصة أرجوك الطريقة للتواصل http://www.facebook.com/seid.sohaib

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

    ردحذف
  3. سلام عليكم، انا عندي مدونة تحتوي على سلايدشو، عندما اضع هذا الكود في المدونة، يتوقف سلايدشو، ارجو تزويدنا بتوضيحات واشكركم

    ردحذف
    الردود
    1. أي نوع من السلايدشو تستخدم ؟؟ أو فقط أرسل لي رابط مدونتك -

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

      حذف
    2. تطبيق ممتاز لكن أنا أيضا وقعت في نفس المشكل السلايدر لا يعمل مع التطبيق هل من حل لهذه المشكلة من فضلك
      http://watch-first.blogspot.com

      حذف
    3. أطمئنك أخي إضافة أداة آخر المواضيع على البلوجر لا تؤتر بتاتا على السلايدشو وهذا مثال حي من مدونةأحد الزوار (اضغط هــا)

      أما بخصوص مشكل توقف السلايدشو فقد يرجع إلى :
      - تغيير قالب البلوجر.
      - أو أنك قمت بمسح جزء من الكود الخاص بها عن طريق الخطأ.
      - أو أنه تم حذف مكتبة jQuery الخاصة بها..

      * أنصحك أن تعيد تركيب إضافة السلايدشو مع قليل من التركيز ..
      (و ستشتغل إن شاء الله)

      إن لم تتوصل إلى حل المشكل فقط اتصل بي على afkarpro.contact@gmail.com

      حذف
  4. يا اخى ما تعمل عندى ما يظهر لى صور يظهر غير كلمة Get it here

    و تاتى الى مدونتك !!!!!!!!!!!

    ربط مدونتى
    http://eslam-arabs.blogspot.com/

    ردحذف
    الردود
    1. أولا أخي عذرا على تأخير الرد ...

      المشكل في هذا الكود راجع إلى مشكل في ملف السكريبت الخارجي (ربما الشخص الذي قام برفع قد قام بحذفه أو غير به)

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

      حذف
  5. عذرا يا سيد الكود لم يشتغل بلبلوق
    قبل كم يوم اشتغل والان توقف ماهو السبب

    ردحذف
    الردود
    1. أولا أختي عذرا على تأخير الرد ...

      المشكل في هذا الكود راجع إلى مشكل في ملف السكريبت الخارجي (ربما الشخص الذي قام برفع قد قام بحذفه أو غير به)

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

      وإنشاء الله ستشتغل معك

      حذف