5 يناير 2015

مدون محترف اضافات بلوجر دروس بلوجر إنشاء الملاحظات بطريقة جديدة و احترافية

إنشاء الملاحظات بطريقة جديدة و احترافية

إنشاء ملاحظات و مقدمات احترافية داخل المواضيع في بلوجر بطريقة جديدة و مختلفة

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

طريقة التركيب


  1. ادخل إلى لوحة تحكم المدونة
  2. انتقل إلى قالب
  3. ثم انقر على تحرير HTML


ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
#mudwnp1 {
margin: 3px -15px 3px 0px;
color: #fff;
font: 15px Droid Arabic Kufi,tahoma;
padding: 8px 67px 0px 0;
height: 28px;
width: 100%;
background: #2c3e50 url(https://dl.dropboxusercontent.com/s/xl45xxg9slpspas/1-1.png) no-repeat 100% 0px;
text-align: right;
transition: 1s;
overflow: hidden;
}
#mudwnp1:hover {
background: #00a8ad url(https://dl.dropboxusercontent.com/s/xl45xxg9slpspas/1-1.png) no-repeat 100% 0px;
color: #fff;
transition: 1s;
}
#mudwnp2 {
margin: 3px -15px 3px 0px;
color: #fff;
font: 15px Droid Arabic Kufi,tahoma;
padding: 8px 67px 0px 0;
height: 28px;
width: 100%;
background: #2c3e50 url(https://dl.dropboxusercontent.com/s/yt79n12nlp678d2/2-2.png) no-repeat 100% 0px;
text-align: right;
transition: 1s;
overflow: hidden;
}
#mudwnp2:hover {
background: #ab2e2e url(https://dl.dropboxusercontent.com/s/yt79n12nlp678d2/2-2.png) no-repeat 100% 0px;
color: #fff;
}
#mudwnp3 {
margin: 3px -15px 3px 0px;
color: #fff;
font: 15px Droid Arabic Kufi,tahoma;
padding: 8px 67px 0px 0;
height: 28px;
width: 100%;
background: #2c3e50 url(https://dl.dropboxusercontent.com/s/oukzfti8dlazvra/4-4-4.png) no-repeat 100% 0px;
text-align: right;
transition: 1s;
overflow: hidden;
}
#mudwnp3:hover {
background: #788081 url(https://dl.dropboxusercontent.com/s/oukzfti8dlazvra/4-4-4.png) no-repeat 100% 0px;
color: #fff;
}
#mudwnp4 {
margin: 3px -15px 3px 0px;
color: #fff;
font: 15px Droid Arabic Kufi,tahoma;
padding: 8px 67px 0px 0;
height: 28px;
width: 100%;
background: #2c3e50 url(https://dl.dropboxusercontent.com/s/h39m03t19p7cnp7/5-5-5.png) no-repeat 100% 0px;
text-align: right;
transition: 1s;
overflow: hidden;
}
#mudwnp4:hover {
background: #f39c12 url(https://dl.dropboxusercontent.com/s/h39m03t19p7cnp7/5-5-5.png) no-repeat 100% 0px;
color: #fff;
}
#mudwnp5 {
margin: 3px -15px 3px 0px;
color: #fff;
font: 15px Droid Arabic Kufi,tahoma;
padding: 8px 67px 0px 0;
height: 28px;
width: 100%;
background: #2c3e50 url(https://dl.dropboxusercontent.com/s/ayfajdkngi7377r/3-3.png) no-repeat 100% 0px;
text-align: right;
transition: 1s;
overflow: hidden;
}
#mudwnp5:hover {
background: #27ae60 url(https://dl.dropboxusercontent.com/s/ayfajdkngi7377r/3-3.png) no-repeat 100% 0px;
color: #fff;
}
#mudwnp6 {
margin: 3px -15px 3px 0px;
color: #fff;
font: 15px Droid Arabic Kufi,tahoma;
padding: 8px 67px 0px 0;
height: 28px;
width: 100%;
background: #2c3e50 url(https://dl.dropboxusercontent.com/s/qhfqjdpch23lvyu/6-6.png) no-repeat 100% 0px;
text-align: right;
transition: 1s;
overflow: hidden;
}
#mudwnp6:hover {
background: #278879 url(https://dl.dropboxusercontent.com/s/qhfqjdpch23lvyu/6-6.png) no-repeat 100% 0px;
color: #fff;
}
#mudwnpd2 a {
background: #FCB151;
box-shadow: 0 4px 0 #EB911E;
padding: 12px 25px;
margin: 4px;
text-align: center;
font: normal 15px Droid Arabic Kufi;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: 0.5s;
}
#mudwnpd2 a:hover{
background: #ccc;
box-shadow: 0 4px 0 #aaa;
transition:0.5s;
}
#mudwnpd2 {
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 12px;
margin-top: 8px;
}
#mudwnpd a {
padding: 12px 25px;
margin: 7px;
text-align: center;
font: normal 15px Droid Arabic Kufi;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: 0.5s;
background: #7EB3EC;
box-shadow: 0 4px 0 #6B97C7;
}
#mudwnpd a:hover{
background: #ccc;
box-shadow: 0 4px 0 #aaa;
transition:0.5s;
}
#mudwnpd {
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 12px;
margin-top: 8px;
}

