إضافة أداة "مواضيع جديدة" مع الصور على بلوجر

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










انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :


<script src="http://sites.google.com/site/mohamedabuiyad/sitmapblogger/abuiyad.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:490px;
}
#spylist ul{
width:750px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:245px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Drapeau_blanc.svg/800px-Drapeau_blanc.svg.png) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#004ED4;
font-size:17px;
height:60px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:right;
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://sites.google.com/site/lightbox007/photo/noimageblogger.jpg";

imgr[1] = "https://sites.google.com/site/lightbox007/photo/noimageblogger.jpg";

imgr[2] = "https://sites.google.com/site/lightbox007/photo/noimageblogger.jpg";

imgr[3] = "https://sites.google.com/site/lightbox007/photo/noimageblogger.jpg";

imgr[4] = "https://sites.google.com/site/lightbox007/photo/noimageblogger.jpg";
showRandomImg = true;

boxwidth = 500;

cellspacing = 3;

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 = 20;

home_page = "http://abu-iyad.blogspot.com/";

limitspy=5
intervalspy=4000

</script>

<div id="spylist">
<script src='http://sites.google.com/site/mohamedabuiyad/sitmapblogger/recentpost-abuiyad-min.js' type='text/javascript'></script><script src='http://abuiyad.googlecode.com/svn/trunk/read-more-left.js' type='text/javascript'/><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>
</div>


والان الخطوة الأهم : يجب عليك تبديل عنوان المدونة باللون الأحمر بعنوان مدونتك .
numposts = 20; هذه القيمة تمثل عدد المواضيع التي يمكن تؤيتها .
والنتيجة النهائية تكون على هذا الشكل :

