1. هذا الموقع يستخدم ملفات تعريف الارتباط (الكوكيز ). من خلال الاستمرار في استخدام هذا الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط. تعرف على المزيد.
  2. مرحبا بك في Taswiqnet، يمكنك طرح ومناقشة مختلف مواضيع التسويق عبر الانترنت أو تقديم عروض خاصة ان كنت من اصحاب الخدمات. اشترك الان!
    إستبعاد الملاحظة
  3. حصريا على مجتمع المسوقين العرب تقوم إدارة المنتدى بإجراء قرعة للحصول على دومين مجاني لمدة سنة، جرب حظك!
  4. إضافة ووردبريس مرخصة لبناء صفحات الهبوط، يمكنك الحصول عليها مجانا فقط على مجتمع المسوقين العرب
  5. القوانين وضعت لتنظيم سير المنتدى فيرجى التقيد بها، كل موضوع لايتماشى مع القوانين سيتم حذفه دون سابق إنذار

شرح بسيط يوضح كيفية اضافة ازرار معاينة و تحميل بتقنية جديدة

الموضوع في 'تطوير المواقع' بواسطة مشرف, بتاريخ ‏7 ديسمبر 2015.

  1. مشرف

    مشرف مسوق جديد

    السلام عليكم ورحمة الله وبركات
    نقدم لكم اليوم شرح بسيط يوضح كيفية اضافة ازرار معاينة و تحميل بتقنية جديدة

    [​IMG]


    1.الان قم بالدخول إلى لوحة تحكم المدونة
    2.اختر قالب
    3.ثم انقر فوق تحرير HTML


    اولا يجب تركيب كود font-awesome ابحث عن الوسم </head> في البحث و اضف الكود التالي فوقه


    كود:
    <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>


    الان ابحث عن الوسم ]]></b:skin> في البحث و اضف الكود التالي فوقه

    كود:
    #wrap {
        margin: 20px auto;
        text-align: center;
    }
    
    #wrap br {
        display: none;
    }
    
    .btn-slide, .btn-slide2 {
        position: relative;
        display: inline-block;
        height: 50px;
        width: 200px;
        line-height: 50px;
        padding: 0;
        border-radius: 50px;
        background: #fdfdfd;
        border: 2px solid #0099cc;
        margin: 10px;
        transition: .5s;
    }
    
    .btn-slide2 {
        border: 2px solid #efa666;
    }
    
    .btn-slide:hover {
        background-color: #0099cc;
    }
    
    .btn-slide2:hover {
        background-color: #efa666;
    }
    
    .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
        right: 100%;
        margin-right: -45px;
        background-color: #fdfdfd;
        color: #0099cc;
    }
    
    .btn-slide2:hover span.circle2 {
        color: #efa666;
    }
    
    .btn-slide:hover span.title, .btn-slide2:hover span.title2 {
        right: 40px;
        opacity: 0;
    }
    
    .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
        opacity: 1;
        right: 40px;
    }
    
    .btn-slide span.circle, .btn-slide2 span.circle2 {
        display: block;
        background-color: #0099cc;
        color: #fff;
        position: absolute;
        float: right;
        margin: 5px;
        line-height: 42px;
        height: 40px;
        width: 40px;
        top: 0;
        right: 0;
        transition: .5s;
        border-radius: 50%;
    }
    
    .btn-slide2 span.circle2 {
        background-color: #efa666;
    }
    
    .btn-slide span.title,
      .btn-slide span.title-hover, .btn-slide2 span.title2,
      .btn-slide2 span.title-hover2 {
        position: absolute;
        right: 90px;
        text-align: center;
        margin: 0 auto;
        font-size: 16px;
        font-weight: bold;
        color: #30abd5;
        transition: .5s;
    }
    
    .btn-slide2 span.title2,
      .btn-slide2 span.title-hover2 {
        color: #efa666;
        right: 80px;
      }
    
    .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
        right: 80px;
        opacity: 0;
    }
    
    .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
        color: #fff;
    ✔ كيفية استخدام الازرار في المواضيع



    عند كتابة موضوع انتقل إلى وضع HTML

    كود:
    <div id="wrap">
    <a href="#" class="btn-slide">
      <span class="circle"><i class="fa fa-rocket"></i></span>
      <span class="title">معاينة</span>
      <span class="title-hover">اضغط للمعاينة</span>
    </a>
    <a href="#" class="btn-slide2">
      <span class="circle2"><i class="fa fa-download"></i></span>
      <span class="title2">تحميل</span>
      <span class="title-hover2">اضغط للتحميل</span>
    </a>
    </div>

     

مشاركة هذه الصفحة