menu
attachment
  • الصفحة الرئيسية
  • الأرشيف
  • لديك مشكلة ؟
notifications
حلولي | مدونة تقنية
bannner1
  • عام
  • _مواضيع عامة
  • _مواقع مفيدة
  • _شروحات
  • _رمزيات
  • _الفديوهات
  • قوقل
  • _قوقل كروم
  • _قوقل بلس
  • _قوقل ادسنس
  • ملحقات
  • _صور
  • _ايقونات
  • _خط عربي
  • _خط اجنبي
  • بلوجر
  • _شروحات بلوجر
  • _إضافات بلوجر
  • التقنية والبرمجة
  • _برامج الأندرويد
  • _برامج الأيفون
  • _برامج كمبيوتر
  • إسلاميات
  • _الكل
  • _القرآن كريم
  • _تواقيع اسلامية
  • _اهات صوتية
    10|recentpost
  • حلولي | مدونة تقنية
  • إضافات بلوجر
  • إضافة صندوق التنبيهات بتقنية CSS و JQuery
حلولي
0

إضافة صندوق التنبيهات بتقنية CSS و JQuery

7/15/2015
share
  • ‏المشاركة في Facebook
  • ‏المشاركة في Twitter
  • ‏المشاركة على Pinterest
  • إرسال بالبريد الإلكتروني
  • كتابة مدونة حول هذه المشاركة
settings_overscan print announcement
إضافة صندوق التنبيهات بتقنية CSS و JQuery


إضافة صندوق التنبيهات بتقنية CSS و JQuery

طريقة الاضافة / تخطيط - اضافة اداة - HTML/JavaScript

واضف الكود التالي


