0

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

إرسال تعليق

جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).

 
Top