الويب العربي - طريقة إضافة الأخبار المنزلقة ((ديناميكية)) بدون ما تضيفها أنت

الويب العربي (http://www.arabwebtalk.com/index.php)

- مجتمع ديموفنف (http://www.arabwebtalk.com/forumdisplay.php?f=73)

طريقة إضافة الأخبار المنزلقة ((ديناميكية)) بدون ما تضيفها أنت

سبق ان طرح الأخ spneeds موضوع _ وأخيرا ً شرح بالصور كيفية تفعيل الأخبار بديناميكة كالمواقع الكبرى مجانا

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

ملاحظات :
تعمل هذه الطريقة على الأخبار المثبته فقط (( يمكن ان تعمل على الأخبار المعروضة بالرئيسية ولكن بشي من التعقيد والتغيير ))
يجب أن تحدد الإستايل الذي تعمل عليه .
قم بعمل نسخة من نموذج ccontent قبل العمل لكي تستعيدها إذا لم تنجح معك الطريقة .
تم تطبيق الطريقة ونجحت معي 100% في هذا الموقع جمعية البر الخيرية بوادي بن هشبل

1-قم بتحميل المرفقات وفك الضغط عنها.
إرفع الملف
jquery-1.2.2.pack.js
والملف
featuredcontentglider.js
بداخل المسار التالي
/public_html/scripts/
أو
/www/scripts/
كلها نفس بعض الثاني هو إختصار للأول
ليصبح مسار الملفين في موقعك ما يلي
"http://www.albr-wh.org/scripts/jquery-1.2.2.pack.js"
"http://www.albr-wh.org/scripts/featuredcontentglider.js"

مع ملاحظة تغيير أسم الموقع

الأن نرفع الملف الثالث وهو هذا الملف
featuredcontentglider.css
قبل ما ترفعه نحدد اسم الإستايل إلى شغال عليه وتبي تطبق الأخبار المنزلقة عليه
أنا اسم الإستايل عندي
almgarah
إذا برفع الملف على المسار التالي
/www/styles/almgarah/
أو
/public_html/styles/almgarah/

الان رفعنا كل الملفات التي نحتاجها

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

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

3- الخطوة الثالثة :
الان نتوجة من لوحة التحكم إلى
النماذج والقوالب
نماذج العرض
قائمة الإستايلات
إضغط على تحرير للإستايل الذي تريد تطبيق الأخبار المنزلقة عليه والذي رفعنا الملف في الخطوة الاولى على مساره
ثم نختار النموذج ccontent من القائمة ونضغط عرض النموذج
(( لا تنسى عمل نسخة إحتياطية من النموذج على مفكرة عندك في جهاذك قبل التعديل ))

إفتح المرفقات ونسخ محتويات المفكرة التي تحمل الإسم الكود الاول وضعة في أول النموذج

بعد ذلك :

إبحث عن هذا الكود :

كود:

وضع قبله هذا السطر

كود:

<div id="canadaprovinces" class="glidecontentwrapper">

وضع بعده هذا السطر

كود:

<div class="glidecontent" style="position: absolute; left: 10px; top: 13px; width: 470px; height: 170px">

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

الأن إحذف الكود التالي :

كود:

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>

ضع مكانه هذا العبارة:

كود:

</div>

الخطوة الاخيرة :
بعد العبارة

كود:

وسع المكان بالضغط على إنتر كم مره لكي لا تتلخبط

ثم ضع هذا الكود :

كود:

</div>

<div id="p-select" class="glidecontenttoggler">

<a href="#" class="prev">السابق</a>

<a href="#" class="toc">1</a>

<a href="#" class="toc">2</a>

<a href="#" class="toc">3</a>

<a href="#" class="toc">4</a>

<a href="#" class="toc">5</a>

<a href="#" class="toc">6</a>

<a href="#" class="toc">7</a>

<a href="#" class="toc">8</a>

<a href="#" class="toc">9</a>

<a href="#" class="toc">10</a>

<a href="#" class="next">التالي</a> 

</div>

هذا الكود هو الخاص بعدد الأرقام التي تظهر تحت شاشة الخبر المنزلق
يظهر شكلها هكذا
السابق 1 2 3 4 5 6 7 8 9 10 التالي

تظهر الأرقام التي على عدد الأخبار المثبته لديك
لو كان عدد الأخبار المثبته اكثر من 10 لن يظهر أرقام أكثر
فقط من 1 إلى 10
للزيادة من الكود السابق قم بنسخ السطر

كود:

<a href="#" class="toc">10</a>

وإلصقة في سطر جديد بعد إلي نسخته
وعدل الرقم الذي بداخلة من 10 إلى 11
ولو تبي تزيد كرر العملية السابقة
أتمنى لكم التوفيق مع تحيات أخوكم أبو عمر
تم تجربة الموضوع على موقع

جمعية البر الخيرية باوادي بن هشبل

جزاهم الله خير وأدعوكم للتبرع لصالح الجمعية و زيارة موقعها ومشاهدة إنجازات الجمعية
ملاحظة الموقع تحت التطوير

أعتذ عن إجابة الأسئلة التي لا أعرفها فأنا عليمي وعتبي على من كان يعرف طريقة هذا الموضوع ولم يطرحها لنا وجعلني احاول إسبوع كامل

ابو عمر يجزاك ربي الجنة

تفصيل جميل وشرح مميز

نحاول تطبيق العمل

وذا هذا شغلك وانت عليمي اجل بالاحتراف كيف

شكرا لكـ

بارك الله فيك يا بو عمر

شرح وافي وكافي بيض الله وجهك

الله يجزاك الف خير اخوي

جاري العمل والتطبيق

جزاك الله خير الجزاء

تم العمل والحمدلله

انظر هـنـــا

بارك الله فيك يا أخي

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

أبو عمر ,, لك كل الشكر و التحية لمجهودك الرائع

و فعلا العتب على من كان يعلم و يخفى علمه و لن نقول أكثر من ذلك :)

و أتمنى التوفيق للجميع

كل الود :)

