إضافة صندوق التنبيهات 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://arabic3professional.blogspot.com/" title="تحميل القالب" target="_blank">
    <span class="box-a3p">تحميل القالب</span></a>
</div>
    </div>


استبدل ماهو باللون الأحمر بالرابط الذي تريد
وماهو باللون الأزرق بالكلمات التي تريد

أتمنى ان تكون الإضافة قد نالت استحسانكم
ألقاكم في تدوينة أخرى

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

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)