الخميس، 13 نوفمبر 2014

انشاء الملاحظات الثابتة والمتحركة وتنسيقها

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

هنا نص الملاحظة يمكن تعديله
وهذا النموذج المتحرك
هنا نص الملاحظة يمكن تعديله
الكود
<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/AVvXsEjIddkzSR1vpmsD8kBNmS-lPSXg7NRf0GLOEV4oqH-RmxPW0ijq_-cuUmhv4vkrZ_z-NG_0Cu3ENOAFliGDrKqlijfLRlzise-7KZc0MDhVaVQ31CKmZjxHFl2dBBCubJ8TPKFfLFCpE1zI/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>
هذا #d0fdbc هو لون الخلفية
هذا #6abf45 هو لون الإطار
الرقم 17 هو حجم الخط
هذا 36 هو بعد الخط من الأعلى
هذا tahoma هو نوع الخط
هذا 400 هو عرض الشريط
الرابط المعلم باللون الزهري هو الأيقونة يمكنك استبدالها بايقونة اخرى المقاس المناسب هو 24x24
الرقم 14 هو بعد الأيقونة من جهة اليسار
الرقم 8 هو بعد الايقونة من الأعلى
الكود معد على النموذج المتحرك لإيقاف الحركة احذف الكودين المعلمان بالبرتقالي
الرقم
90 داخلهما هو سرعة الحركة كلما زاد اصبح أبطأ
وطبعا استبدل جملة هنا نص الملاحظة يمكن تعديله بما تريد
التركيب والتعامل
يمكنك ان تضيف الكود باكلمه داخل آداة HTML/JavaScript
مع الشكر لصاحب مدونة كن مدون

جميع الحقوق محفوظة لمدونة جيوش الاسلام 2015

تصميم: MR-bilal