شكرا لمروركم والحمد لله ان ما فيه أحد حتى الأن واجهته أي مشكلة .

أبو عمر2 الرائع
بداية أشكرك بكلماتك نحوي
وأسجل اعجابي معرفتك بالطريقة المباشرة ياغالي
وجاري التجربة على الموقع
واصل عزيزي التطوير
أشكرك من الأعماق ، يعطيك العافية ولا حرمنا الأجر
احترامي
spneeds

ملاحظة /
أتمنى من ادارة الويب العربي التعديل على موضوعي

http://www.arabwebtalk.com/showthread.php?t=96732

ووضع رابط الأخ أبو عمر

http://www.arabwebtalk.com/showthread.php?p=605962

جزاك الله خير أخوي أبو عمر ,, شرح واضح

ولكن هناك نقطة اود منك توضيحها ..

عندما أقوم بتركيب الكود كامل أو الكود الأول .. يظهر مربع الأخبار المثبته في أعلى الصفحة من اليسار ..!!!!!

ولا تتحرك المواضيع كالشكل الموجود بموقعك ...!!؟؟؟

إن كنت تستطيع افادتنا اكون لك شاركا ,,

وجزاك الله خيرا اولا وأخيرا :)

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

الله يعطيك العافية على الشرح الجميل

http://www.s6am2k.net/inf/

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


كما احب ان أوضح ان عملنا كله يكون بين هذه السطرين ما عدا الكود الكود الأخير المسئول عن الأرقام وكلمة السابق والتالي .

سويت كل شيءوظبط ميه ميه ربي يوفقك ولكن واجهتني المشكله هذي لا اعلم لماذا تطلع الاخبار المثبته في الجانب العلوي

اخي شمالي وبعض الاخوه الي واجهتم نفس مشكلته

في الملف الي اسمه الكود الأول عليك بنسخه حسب الشرح مع التعديل عليه من عنوان الموقع الي موجود وهو albr-wh.org إلى عنوان موقعك

علماً التاكد ان تكتبه صح وكذلك في السطر الثالث كتب

albr-wh.org/styles/almgarah/featuredcontentglider.css

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

صاحب الموضوع كاتب almgarah حسب الاستايل الي عنده وانت عليك بتعديله للاستايل المناسب لموقعك

اتمنى ان قدرت ان اوضح لكم المشكله

والشكر موصول لصاحب الموضوع الله يجزاه خير

إقتباس:

اقتباس من مشاركة الشرقي للتصميم (المشاركة 606504)

اول شي نشكر اخونا ابو عمر على ابداعه
نفس المشكله عند اخوي الشرقي للتصميم وكان التنفيذ على استايل ابعاد
ياريت احد يفيدنا وين الخطاء رغم انه تم تطبيق الشراح كما هو

لكم كل الشكر

عطفاً على كلام الأخ المبدع أبو عمر .... سأضيف الى كلامه شيئاً من التفصيل ...

عندما تفتتح نموذج ccontent للتعديل , ستجد كود الأخبار المثبتة افتراضباً قبل اضافة قالب التحريك , ستجده كالتالي :

كود:

 <!-- START BLOCK : stknews -->  

<div id="xsnazzy">

<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

<div class="xboxcontent">

<div class="rnewstitle">{caption}</div>

<span style='float:left'>&nbsp;{picture}&nbsp;</span><div class="author">&nbsp;&nbsp;{date} م</div><div class="news">&nbsp;{text}&nbsp;