أتمنى أن تنال إعجابكم وأنتظر تشجيعاتكم






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

  1. بارك الله فيك على هذه الإضافة الرائعه كنت ابحث عنها من زماان

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

    ردحذف
  2. أختي الكريمة ،ان خلفية هذه الأداه عبارة عن صورة ، تتمثل في الرابط التالي
    http://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Drapeau_blanc.svg/800px-Drapeau_blanc.svg.png
    ولهذا يجب عليك تغير الرابط السابق برابط لصورة أخرى تتناسب مع مدونتك،لا عليك فلقد إختصرت عليك المسافة و إخترت لك خلفية تتناسب مع مدونتك ولذلك ابحثي عن الرابط الاول في الكود,قومي بتبديل بهذا
    http://i25.tinypic.com/5a3zpi.png
    ثم توجهي للمعاينة

    ردحذف
  3. الف شكر لك على الرابط وفرت علي مجهود
    بارك الله فيك ونفع بك

    ردحذف
  4. السلام عليكم ورحمة الله وبركاتة
    انا سويت مثل شرحك ولكن للأسف لم يظهر شئ
    أرجو الإفادة

    ردحذف
  5. اخي الفاضل اعتذر لعدم عمل الاضافة ، وذلك راجع لخطأ في تنسيق الاكواد للمدونة ، والحمد لله تم تصحيح العطب ، حاول مرة اخرى في اضافة الاداة و سوف تعمل 100% ان شاء الله ، واعتذر لكل من لم تعمل لديه اي كود من المدونة لسبب المذكور

    ردحذف
  6. السلام عليكم انا لم يظهر لي صور مع المواضيع

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

    ردحذف
  8. السلام عليكم ورحمة الله وبركاته
    لوسمحت ممكن خلفية سوده والزاى اغير الحجم المعروض
    أرجو الافاده .....شكرا

    ردحذف
  9. @underedge
    السلام عليكم ،أخي الكريم ، كما ذكرت سابقا ، أن خلفية الأداة عبارة عن صورة ما عليك سوى تبديل هذا الرابط

    http://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Drapeau_blanc.svg/800px-Drapeau_blanc.svg.png
    بهذا الرابط

    http://tnkhanouff.hautetfort.com/images/Noir.jpg

    ولتعديل عرض الأداة قم بتغيير القيمةwidth حسب عرض الدي تريد
    #spylist li {
    width:245px;

    ردحذف
  10. الحمد لله تم تعديل اللون والحجم .......شكرا لك ابو اياد
    موفق ان شاء الله

    ردحذف
  11. مبروك عليك أخي الكريم وشكرا لك للمتابعة

    ردحذف
  12. عملتها وضيفتها يا ابو اياد وطلعت روووعه

    متشكره على مواضيعك الرائعه

    ردحذف
  13. شكرا يا ابو اياد

    كنت مركبه كود تاني بس الكود بتاعك احلى بكتير

    تم التركيب

    وكله تمام

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

    ردحذف
  15. عملتها بس الخلفية البيضاء مش مناسبة للمدونة وكمان الصور بتطلع برة
    http://fe7ayatna.blogspot.com/

    ردحذف
  16. @sara fahmy

    السلام عليكم ، كما ذكرت سابقا ، أن خلفية الأداة عبارة عن صورة ما عليك سوى تبديل هذا الرابط

    http://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Drapeau_blanc.svg/800px-Drapeau_blanc.svg.png
    برابط آخر يناسب خلفية مدونتك ،وممكن أن تستبدليه بهذا الرابط وهو نفس لون الخلفية لديك

    http://i51.tinypic.com/yjx45.jpg
    ولتعديل عرض الأداة قم بتغيير القيمةwidth حسب عرض الدي تريد
    #spylist li {
    width:245px;

    ردحذف
  17. مرحبا اخوي، مشكور على الكود، جربته لكن للاسف يطلع عندي البوكس فارغ..
    غيرت بالاعدادات مثل ما قلت وخليته فول .. لكن بعده نفس المشكلة..
    هل هناك سبب اخر يخليه يظهر فارغ؟؟

    ردحذف
  18. من زمااااااان وانا بادور عليها

    تسلم كتييييييييييير على هالاضافة

    مشكووووووور جدا

    ردحذف
  19. بارك الله في علمك اخي ..وزادك الله من فضله

    ردحذف
  20. شكرا ياأخى يأبوا أياد أفضل كود للموضوعات لقيت

    ردحذف
  21. شكرا على الافادة هده مدونتي يمكنكم المعاينة
    www.foxdz.blogspot.com

    ردحذف
  22. جازاك الله عنا كل خير ^^
    http://adamhaneen.blogspot.com/

    ردحذف
  23. شكرا لك على الاضافة الرائعة وماقصرت

    ردحذف
  24. بارك الله فيك أخي أبو إياد
    لكن لدي مشكلة بسيطة هي عندما أركب الكود يعمل بشكل جيد لكن السلايدر المركب في الموقع يتوقف عن التحرك هذا رابط المدونة
    www.tarbiapress.com
    هل من حل أخي ، و لك مني جزيل الشكر

    ردحذف
  25. كيف اجعل هذه الاضافة في عرض الصفحة بدلا من طولها ؟

    ردحذف
  26. @تربية بريس
    حقيقة لا أعلم سبب المشكلة أخي الكريم
    ،تقبل تحياتي

    @Inaam
    ماالقصد بعرض الصفحة ،المرجو التوضيح

    ردحذف
  27. السلام عليكم انا عندى الكلام داخل فى الصور ممكن رد بسرعه

    ردحذف
  28. جزاك الله خيرا ((;

    ردحذف
  29. تسلم ابو اياد وضعت الكود اخى ما يظهر الا لوحة سوداء وبالاخير التعديل فقط علية قمت بحذفة لمراجعتك تقبل تحيتي اخى الكريم
    ساندرا

    ردحذف
  30. جزاك الله خيرا ((;
    www.google--plus.blogspot.com

    ردحذف
  31. رائع بالله

    بارك الله بيك

    ردحذف
  32. السلام عليكم استاذ ابو اياد .. الاداة جميلة بس فيه مشكله لما بضيفها بتبوظلى السلايد شو معندكش حل للمشكله ديه .

    ردحذف
  33. اناجربت الاداه فى مدونتى وظهرت لكن المواضيع والصور ثابته لا تتحرك جربتها فى مدونة اخرى كانت ناجحه والمواضيع والصور تتحرك فما السبب اخى الكريم
    http://dakoufy.blogspot.com/

    ردحذف
  34. اتمني اعرف اميل حضرتك ياريت بجد محتاجه مساعدتك

    ردحذف
  35. جزاك الله خير تم بإضافتها بنجاح

    ردحذف
  36. أزال المؤلف هذا التعليق.

    ردحذف
  37. أزال المؤلف هذا التعليق.

    ردحذف
  38. انا ضقت المدونة عندى اتمنى تضيف مدونتى عندك وتساعدنى اشهر مدنتى
    دة الفيس الخاص بلمدونة
    http://www.facebook.com/groups/198705506838722/#!/pages/%D9%85%D8%AF%D9%88%D9%86%D8%A9-%D8%A7%D9%8A%D8%AC%D9%89-%D9%85%D9%8A%D9%88%D8%B2%D9%83/345816588778527

    ودى المدونة http://mohndegymuzic.blogspot.com/

    ردحذف
  39. السلام عليكم
    المربع فارغ ما المشكلة
    شكرا لكم

    ردحذف
  40. السلآم عليكـم

    شكرآ لك أخي على الموضوع المفيد

    و لكنهآ لا تظهر في مدونتي

    أرجو منك مساعدتي

    ردحذف
  41. شكرا لك على المجهود

    ردحذف
  42. بارك الله فيك اخى ابو ايد تمت الاضافه بمدونتى http://eldrivers-ngomk.blogspot.com

    ردحذف
  43. ابو اياد حرام عليك تضع روبط الى موقعك ،لانراها نحن يراها الزاحف.

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

    ردحذف
  45. أولاً جزاك الله خيراً علي هذا المجهود
    ثانياً ازاي احط الصور و كيف تتغير من تلقاء نفسها
    ثالثاً هل كلما وضعت موضوع جديد سيظهر بها تلقائياً ؟ ام لا ؟

    ردحذف


  46. جزاك الله خرا مو ضوع اكتر من رائع تفضلو بزيارة موقع وشكرا

    اسم المدونة : مدونة بلوجر توب
    مدونة بلوجر توب

    ردحذف
  47. أخي أبو أياد
    كيف أزيل التاريخ وكلمة comments من الإضافة
    مع التقدير

    ردحذف
  48. الله يرحم والديك ,,, إضافة روعة ... أعذرني لأني مسحس عنصر الإعلان منها :p

    ردحذف
  49. شكرا لك أخي على الإضافة

    ردحذف
  50. http://morsiegyrabaa.blogspot.com/

    ردحذف
  51. عمي أبو إياد قل لي ماذا يخص هذه المدونة :
    gulfson4.blogspot.com

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

    ردحذف
  53. انا مش عارف اوصل HTML/Javascript
    في المدونة عندي

    ردحذف
    الردود
    1. من التخطيط اختر إضافة أداة ستجد ضمن الأدوات أداة تسمى HTML Java script

      حذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية