إضافة صندوق التنبيهات بتقنية 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>