صندوق روابط متحركة

من ساعة ما عملت الصندوق اللى فيه روابط متحركة والناس عينها هاتطلع عليه .. لدرجة انه ساعات بيقف ومابيقدرش يتحرك .. اعوذ بالله ياجدع الناس عينيها فلقت الكود .. قصدى فلقت الحجر
لكل اللى طلب منى شرح طريقة عمله .. اليكم الطريقة
كان فيه موضوع انا عملته عن انشاء صندوق نصوص متحركة , من هنا : صندوق نصى متحرك , لو مشفتوش ممكن تشوفه عشان هى نفس الفكرة , الفكرة اننا هانستبدل النص برابط , سهله جدا
طيب الرابط بيتكتب ازاى ؟
عشان تعمل كلمة مربوطه بلينك .. بنستعمل الكود ده

<a href="http://lu2a.blogspot.com/" target="_blank">MyBlog</a>

كلمة MyBlog دى اللى هاتظهر , واللينك اللى مكتوب هو المكان اللى هاتروحله عند الضغط على الكملة , كمثال يعنى وطبعا ممكن تغيره

ونا كنت عامل موضوع عن كيفية انشاء صورة مربوطة بلينك , من هنا : انشاء صورة مربوطة بلينك .

الخلاصة

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

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3" direction="up" height="100"><ul type="circle">

<li><a href="http://lu2a.blogspot.com/2007/12/blog-post_3603.html" target="_blank">واد رخم اوى</a></li>

<li><a href="http://lu2a.blogspot.com/2007/11/blog-post_12.html" target="_blank">ياحبيبى يا مزنووووق</a></li>

<li><a href="http://lu2a.blogspot.com/2007/09/blog-post_29.html" target="_blank">كلنا لازم ناخد فيها</a></li>

</ul></marquee>

كلمة mraquee دى اللى هايخلى المحتوى يتحرك سواء كان نص او روابط
كلمة onmouseover="this.stop()" onmouseout="this.start()" معناها انك لما تقف بالماوس على المحتوى هايتوقف عن الحركة
كلمة scrollamount="3" دى سرعة الحركة ويمكنك تغييرها , كلما ذادت القيمة كلما ذادت السرعة
كلمة direction="up" ده الاتجاه وممكن تغيره لـ down او right او left
كلمة height="100" ده ارتفاع الصندوق اللى هايتحرك فيه الروابط والوحده دى بالبيكس ويمكنك تغييرها برضو
كده انتهى الجزء بتاع الحركة
من اول كلمة <ul type="circle"> ده الجزء بتاع الروابط , وكلمة ul اختصار لـ unorderd list يعنى ليستة غير مرتبة العناصر , ومعنى كلمة circle للاسف مش هاتعرفه عشان مش بيظهر تاثيره الا فى متصفح النتسكيب , ام هند
بعد كده عندك 3 روابط , كمثال طبعا

<li><a href="http://lu2a.blogspot.com/2007/12/blog-post_3603.html" target="_blank">واد رخم اوى</a></li>

ده رابط منهم , كلمة ( واد رخم اوى ) دى اللى هاتظهر , واللينك اللى فوقيها ده اللينك اللى هاتروحله لما تدوس على الرابط , حلو الكلام ؟
كلمة target="_blank" معناها ان لما تدوس على الرابط هايفتح ف نافذه جديده مش ف نفس النافذه
لاحظ ان اللينك مكتوب بين علامتى تنصيص , اوعا تمسح علامات التنصيص , فقط استبدل اللينك
ممكن تعمل كذا رابط تحت بعض كما فى المثال , بس حاول مايكونش عددهم اكبر من اللازم , يعنى لو عايز رأيي متخليهمش اكتر من 30 مثلا
ومعنى الحرفين (li) اختصار لكلمة list item باعتبار ان الرابط ده عنصر من عناصر الليسته
كلمة </ul> دى نهاية الجزء بتاع الليستة
وكلمة </marquee> دى نهاية الجزء بتاع الحركة

بعد ما تنتهى من تجهيز الكود الخاص بك , اذهب الى نافذة الادوات

dashboard > template > layout > page elements > add page element > HTML java code

ضع الكود ثم احفظ العمل

