حلولي https://www.facebook.com/hlo1y https://twitter.com/hlo1y https://www.youtube.com/user/v518v https://plus.google.com/+v518v

تابعنا على :

f tw +G yt vk

KHALED ALMILBE




مدون ومطور قوالب بلوجر
My E-mail : ###
My Phone No. : #%^$#
My Website : www.k2d.us

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

حلولي

مشرف

المزيد

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

تم النشر فى قسم

تم النشر منذ

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


مشاركة الموضوع

انسخ كود الشكل الذى تريده وضعه فى تعليق
اذا كنت لا تملك حساب على بلوجر قم بإختيار التعليق باسم " مجهول "
تعليقات بلوجر
تعليقات الفيس بوك

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

إرسال تعليق

مساحة إعلانية متجاوبة

مواضيع مميزة

التعليقات

إحصائيات المدونة

  • عدد المواضيع :

  • عدد التعليقات :

  • عدد المشاهدات :

المتابعون

اشترك ليصلك كل جديد

  • الإشعارات
  • من نحن

  • اتصل بنا

  • ×

ادخل الاسم (إختيارى)

ادخل البريد الإلكترونى (مطلوب)

ادخل الرسالة (مطلوب)