اضافه جدول التسعير الى مدونه بلوجر

اضافه جدول التسعير الى مدونه بلوجرحيث يمكنك استخدام  هذه الاداه لاضافه خدماتك  على مدونه بلوجر  باستخدام هذه الأداة ، سيجد المشترون المحتملون للخدمات والمنتجات أنه من الأسهل رؤية الأسعار .

 كما ان هذه الاداه يمكن تثبيتها على الصفحة الأولى للمدونات وصفحات المقالات ، المظهر الحديث والبسيط يجعل هذه الأداة سهلة التعديل حسب الذوق.

وتم تكويد هذه الاضافه بلغتى html وcss ويمكنك معاينه الاضافه من خلال الزر التالى

معاينه

طريقه اضافه جدول التسعير الى مدونه بلوجر    

1.قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيارالمظهرثم تعديل html
2.قم بالبحث عن وسم ]]></b:skin> ثم اضف الكود التالى اعلى الوسم     
.pricing {position: relative;width: 100%;text-align: center;}
.pricing .container-pricing {display: flex;grid-gap: 30px;margin: 30px auto 0;}
.sec-pricing{padding:30px;margin:0 0 20px;position:relative;box-shadow:0 3px 20px 0 rgba(0,0,0,0.15);border-radius:5px;background:#fff;transition:all .2s ease-in-out;border-top:4px solid #fff;font-family:tajawal;}
.sec-pricing:hover{transform:translateY(-10px);box-shadow:0 3px 20px 0 rgba(0,0,0,0.25);border-color: #16967f}
.sec-pricing .rate{font-size:50px;margin:15px 0;background:linear-gradient(to left, #16967f,#18c8a8);color:#fff;width:100px;height:100px;line-height:2;border-radius:100%}
.sec-pricing{box-shadow:none;border:1px solid #ddd;width: 33%;}
.sec-pricing h3{color:#111;font-size:20px;font-weight:700;font-family:tajawal;}
.sec-pricing p{font-size:15px;color:#555}
.sec-pricing .rate{font-size:25px;font-weight:700;line-height:4;display:inline-block}
.pricing a.button{box-shadow:none;background:linear-gradient(to left, #16967f,#f0b651)}
.pricing-button{display:inline-flex;align-items:center;margin:15px 0 15px 15px;padding:10px 20px;outline:0;border:0;color:#fefefe;background-color:#16967f;border-radius:3px;font-size:18px;line-height:22px;text-decoration:none}
a.pricing-button:hover{transform:scale(1.1)}
.sec-pricing.aktif,.sec-pricing:hover{box-shadow:0 3px 20px 0 rgba(0,0,0,0.15);border-color:#ddd;border-top:4px solid  #16967f}
@media screen and (max-width:320px){.sec-pricing {width: 100%;}
  .pricing .container-pricing {grid-gap: 30px;margin: 30px auto 0;display: contents;}
  }
  @media screen and (max-width:595px){.sec-pricing {width: 100%;}
  .pricing .container-pricing {grid-gap: 30px;margin: 30px auto 0;display: contents;}
  }
3.قم بنسخ الكود التالى  واضفه فى صفحه المقال
<div class="pricing">
<div class="container-pricing">
<div class="sec-pricing">
<h3>عادى</h3>
<span class="rate">15$</span>
<p>تصميم جرافيك</p>
<p>تصميم المواقع</p>
<p>الدعم</p>
<p>-</p>
<p>-</p>
<p>-</p>
<a class="pricing-button" href="#" title="Buy Now">شراء الان</a>
</div>
  
<div class="sec-pricing aktif">
<h3>بلس</h3>
<span class="rate">60$</span>
<p>تصميم جرافيك</p><p>تصميم المواقع</p>
<p>دعم كامل</p>
<p>المظاهر</p>
<p>-</p>
  <p>-</p>
<a class="pricing-button" href="#" title="Buy Now">شراء الان</a>
</div>
  
<div class="sec-pricing">
<h3>برو</h3>
<span class="rate">100$</span>
<p>تصميم جرافيك</p><p>تصميم المواقع</p>
<p>دعم كامل</p>
<p>المظاهر</p>
<p>مجال غير محدود</p>
<p>-</p>
<a class="pricing-button" href="#" title="Buy Now">شراء الان</a>
</div>
</div>
</div>

تحميل الاكواد

pricing table.zip 481B

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

الاسم احمد منصور امتلك خبره اكثر من ثلاث سنوات فى مجال التدوين مهتم بمجال التدوين والبرمجه

إرسال تعليق