اضافة ادة متحركة او سابتة ملاحظة
والصلاة والسلام على اشرف المرسلين سيدنا محمد عليه افضل الصلاة والسلام
اهلااا ومرحباا بمك بمدونة بوستر اليوم هو كيفية وضع اداة التنبيه ثابتة او متحركة تابع الشرح كيفية وضع الكود فى هتمل جافا اسكريبت ::::::::::::::::
الموضوع منقول من مدونة كن مدون
ثانياً النموذج المتحرك
كود الرسالة
<style>
#cnmumesclose {
background:rgba(0, 0, 0, 0);
border: 0 none;
border-radius: 0;
color: #888;
cursor: pointer;
display: inline-block;
float: right;
font: bold 14px Arial Black;
margin: 9px -18px 0 0;
position: absolute;
text-align: center;
width: 15px;
}
#cnmumesclose:hover {color: #d50000;}
#cnmumes1 {
background-color: #d0fdbc;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2CpKm6aPKJM_tgbKgRJ9pJ9gReCsfMFc_p7tb8jNcc_zN7WRQUXCdcXImk07WLz7oRjVl9AlQbc6cO9sWfmtp4YdtT_QhvysvOCRwDhY7azbTkAyNmZdsMM902k36mXB2kxV3ILFx19T1/s24/Accept.png");
background-position: 14px 8px;
background-repeat: no-repeat;
border: 1px solid #6abf45;
border-radius: 4px;
font: 17px/36px tahoma;
height: 40px;
overflow: hidden;
padding: 0 25px 0 42px;
width: 400px;
}
</style>
<div id="cnmumes1">
<button id="cnmumesclose" type="button" onclick="{document.getElementById('cnmumes1') .style.display='none'}">X</button>
<marquee behavior="scroll" direction="right" scrolldelay="90" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);">
<div style="text-align:left;">
كن مدون كل ما يحتاجه المدونون
</div>
</marquee>
</div>
أهم التنسيقات
هذا #6abf45 هو لون الإطار
الرقم 17 هو حجم الخط
هذا 36 هو بعد الخط من الأعلى
هذا tahoma هو نوع الخط
هذا 400 هو عرض الشريط
الرابط المعلم باللون الزهري هو الأيقونة يمكنك استبدالها بايقونة اخرى المقاس المناسب هو 24x24
الرقم 14 هو بعد الأيقونة من جهة اليسار
الرقم 8 هو بعد الايقونة من الأعلى
الكود معد على النموذج المتحرك لإيقاف الحركة احذف الكودين المعلمان بالبرتقالي
الرقم 90 داخلهما هو سرعة الحركة كلما زاد اصبح أبطأ
وطبعا استبدل جملة كن مدون كل ما يحتاجه المدونون بما تريد
التركيب والتعامل
يمكنك ان تضيف الكود باكلمه داخل آداة HTML/JavaScript
أو يمكنك ان تيف الجزء الموجود بين الكودين <style> </style>
داخل القالب فوق الوسم
والجزء الباقي من الكود تستخدمه داخل موضوع
في حالة أردت أكثر من تنسيق للرسائل يعني مثلا تريد رسالة بلون ورسالة بلون آخر
فقط كرر الكود التالي مع تعديله في كل مرة بالشكل والايقونة المناسبه وتغيير الرقم 1 برقم آخر كلما كررته عليك تغيير الرقم
#cnmumes1 {
background-color: #d0fdbc;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2CpKm6aPKJM_tgbKgRJ9pJ9gReCsfMFc_p7tb8jNcc_zN7WRQUXCdcXImk07WLz7oRjVl9AlQbc6cO9sWfmtp4YdtT_QhvysvOCRwDhY7azbTkAyNmZdsMM902k36mXB2kxV3ILFx19T1/s24/Accept.png");
background-position: 14px 8px;
background-repeat: no-repeat;
border: 1px solid #6abf45;
border-radius: 4px;
font: 17px/36px tahoma;
height: 40px;
overflow: hidden;
padding: 0 25px 0 42px;
width: 400px;
}
<div id="cnmumes1">
<button id="cnmumesclose" type="button" onclick="{document.getElementById('cnmumes1') .style.display='none'}">X</button>
<marquee behavior="scroll" direction="right" scrolldelay="90" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);">
<div style="text-align:left;">
كن مدون كل ما يحتاجه المدونون
</div>
</marquee>
</div>
تقييم : 10 من 10 مرتكز على 24 تقييم.
الكاتب / المدير NET POINT | الافضل لكم | اسامة عبد الرضا
Osama Abid AL-Reda
اسامة عبد الرضا : من الجمهورية العراقية, اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,لدي إهتمامات اخرى منها الرياضة ، ألعاب الفيديو ، والتصميم بحد ذاته ومدونة NET POINT | الافضل لكم تعبر عما أهواه .


* بإمكانك إدراج الأكواد الغير قابلة لنشر بتحويله عبر محول الأكواد
لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"
محول الأكوادعبر عن تعليقكاترك بصمتك