<style type='text/css'>    .box-a3pbox{    position:relative;    width:256px;    height:auto;    position:fixed;    bottom:0;    left:60px;    }.tombolbox-a3p{    text-align:center;    text-decoration:none;    width:240px;    height:auto;    background:#555;    padding:5px 5px 15px;    display:none;    border: 3px solid #F84D4D;}.box-a3p{    background:#fff;    border:0;    margin:0 auto;    padding:5px 18px;    font-size:18px;    font-weight:700;    color:#333;    text-align:center;    display:inline-block;    border-radius:3px;    border: 2px solid #F84D4D;    transition:background-color 0.6s ease-out 0.6s;}.box-a3p:hover{    background:#F84D4D;
}.box-a3pheader{    background:#F84D4D;    border-radius:3px 3px 0 0;    margin:0 auto;    padding:8px 23px;    font-size:18px;    font-weight:700;    color:#fff;    text-align:center;    display:block;    cursor:pointer;}.tombolbox-a3p a{    text-decoration:none;}.tombolbox-a3p p{    color:#ddd;    font-size:14px;    margin:5px 0 10px;}  </style>  

<script type='text/javascript'>//<![CDATA[ $(window).load(function(){jQuery(document).ready(function($) {    $(".box-a3pheader").click(function() {        $(".tombolbox-a3p").slideToggle(500);    });});});//]]>  
</script>


  <div class="box-a3pbox"><span class="box-a3pheader"> تحميل القالب </span><div class="tombolbox-a3p">    <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى<br/>        </p>    <a href="http://da3yh.blogspot.com/" title="تحميل القالب" target="_blank">    <span class="box-a3p">تحميل القالب</span></a></div>    </div> 






لتركيب الاضافة بدون مربع التحميل

اضف الكود التالي
<style type='text/css'>    .box-a3pbox{    position:relative;    width:256px;    height:auto;    position:fixed;    bottom:0;    left:60px;    }.tombolbox-a3p{    text-align:center;    text-decoration:none;    width:240px;    height:auto;    background:#555;    padding:5px 5px 15px;    display:none;    border: 3px solid #F84D4D;}.box-a3p{    background:#fff;    border:0;    margin:0 auto;    padding:5px 18px;    font-size:18px;    font-weight:700;    color:#333;    text-align:center;    display:inline-block;    border-radius:3px;    border: 2px solid #F84D4D;    transition:background-color 0.6s ease-out 0.6s;}.box-a3p:hover{    background:#F84D4D;
}.box-a3pheader{    background:#F84D4D;    border-radius:3px 3px 0 0;    margin:0 auto;    padding:8px 23px;    font-size:18px;    font-weight:700;    color:#fff;    text-align:center;    display:block;    cursor:pointer;}.tombolbox-a3p a{    text-decoration:none;}.tombolbox-a3p p{    color:#ddd;    font-size:14px;    margin:5px 0 10px;}  </style>  

<script type='text/javascript'>//<![CDATA[ $(window).load(function(){jQuery(document).ready(function($) {    $(".box-a3pheader").click(function() {        $(".tombolbox-a3p").slideToggle(500);    });});});//]]>  
</script>


  <div class="box-a3pbox"><span class="box-a3pheader"> ملاحظة </span><div class="tombolbox-a3p">    <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى<br/>        </p></div>    </div>


Share This
clear
  • الكاتب حلولي
    حلولي
    مدونة تقنية أنشر كل مايفيد الزائر والمدون .
  • في 7/15/2015
إضافات بلوجر

add_comment ليست هناك تعليقات:

إرسال تعليق

المتابعون

الأقسام

  • إسلاميات (78)
  • إضافات بلوجر (108)
  • الانستقرام (13)
  • القرآن كريم (7)
  • اهات صوتية (9)
  • ايقونات (18)
  • برامج الأندرويد (45)
  • برامج الأيفون (23)
  • برامج كمبيوتر (18)
  • برودكاست (3)
  • تواقيع اسلامية (18)
  • تويتر (22)
  • حصرى (14)
  • خط اجنبي (36)
  • خط عربي (24)
  • رمزيات (20)
  • شروحات (150)
  • شروحات بلوجر (44)
  • صور (47)
  • فديو (8)
  • فيس بوك (19)
  • قوالب بلوجر (50)
  • قوقل (1)
  • قوقل ادسنس (1)
  • قوقل بلس (11)
  • قوقل كروم (21)
  • كتب (51)
  • مسابقات (2)
  • مميز (3)
  • مواضيع عامة (11)
  • مواقع مفيدة (86)
  • نصائح (2)
  • يوتيوب (46)

من أنا

صورتي
حلولي
عرض الملف الشخصي الكامل الخاص بي

الأكثر زيارة

  • موقع تحويل الرابط الى باركود
    موقع تحويل الرابط الى باركود الموقع qrcode.kaywa شرح بسيط موقع آخر الموقع www.qr-code-generator.com لات...
  • تحميل تطبيق قارئ الباركود للأندرويد
    تحميل تطبيق قارئ الباركود للأندرويد للجالكسي  للتحميل من قوقل بلاي   هنا
  • وضع اطار لصور مواضيع المدونة بلوجر
    وضع اطار خفيف لصور الموضيع الداخلية كما هوا موضح في الصورة في الأعلى أولاً الدخول الى: لوحة التحكم ندخل على القالب  ثم نضغط على...
  • احصل على رابط قروب الواتس اب بطريقة مختصرة
    الأن تستطيع الحصول على رابط
  • مسابقة لربح دومين com لمدة سنة كاملة - انتهت المسابقة
    مسابقة لربح دومين com لمدة سنة كاملة
bannner1

مواقع ندعمها

  • _بلوجر كود
  • ضع موقعك هنا
  • ضع موقعك هنا
  • ضع موقعك هنا
  • #ضع موقعك هنا
  • #ضع موقعك هنا
  • #ضع موقعك هنا
  • facebook
  • youtube
  • twitter
  • pinterest
attachment
  • الصفحة الرئيسية
  • إتفاقية الإستخدام
  • facebook
  • youtube
  • twitter
  • pinterest

الحصول على إشعارات عبر البريد الإلكتروني

عن الموقع حلولي | مدونة تقنية

مدونة تقنية أنشر كل مايفيد الزائر والمدون .

  1. facebook
  2. youtube
  3. twitter
  4. pinterest

روابط مفيدة

  • ضع نص قابل للنقر هنا
  • ضع نص قابل للنقر هنا
  • ضع نص قابل للنقر هنا
  • ضع نص قابل للنقر هنا

أقسام الموقع

إسلاميات (78) إضافات بلوجر (108) الانستقرام (13) القرآن كريم (7) اهات صوتية (9) ايقونات (18) برامج الأندرويد (45) برامج الأيفون (23) برامج كمبيوتر (18) برودكاست (3) تواقيع اسلامية (18) تويتر (22) حصرى (14) خط اجنبي (36) خط عربي (24) رمزيات (20) شروحات (150) شروحات بلوجر (44) صور (47) فديو (8) فيس بوك (19) قوالب بلوجر (50) قوقل (1) قوقل ادسنس (1) قوقل بلس (11) قوقل كروم (21) كتب (51) مسابقات (2) مميز (3) مواضيع عامة (11) مواقع مفيدة (86) نصائح (2) يوتيوب (46)
clear
clear

  • facebook
  • youtube
  • twitter
  • pinterest
حلولي | مدونة تقنية