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

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


اضافة جدول تسعير متجاوب الى مدونة بلوجر فمن خلال هذا الجدول يمكنك عرض خدماتك مع اضافه ميزاتك بشكل مميز وجاذب للزائر كما أنه تم وضع بعض التأثيرات الى الجدول لزيادة الشكل الجمالي الخاص به ويمكنك استخدام الجدول على جميع مدونات بلوجر لانه تم إنشاؤها بلغات برمجية معروفه ومشهوره وسهله الاستخدام.

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

معاينه

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

1.قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيار المظهر ثم تعديل html
2.قم بالبحث عن وسم ]]></b:skin> ثم اضف الكود التالى اعلى الوسم     

.pricingTable{text-align:center;background:#fff;margin:0px;box-shadow:0 0 10px #ababab;padding-bottom:40px;border-radius:10px;color:#cad0de;transform:scale(1);transition:all .5s ease 0s;font-family:tajawal}
.pricingTable:hover{transform:scale(1.05);z-index:1}
.pricingTable .pricingTable-header{padding:40px 0;background:#f5f6f9;border-radius:10px 10px 50% 50%;transition:all .5s ease 0s}
.pricingTable:hover .pricingTable-header{background:#ff9624}
.pricingTable .pricingTable-header i{font-size:50px;color:#858c9a;margin-bottom:10px;transition:all .5s ease 0s}
.pricingTable .price-value{font-size:35px;color:#ff9624;transition:all .5s ease 0s}
.pricingTable .month{display:block;font-size:14px;color:#cad0de}
.pricingTable:hover .month,.pricingTable:hover .price-value,.pricingTable:hover .pricingTable-header i{color:#fff}
.pricingTable .heading{font-size:24px;color:#ff9624;margin-bottom:20px;text-transform:uppercase}
.pricingTable .pricing-content ul{list-style:none;padding:0;margin-bottom:30px}
.pricingTable .pricing-content ul li{line-height:30px;color:#a7a8aa}
.pricingTable .pricingTable-signup a{display:inline-block;font-size:15px;color:#fff;padding:10px 35px;border-radius:20px;background:#ffa442;text-transform:uppercase;transition:all .3s ease 0s}
.pricingTable .pricingTable-signup a:hover{box-shadow:0 0 10px #ffa442}
.pricingTable.blue .heading,.pricingTable.blue .price-value{color:#4b64ff}
.pricingTable.blue .pricingTable-signup a,.pricingTable.blue:hover .pricingTable-header{background:#4b64ff}
.pricingTable.blue .pricingTable-signup a:hover{box-shadow:0 0 10px #4b64ff}
.pricingTable.green .heading,.pricingTable.green .price-value{color:#40c952}
.pricingTable.green .pricingTable-signup a,.pricingTable.green:hover .pricingTable-header{background:#40c952}
.pricingTable.green .pricingTable-signup a:hover{box-shadow:0 0 10px #40c952}
  h3.heading {font-family: tajawal;}
.pricingTable.blue:hover .price-value,.pricingTable.green:hover .price-value{color:#fff}
  .col-md-3.col-sm-6 {padding-left: 10px;width:33.33%}
  .row {display: flex;}
a{text-decoration:none}
@media screen and (max-width:550px){.row {display: contents;}.col-md-3.col-sm-6 {width: 100%;margin-top: 20px;}}

3.قم بنسخ الكود التالى  واضفه فى صفحه المقال

<div class="row">
<div class="col-md-3 col-sm-6">
<div class="pricingTable">
<div class="pricingTable-header">
<i class="fa fa-adjust"></i>
<div class="price-value"> 10.00$ <span class="month">فى الشهر</span> </div>
      </div>
<h3 class="heading">العاديه</h3>
<div class="pricing-content">
 <ul>
  <li><b>50GB</b> مساحه تخزينيه</li>
  <li><b>50</b> حسابات البريد الإلكتروني</li>
  <li><b>50GB</b> عرض النطاق الشهري</li>
  <li><b>10</b> المجالات الفرعية</li>
  <li><b>15</b> المجالات</li>
 </ul></div>
 <div class="pricingTable-signup">
  <a href="#">اشتراك</a>
  </div></div></div>

<div class="col-md-3 col-sm-6">
<div class="pricingTable green">
<div class="pricingTable-header">
<i class="fa fa-briefcase"></i>
<div class="price-value"> 20.00$ <span class="month">فى الشهر</span> </div>
 </div>
<h3 class="heading">الاعمال</h3>
 <div class="pricing-content">
  <ul>
   <li><b>60GB</b> مساحه تخزينيه</li>
   <li><b>60</b> حسابات البريد الإلكتروني</li>
   <li><b>60GB</b> عرض النطاق الشهري</li>
   <li><b>15</b> المجالات الفرعية</li>
   <li><b>20</b> المجالات</li>
  </ul></div>
<div class="pricingTable-signup">
  <a href="#">اشتراك</a>
  </div></div></div>
 <div class="col-md-3 col-sm-6">
 <div class="pricingTable blue">
 <div class="pricingTable-header">
  <i class="fa fa-diamond"></i>
   <div class="price-value"> 30.00$ <span class="month">فى الشهر</span> </div>
 </div>
  <h3 class="heading">الممتازة</h3>
  <div class="pricing-content">
  <ul>
   <li><b>70GB</b> مساحه تخزينيه</li>
   <li><b>70</b> حسابات البريد الإلكتروني</li>
   <li><b>70GB</b> عرض النطاق الشهري</li>
   <li><b>20</b> المجالات الفرعية</li>
   <li><b>25</b> المجالات</li>
  </ul>
 </div>
<div class="pricingTable-signup">
 <a href="#">اشتراك</a>
</div></div></div>
</div>
4.قم بالبحث عن وسم </body> واضف الكود التالى اعلى الوسم
<script crossorigin='anonymous' src='https://kit.fontawesome.com/5479da0db5.js'/>

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

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

pricing table.zip 1.23KB

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

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

إرسال تعليق