شرح كود شريط العروض المتحرك css يصلح للشركات + الكود جاهز

ghost-hosts.com

عضو جديد
17 مارس 2013
3
0
0
السلام عليكم ورحمة الله وبركاته

كود شريط العروض متحرك يصلح لاصحاب شركات الاستضافة

مميزات الكود :

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

تقدر تستفيد منه باي شي يناسبك من الافكار بموقعك مثلا : كلمة الموقع , اخبار الموقع الخ

اولا مثال مصور للكود من موقعي :

attachment.php



لمشاهدة الكود من موقعي من خلال الرابط التالي :
الوان التطوير لخدمات الويب - الصفحة الرئيسية



الشرح :

انسخ الكود التالي وضعه في اي مكان يعجبك :
كود:
<div class="ramaaad"  style="margin-top:30px; margin-right:43px; margin-bottom:8px;margin-left:45px; padding:0px; width:615px;   
 border: 2px solid #929190; 
 border-radius: 20px 20px 20px 20px; 
overflow:hidden; ">

<div class="ramaaad1" style="background:#2896AA;  margin:0px; padding:0px; ">
<p align="center" style=" color:#fff; text-shadow: 1px 1px #3B606F; font:bold 13px Tahoma; padding:5px;">
عروضنا الحالية</p></div>

<div class="ramaaad1" style=" margin:0; padding:0px; ">
<p align="center" style=" color:#5F5F5F; text-shadow: 1px 1px #E2E2E2; font:bold 13px Tahoma; padding:0px;">
<marquee direction="right" scrollamount="3" scrolldelay="85" onmouseout="this.start()" onmouseover="this.stop()" 
style=" border-bottom:white 1px solid; border-top:#FFFFFF 1px solid; background:#C0C0C0; padding:5px;"><b> اكتب العروض هنا   <b/></marquee></p></div>

<div class="ramaaad1" style="background:#2896AA;   margin:0;  padding:0px; ">
<p align="center" style="font:bold 13px Tahoma; padding:5px;"><a style="color:#fff; text-shadow: 1px 1px #3B606F; text-decoration:none" href="http://www.ghost-hosts.com/submitticket.php">اطلب الان</a></p></div>

</div>




لتعديل وللتحكم باتجاه الكود تعدل على القيم التالية :

margin-top:30px; << للازاحة من الاعلى
margin-right:43px; << للازاحة من اليمين
margin-bottom:8px << للازاحة من الاسفل
margin-left:45px; << للازاحة من اليسار

لتغيير لون حدود الكود ابحث عن :

border: 2px solid #929190; << اللي باللون الاحمر كود اللون

المستطيل الاعلى والاسفل اللي لونهم ازرق بامكانك تغير لونهم ابحث عن :


div class="ramaaad1" style="background:#2896AA; << اللي باللون الاحمر كود اللون غيرة لما تشاء

ولتغيير لون النص وضل النص حق المستطيلين الازرق اللي بالاعلى والاسفل ابحث عن

style="color:#fff; text-shadow: 1px 1px #3B606F; << اللي باللون الاحمر لون النص واللي باللون الاخضر لون ضل النص

ولتغيير لون المستطيل الرمادي اللي بالنص ابحث عن

background:#C0C0C0; اللي باللون الاحمر لون خلفية المستطيل

ولتغيير لون النص وضل النص حق المستطيل اللي بالنص ابحث عن

style=" color:#5F5F5F; text-shadow: 1px 1px #E2E2E2; << اللي باللون الاحمر لون النص واللي باللون الاخضر لون ضل النص




واعتذر لكم اذا كان الشرح غير واضح

وللاستفسار انا حاضر ان شاء الله​