اعتقد ان الشرح مفصل لدرجة الملل , واللى حس ان الشرح ممل يسامحنى عشان فيه ناس مبتدئين
على فكرة , الكود ده ممكن تستعمله بطريقة عرضية , بعض المواقع بيكون فيها شريط من فوق فيه روابط بيتحرك من اليشمال لليمين , كل اللى عليك انك هاتمزج كود الرابط بكود الصندوق اللى بيحتوى على نص متحرك زى ماقولنا , وتغير اتجاه الحركة , اعتقد ان الكلام مفهوم
لو حد جرب الطريقة ونجحت ياريت يقولى عشان اعرف ان الشرح سليم
ولو حد فشل يقول برضو يمكن يكون الغلط من عندى
استودعكم الله

اكتب ايميلك هنا

كيفية وضع نص متحرك فى الاطار الجانبى

طريقة وضع صندوق نصى متحرك

عن طريق استخدام كود marquee

مش هادخل فى تفاصيل عن الكود ده
انا هادى امثلة علطول
هاتلاقى الكود وبعد كده منظر الكود عند تشغيله
الحكاية دى تقدر تعملها سواء فى الاطار الجانبى للمدونة او فى التدوينة نفسها او حتى فى راس المدونة
هاتدخل على
dashboard > layout > template > page elements

اختار add page element فى المكان اللى انتا عايز تضيف فيه الصندوق سواء الاطار الجانبى او راس او ذيل المدونة

من القايمة اللى هاتطلع اختار text

ضع عنوان للصندوق

ضع الكود فى المكان المناسب

احفظ

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

الامثلة فيها نصوص للتوضيح فقط

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


<marquee scrolldelay="200" width="400px" height="25px" bgcolor="#ffffcc">النص يتحرك افتراضيا من اليمين لليسار.</marquee>



النص يتحرك افتراضيا من اليمين لليسار.







ده الاتجاه الافتراضى من اليمين للشمال
ملاحظات :
ممكن تغير لون خلفية الصندوق bgcolor="#ffffcc">
ممكن تغير سرعة تحرك النص scrolldelay="200"
ممكن تغير طول الصندوق height="25px"
ممكن تغير عرض الصندوق width="400px"


ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ


<marquee behavior="alternate" width="400px" scrolldelay="200" height="25px" bgcolor="#ffffcc">النص يرجع فى الاتجاه المعاكس.</marquee>



النص يرجع فى الاتجاه المعاكس.






ده نفس الكلام الفرق ان النص هايرجع يتحرك فى الاتجاه المعاكس
والسر فى behavior="alternate"
طبعا ممكن تغير المقاسات وسرعة النص ولون الخلفيه برضو


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ



<marquee scrolldelay="150" direction="up" width="200px" height="300px" bgcolor="#ffffcc">فى هذا المثال يتحرك النص من اسفل الى اعلى.</marquee>


فى هذا المثال يتحرك النص من اسفل الى اعلى.




هنا النص بيتحرك من تحت لفوق
ممكن تغير الاتجاه direction="up"
وممكن تغير لون الخلفيه والمقاسات والذى منه


ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

<marquee hspace="50%" direction="down" scrolldelay="50" height="300px" bgcolor="#ffffcc">فى هذا المثال يتحرك النص من اعلى الى اسفل.</marquee>


فى هذا المثال يتحرك النص من اعلى الى اسفل.

هنا النص بيتحرك من فوق لتحت

لاحظ الفرق فى سرعة تحرك النص

ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

<marquee hspace="50%" onmouseover="this.stop()" onmouseout="this.start()" direction="down" scrolldelay="30" height="300px" width="200px" bgcolor="#ffffcc">النص يتحرك من اعلى الى اسفل .. ويقف تحرك النص عند مرور الماوس عليه وهذا اهم مثال.</marquee>


النص يتحرك من اعلى الى اسفل .. ويقف تحرك النص عند مرور الماوس عليه وهذا اهم مثال.


ده اهم مثال لان النص بيقف لما الماوس يؤشر عليه

والسر فى الوسمين دول

onmouseover="this.stop()" onmouseout="this.start()"

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

اشوفكوا على خير

اكتب ايميلك هنا