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