عروض مركز بلوجر

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

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

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

ثانياً النموذج المتحرك

من أخلاق نبينا صلى الله عليه وسلم عن عبد الله بن ابي أوفى رضى الله عنه قال ( كان يُكثِرُ الذِّكرَ ، و يُقِلُّ اللغوَ ، و يطيلُ الصلاةَ ، و يُقصِرُ الخطبةَ ، وكان لا يأنَفُ و لا يستكبرُ أن يمشيَ مع الأرملةِ والمسكينِ و العبدِ ، حتى يَقضيَ له حاجتَه ) --- {وَمَا أَرْسَلْنَاكَ إِلَّا رَحْمَةً لِّلْعَالَمِينَ }الأنبياء107

كود الرسالة

<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://lh3.googleusercontent.com/-yUaFdNck3Xo/VF8I2xHcOGI/AAAAAAAAFC0/pv_QrrawuvA/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
أو يمكنك ان تيف الجزء الموجود بين الكودين <style> </style>
داخل القالب فوق الوسم ]]></b:skin>
والجزء الباقي من الكود تستخدمه داخل موضوع
في حالة أردت أكثر من تنسيق للرسائل يعني مثلا تريد رسالة بلون ورسالة بلون آخر
فقط كرر الكود التالي مع تعديله في كل مرة بالشكل والايقونة المناسبه وتغيير الرقم 1 برقم آخر كلما كررته عليك تغيير الرقم
#cnmumes1 {
  background-color: #d0fdbc;
  background-image: url("https://lh3.googleusercontent.com/-yUaFdNck3Xo/VF8I2xHcOGI/AAAAAAAAFC0/pv_QrrawuvA/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;
}
أيضاً عليك تغيير الرقم 1 في الكود الذي ستضيفه كرساله بنفس ارقم الذي وضعته في التكرار
توضيح كالتالي
<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>
 وطبعا يمكنك ان تصل لاى عدد تريد من التنسيقات
وبالتوفيق
 

26تعليقات

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

  1. جميلة حقا بارك الله فيك وزادك من فضله جزاك الله خيرا

    ردحذف
  2. أخي الفاضل ما مرادف ]]> في html
    أي إذا أردت وضع الإضافة في قالب html لموقع أو صفحة كيف يمكنني إيجاد هذا العنصر أو زيادته إذا لم يكن متوفرا في html

    ردحذف
    الردود
    1. وجزاكم الله بالمثل أخي الكريم وفيكم بارك الله
      بالنسبة لتركيبها على صفحة HTML عادية انت تضيف الكود في الجزء المخصص للستايل
      فأى موقع له جزء خاص بأكواد الستايل اضفه فيه

      حذف
  3. شكرا كل اخي عمرو ما يعجبني في مواضيعك انك تضيف لمستك الخاصة في الاضافات

    ردحذف
    الردود
    1. هذا ما حاول فعله بالضبط اخي منير اما في الادوات التي اعربها او آداة اصنعها كتلك يجب ان يكون هناك جديد والا لا داعي من تقديمها
      جزيل الشكر لمرورك العطر يا غالي

      حذف
  4. الف شكر على الكود =q =q =y =y

    ردحذف
    الردود
    1. الشكر لله أخي الكريم
      وبالتوفيق =r

      حذف
  5. الف شكر تم التركيب
    http://gewshelislam.blogspot.com/

    ردحذف
  6. اخى هل تسمح بنقل مواضيعك مع ذكر المصدر (مدونتك) ؟

    ردحذف
    الردود
    1. نعم اخي الكريم مسموح نقل المواضيع طالما ستكون مع ذكر المصدر برابط الموضوع الأصلي
      وشكراً على حسن خلقك في السؤال يا طيب =r

      حذف
  7. إضافة حلوة من شب حلو q=

    ردحذف
    الردود
    1. شكراً لمرورك أخي مصعب ودي وتقديري

      حذف
  8. شكر لك اخي
    تعليق حول مدونتي
    http://infowebd-z.blogspot.com

    ردحذف
  9. السلام عليكم
    موضوع مميز كالعادة
    أو أن اسألك سؤالين خارجين عن الموضوع
    1. بالنسبة للتبادل الإعلاني المطور الخاص بك هل مدونتي مقبولة
    http://arabic3professional.blogspot.com/
    2 . كيف يمكنني متابعة مدونتك

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      حياك الله أخي تم قبول مدونتك وتم الرد على طلب اشتراكك
      متابعة مدونتي ستجد في الصفحة الرئيسية جميع وسائل المتابعة المتاحة وعموما هذه الروابط
      بلوجر فيس بوك تويتر جوجل بلس

      حذف
  10. إضافة رائعة وبسيطة في التركيب شكرا لك

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

    ردحذف
  12. كتبت فى الرد الاول كل شي
    يا ريت يكون الاعلان حسب تمدد الصفحة تلقائي اماء مربع الحوار يعني يكون 35 بكسل حلوو وابي الغاء الكلوز يعني الشريط ثابت وابيع احط بدل الصوره الي فيها صح صوره هذا http://store1.up-00.com/2016-02/145621150241241.png وتبداء من يمين الموضوع بارك الله فيكم ولو ابي اسوي بين موضوع وموضوع صوره مثل الي فى الشريط الاخباري حقكم الاول مثل صوره جديد وشكرا لكم يا غالين الله يسلمكم

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

      حذف
  13. يسلمووووو يا غالي ربي يسعدكم مشكورين

    ردحذف