طريقة استخدام الملاحظات 


عند كتابة موضوع انتقل إلى وضع HTML و ضع احد هذه الاكواد على حسب الشكل الذي تريده
<div id="mudwnp1">
هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة</div>


<div id="mudwnp2">
هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة</div>


<div id="mudwnp3">
هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة</div>


<div id="mudwnp4">
هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة</div>


<div id="mudwnp5">
هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة</div>


<div id="mudwnp6">
هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة</div>

اي سؤال او استفسار لا تترد بوضعه في تعليق بالتوفيق

مواضيع ذات صلة
إنشاء الملاحظات بطريقة جديدة و احترافية
4 / 5
بواسطة

هناك 22 تعليقًا :

  1. أزال أحد مشرفي المدونة هذا التعليق.

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

      ------- في مدونتنا لا نقم بنقل اي موضوع ------- ولا نقوم بانتهاك حقوق اي احد و لو في يوم قمنا بنقل موضوع تأكد اننا سوف نذكر الحقوق يا غالي

      احترامي لشخصك الكريم

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

      بالتوفيق =r

      حذف
  2. شكرا لك أخي وتم النقل =u
    http://hesham-net.blogspot.com/2015/01/new-alert-message-for-blogger.html

    ردحذف
    الردود
    1. العفو يا غالي
      و انا شاكر لك على ذكر المصدر

      بالتوفيق =r

      حذف
  3. انتم ابدااااااااااااااااع q= q= =f =s

    ردحذف
    الردود
    1. شكرا لك يا غالي
      نحن لا نستحق كل هذا المدح
      انرت المدونة بتعليقك بالتوفيق =r

      حذف
  4. الله يعطيك ما تتمنى

    ردحذف
  5. مبدع ولا اروع من ذلك
    ولكن هل من الممكن ان يتم التحكم في عرض الاداة من خلال الكود حتي يكون مظهر المدونة اكثر جمالا ؟؟؟

    ردحذف
    الردود
    1. اهلا اخي الملاحظات تأتي بعرض المدونة يعني متناسبة مع كل القوالب
      ولكن إن اردت التحكم بالعرض ابحث في كود الـ CSS

      width: 100%;

      و قم بتغييرها إلى 90px او 80px على حسب ما انت تريده

      بالتوفيق

      حذف
  6. ولك جزيل الشكر علي مجهودك

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

      حذف
  7. السلام عليكم
    موضوع جميل
    هناك طريقة لتصغيير الشريط

    ردحذف
    الردود
    1. تستطيع فعل هذا عن طريق تغيير width: 100%;
      الموجودة في اول المدونة فقط قم بتغيير رقم 100
      جرب و ردلي خبر

      حذف
  8. غير معرف14 أكتوبر, 2015

    اخى ممكن نجيالنا القالب بتع الرائع دا انا نفسى احط ارجوك اعطينى نسخه منه ارجوك =r

    ردحذف
    الردود
    1. اهلا اخي محمد
      صراحة لم افهم عن اي قالب تتحدث

      حذف
  9. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. تم مسح التعليق بسبب التكرار =f

      حذف
  10. السلام عليكم أخي منير اضافة رائعة وجميلة
    ولكن أخي هناك استشكال بسيط حول الاضافة هو ان الكتاب ليست في الوسط ولهذا يستوجب عليك اضافة الكود التالي ضمن اكواد css
    لكل شكل
    line-height:19px;

    ردحذف
    الردود
    1. و عليكم السلام و رحمة الله و بركاته
      شكراً لتعليقك
      وكلامك صحيح يا غالي
      شكراً لك على التنبيه و صراحة انا لم انتبه لها
      ايضاً وقتها كنت مُبتديء في مجال التدوين و لا املك الخبرة الكافية
      =e

      حذف
  11. العفو أخي الكريم منير هذا واجبي أظن أنك لم تعرفني أنا بوزوم واتمني ان تزورنا وشكرا علي ماتقدمه من اضافات وقوالب ومعلومات مدونة اصبحت في القمة شكرا لك =r

    ردحذف
    الردود
    1. الغالي و صديقي
      صراحة لم انتبه
      بالتأكيد سوف يتم زيارة مدونتك
      شكراً لك =e

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r