<br><br>

<div id="newsicons"><span style='float:right'><img border="0" src="infimages/newscomment.gif" alt="التعليقات">  {comnum}   |   <img border="0" src="infimages/newssend.gif" alt="إرسال">  {greet}   |   <img border="0" src="infimages/newsviews.gif" alt="الزيارات">  {views}</span><span style='float:left'>{readmore}</span></div>

</div>

</div>

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>

</div>

  <!-- END BLOCK : stknews -->

هذا الكود هو المسؤول عن اظهار الأخبار التي تقوم بتثبيتها من لوحة التحكم ....

الآن , قبل سطر  أضف الكود الذي في الملف المرفق ...

و بعده أضف الكود التالي

كود:

<div class="glidecontent">

ثم قبل السطر  أضف الكود التالي :

كود:

</div>

وبعده أضف الكود التالي :

كود:

</div>



<center>

<div style="width:50%;">

                       

<div id="p-select" class="cssbuttonstoggler" style="text-align:center;">

                         

 <a href="#" class="next"><span>التالي</span></a>

                         

 <a href="#" class="toc"><span>1</span></a> 

 <a href="#" class="toc"><span>2</span></a> 

 <a href="#" class="toc"><span>3</span></a>

 <a href="#" class="toc"><span>4</span></a> 

 <a href="#" class="toc"><span>5</span></a> 

 <a href="#" class="toc"><span>6</span></a>

 <a href="#" class="toc"><span>7</span></a> 

 <a href="#" class="toc"><span>8</span></a> 

 <a href="#" class="toc"><span>9</span></a>

 <a href="#" class="toc"><span>10</span></a> 

                         

 <a href="#" class="prev"><span>السابق</span></a>

                         

 </div>

</div>

</center>

<br>

الآن بالنسبة للملف featuredcontentglider.css المرفق مع القالب , يفضّل رفعه الى مجلد images في الستايل الذي تعمل عليه لتفادي مشاكل البيرميشن . ليصبح مسار الملف (اذا كان ستايل المجرة مثلاً) :

public_html/styles/almgarah/images

هكذا ... ستظهر الأخبار المثبتة ديناميكياً في القالب ....

و الشكر الجزيل للأستاذ المبدع أبو عمر

ولعيونكم .... في المرفقات الكود معدل و جاهز .... كل ما عليك عمله هو استبدال كود الأخبار المثبتة الافتراضي في نموذج CCONTENT بالكود المرفق في ملف CODE.txt بالمرفقات .

أيضاً يمكنك استبدال الأرقام بأزرار جميلة تعطي مظهراً أجمل للبلوك .. كله بالمرفقات

أشكركم جميعا والله وقصرتم أثريتم الموضوع وطورتوه
وأعتذر لمن سأل ولم أجواب لأني لم اتوصل إلى حل لمشكلاهم ..

مشكور ايضا اخوي karakas

وحاولت بكل الطرق ماضبطت معي ياليت لو تعدلي على نموذج ccontent برفقه اذا ممكن

تفضل أخي قلب العنا .....

إقتباس:

اقتباس من مشاركة satam2k (المشاركة 609010)

بارك الله فيك اللحين ضبط بعد تدارك الملاحظة

والله لحد الان ماضبط معي
ياريت الي ركبه على استايل ابعاد يفيدنا بطريقة التركيب اذا امكن
لانه تظهر عندي المشكله نفس المشكلة الي قال عليها اخوي شمالي رغم تطبيق مااشار اليه اخوي albrzaa
بانتظار المساعده

ابو عمر جزاك الله خيراً وكثر من امثالك

السلام عليكم ورحمة الله
الاخ بوعمر بيض الله وجهك
وكثر الله من أمثلك فعلاً
كفيت ووفيت وأشكر جميع
الاعضاء الي شاركو معك
تم التجربه وعمل الشرح
وميه ميه يعطيكم العافيه

الآن اتضحت الفكرة ,

جزاكم الله خير وتم التأكد من صحة الطريقة الأخيرة

شكرا لكم جميعا وجزاكم الله خيرا

ممكن أحد يعدلي على ملف ccontent المرفق

ممكن أحد يعدلي على ملف ccontent المرفق

والله يا اخوان عجزت توقف التفكير عندي هنق المخ

هذاملف ccontent معدل و جاهز .... استبدله بالموجود على موقعك ...

لا تنسى التالي :
رفع ملفي الجافاسكربت الى مجلد scripts في موقعك كما أشار الاخ أبو عمر ..
رفع ملف الcss و ملفي الصور في المرفقات بمشاركتي رقم 18 في هذا الموضوع .... رفعهم الى مجلد images في الستايل ...

