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



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

طريقة التركيب:
    1. توجه إلى قالب >> تحرير
    2. ثم انقر على تحرير HTML
    3. ابحث عن الوسم  ]]></b:skin> و اضف الكود التالي فوقه:
    4.  يمكنك معاينة الاضافة قبل وضعها من هنا 
    /*--------------CSS Aleret Message---------------*/#jazairiweb-pd1 { margin: 3px -15px 3px 0px; color: #fff; font-family: JF_Flat_Regular; padding: 8px 67px 0px 0; height: 28px; width: 999px; background: #2c3e50 url(https://dl.dropboxusercontent.com/s/xl45xxg9slpspas/1-1.png) no-repeat 99% 0px; text-align: right; transition: 1s; overflow: hidden; } #jazairiweb-pd1:hover { background: #01A8AD url(https://dl.dropboxusercontent.com/s/xl45xxg9slpspas/1-1.png) no-repeat 99% 0px; color: #fff; transition: 1s; } #jazairiweb-pd2 { margin: 3px -15px 3px 0px; color: #fff; font-family: JF_Flat_Regular; padding: 8px 67px 0px 0; height: 28px; width: 999px; background: #2c3e50 url(https://dl.dropboxusercontent.com/s/yt79n12nlp678d2/2-2.png) no-repeat 99% 0px; text-align: right; transition: 1s; overflow: hidden; } #jazairiweb-pd2:hover { background: #ab2e2e url(https://dl.dropboxusercontent.com/s/yt79n12nlp678d2/2-2.png) no-repeat 99% 0px; color: #fff; } #jazairiweb-pd3 { margin: 3px -15px 3px 0px; color: #fff; font-family: JF_Flat_Regular; padding: 8px 67px 0px 0; height: 28px; width: 999px; background: #2c3e50 url(https://dl.dropboxusercontent.com/s/oukzfti8dlazvra/4-4-4.png) no-repeat 99% 0px; text-align: right; transition: 1s; overflow: hidden; } #jazairiweb-pd3:hover { background: #788081 url(https://dl.dropboxusercontent.com/s/oukzfti8dlazvra/4-4-4.png) no-repeat 99% 0px; color: #fff; } #jazairiweb-pd4 { margin: 3px -15px 3px 0px; color: #fff; font-family: JF_Flat_Regular; padding: 8px 67px 0px 0; height: 28px; width: 999px; background: #2c3e50 url(https://dl.dropboxusercontent.com/s/h39m03t19p7cnp7/5-5-5.png) no-repeat 99% 0px; text-align: right; transition: 1s; overflow: hidden; } #jazairiweb-pd4:hover { background: #f39c12 url(https://dl.dropboxusercontent.com/s/h39m03t19p7cnp7/5-5-5.png) no-repeat 99% 0px; color: #fff; } #jazairiweb-pd5 { margin: 3px -15px 3px 0px; color: #fff; font-family: JF_Flat_Regular; padding: 8px 67px 0px 0; height: 28px; width: 999px; background: #2c3e50 url(https://dl.dropboxusercontent.com/s/ayfajdkngi7377r/3-3.png) no-repeat 99% 0px; text-align: right; transition: 1s; overflow: hidden; } #jazairiweb-pd5:hover { background: #27ae60 url(https://dl.dropboxusercontent.com/s/ayfajdkngi7377r/3-3.png) no-repeat 99% 0px; color: #fff; } #jazairiweb-pd6 { margin: 3px -15px 3px 0px; color: #fff; font-family: JF_Flat_Regular; padding: 8px 67px 0px 0; height: 28px; width: 999px; background: #2c3e50 url(https://dl.dropboxusercontent.com/s/qhfqjdpch23lvyu/6-6.png) no-repeat 99% 0px; text-align: right; transition: 1s; overflow: hidden; } #jazairiweb-pd6:hover { background: #278879 url(https://dl.dropboxusercontent.com/s/qhfqjdpch23lvyu/6-6.png) no-repeat 99% 0px; color: #fff; } #jazairiweb-pd a { background: #FCB151; box-shadow: 0 4px 0 #EB911E; padding: 12px 25px; margin: 4px; text-align: right; font-family: JF_Flat_Regular; color: #fff; text-decoration: none; border-radius: 5px; transition: 0.5s; } #jazairiweb-pd a { padding: 12px 25px; margin: 7px; text-align: right; font-family: JF_Flat_Regular; color: #fff; text-decoration: none; border-radius: 5px; transition: 0.5s; background: #7EB3EC; box-shadow: 0 4px 0 #6B97C7; } #jazairiweb-pd a:hover{ background: #ccc; box-shadow: 0 4px 0 #aaa; transition:0.5s; } #jazairiweb-pd { margin-left: auto; margin-right: auto; text-align: right; margin-bottom: 12px; margin-top: 8px;}


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

    عند كتابة موضوع انتقل إلى وضع HTML 
    و ضع احد هذه الاكواد على حسب الشكل الذي تريده:

    </div> هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة<div id="jazairiweb-pd1"> 
    </div> هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة<div id="jazairiweb-pd2"> 
    </div> هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة<div id="jazairiweb-pd3">
    </div> هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة<div id="jazairiweb-pd4">
    </div> هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة<div id="jazairiweb-pd5">
    </div> هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة<div id="jazairiweb-pd6">

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

      ردحذف
    2. اخي ممكن إنشاء الملاحظات بطريقة جديدة و احترافية اخرى

      ردحذف
      الردود
      1. ساضع ملاحظات مدونتي, بعد وضع قالب اخر للمدونة قريبياا

        حذف
    3. الردود
      1. اخي انا والله استعملتها اكثر من مرتين =b
        والاكواد شغالة 99% =q

        حذف

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