و أي مشكلة أنا جاهز أخوي

بارك الله فيكم

لكن ليش ما جاء بالوسط
شوف الموقع

http://www.althniyan.com/inf

الله يجزاك الجنة يابو عمر

والله تعبت عشان هالطريقة ولا ضبططت معي .. قبل شهرين جلست يومين متواصله ع الجهاز وانا احاول اضبطها لكن والله ما ضبطت معي

واسال الله ان يجزيك يابو عمر ووالديك الجنة .. واسال الله ان يجزيك يابو عمر ووالديك الجنة .. واسال الله ان يجزيك يابو عمر ووالديك الجنة ..
واسال الله ان يجزيك يابو عمر ووالديك الجنة .. واسال الله ان يجزيك يابو عمر ووالديك الجنة .. واسال الله ان يجزيك يابو عمر ووالديك الجنة ..
واسال الله ان يجزيك يابو عمر ووالديك الجنة .. واسال الله ان يجزيك يابو عمر ووالديك الجنة .. واسال الله ان يجزيك يابو عمر ووالديك الجنة ..
واسال الله ان يجزيك يابو عمر ووالديك الجنة .. واسال الله ان يجزيك يابو عمر ووالديك الجنة .. واسال الله ان يجزيك يابو عمر ووالديك الجنة ..
واسال الله ان يجزيك يابو عمر ووالديك الجنة .. واسال الله ان يجزيك يابو عمر ووالديك الجنة .. واسال الله ان يجزيك يابو عمر ووالديك الجنة ..
واسال الله ان يجزيك يابو عمر ووالديك الجنة .. واسال الله ان يجزيك يابو عمر ووالديك الجنة .. واسال الله ان يجزيك يابو عمر ووالديك الجنة ..

تمنياتي لك بدوام التوفيق

الله يوفقكم جميعااااااااااااااااااااا اااااا

الان تمااااام ضبط معي

http://www.althniyan.com/inf/

يابو عمر لاهنت تعبت والله مو راضي يضبط معي
وبامكانك مشاهدة المشكله هذا الموقع www.m3llm.net على استايل Violets
ونفس المشكله ظهرت على استايل ابعاد واحيانا تظهر الاخبار في الركن الايسر

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

بارك الله فيك يابو عمر وكل الشباب الي عدلوا على الموضوع

لي استفسارات بسيطة :

1-تغيير لون الاطار الواضح ان لو الاطار أخضر وانا ابي اغيره

2- ارتفاع وعرض الصندوق للاخبار المتحركة كيف تغيير قيمته .

3- ازلاق الاخبار بعد نهاية الخبر الاخير يتوقف اريد تكرار الانزلاق دون توقف .

بارك الله فيكم

في الملف featuredcontentglider.css الذي قمت برفعة على الموقع يمكن تغيير جميع الالوان والخصائص

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

كود:

.glidecontentwrapper{

position: relative; /* Do not change this value */

width: 500px;

height: 190px; /* Set height to be able to contain height of largest content shown*/

border: 1px solid #66CC33;

overflow: hidden;

}

هذا العرض 500px
وهذا الطول 190px
وهذا لون الإيطار #66CC33

قم بتغييرها بما يناسبك

اما طريقة الحركة وإعادة الحركة بعد الإنتهاء فأنا وضعتها في مفكرة وسميتها الكود الأول في بداية شرح الموضوع وطلبت أن تضعة في أول النموذج ولو ترجمتها لعرفت معناها فكل أمر بجواره شرح له قد تكون غامضة بعضها لكن بالتجربه ستكون واضحة
أضن المسئول عن إعادة الدوران بعد الإنتهاء هو الأمر
autorotate:
حط بعده true بدل فولس

تمنياتي بالتوفيق للجميع

بارك الله فيك ياغالي يابو عمر

كفيت وفيت وبيض الله وجهك

دمت بود

إقتباس:

اقتباس من مشاركة satam2k (المشاركة 609010)

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

و الطريقة تعمل بشكل مميز وراقي

مثال

http://www.alhiad.net

تحياتي لكم

جزاكم الله خير إخواني ..

ولكن عندي سؤال

ألا تنطبق هذه على جديد المقالات .؟

بحيث يعرض أخر خمسة مقالات جديدة ؟

يا اخوان كل شيئ نفذته تمام والمربع موجود وكل شيئ تمام لكن الاصندوق فارغ لاتوجد اخبار تستدرج

ارجو التوضيح وعدم ارقاق ملف ال ccontent حتى يستفيد الارين وتتضح الفكرة وشكرا على مجهودكم الرائع
مشكلتي :

كل شيئ نفذته تمام والمربع موجود وكل شيئ تمام لكن الاصندوق فارغ لاتوجد اخبار تستدرج