السلام عليكم ، في هذا المقال ، سأشارك معكم طريقة إضافة جدول التسعير في مدونة بلوجر.
جدول التسعير الذي سنتعرف عليه اليوم عبارة عن برنامج CSS وهذا يعني أنه مكون في استخذامه HTML و CSS فقط لإنشاء هذا الجدول البسيط. وهذا كل تم استعماله لصنع جدول التسعير أو بطاقة الخدمات.
إذا كنت ترغب في تثبيت جدول التسعير على مدونتك، فتابع قراءة المنشور بالكامل واتبع الخطوات لكي لا يحدث معك أي خطأ أثناء التركيب.
ماهو جدول التسعير:
جدول التسعير هو أحد الأدوات التي يمكنك من خلالها عرض منتجاتك أو الخدمات التي تقدمها على موقعك بسهولة. بالتأكيد صادفت هذه الاداة من قبل في احدى المواقع، فهي تعرض الخدمة أو المنتج مع السعر وتعريف مختصر له، تم الإعتماد على html و css في تصميم جدول التسعير دون الحاجة الى استعمال JavaScript والتي تؤثر بشكل سلبي على سرعة الموقع والصفحة، لهذا لا تقلق بشأن تأثير الأداة على سرعة الصفحة.
كيفية إضافة جدول التسعير :
الخطوة 1: انتقل إلى حسابك في بلوجر.
الخطوة 2: انتقل إلى قائمة المظهر.
الخطوة 3: ثم انقر فوق تعديل Html .
الخطوة 4: انسخ الكود التالي وضعه فوق </head> .
<style type='text/css'>
/* This TableBy https://www.tikniya.xyz */
:root {
--yellow-color: #ffd861;
--green-color: #43ef8b;
--ribbon-color: #a26bfa;
--basic-background: #ffecb3;
--premium-background: #d0b3ff;
--ultimate-background: #baf8d4;}
.ti9niyaWrapper{max-width: 1090px;width: 100%;margin: auto;display: flex;flex-wrap: wrap;justify-content: space-between;}
.ti9niyaWrapper .ti9niyaTable{background: #fff;width: calc(33% - 20px);padding: 30px 30px;position: relative;box-shadow: 0 5px 10px rgba(0,0,0,0.1);}
.ti9niyaTable .price-section{display: flex;justify-content: center;}
.ti9niyaTable .ti9niya-Price-area{height: 120px;width: 120px;border-radius: 50%;padding: 2px;}
.ti9niya-Price-area .inner-area{height: 100%;width: 100%;border-radius: 50%;border: 3px solid #fff;line-height: 117px;text-align: center;color: #fff;position: relative;}
.ti9niya-Price-area .inner-area .text{font-size: 25px;font-weight: 400;position: absolute;top: -10px;left: 17px;}
.ti9niya-Price-area .inner-area .price{font-size: 45px;font-weight: 500;margin-left: 16px;}
.ti9niyaTable .ti9niya-Package-name{width: 100%;height: 2px;margin: 35px 0;position: relative;}
.ti9niyaTable .ti9niya-Package-name::before{position: absolute;top: 50%;left: 50%;font-size: 25px;font-weight: 500;background: #fff;padding: 0 15px;transform: translate(-50%, -50%);}
.ti9niyaTable .features li{margin-bottom: 15px;list-style: none;display: flex;justify-content: space-between;}
.features li .list-name{font-size: 17px;font-weight: 400;}
.features li .icon{font-size: 15px;}
.features li .icon.check{color: #2db94d;}
.features li .icon.cross{color: #cd3241;}
.ti9niyaTable .btn{width: 100%;display: flex;margin-top: 35px;justify-content: center;}
.ti9niyaTable .btn button{width: 80%;height: 50px;color: #fff;font-size: 20px;font-weight: 500;border: none;outline: none;border-radius: 25px;cursor: pointer;transition: all 0.3s ease;}
.ti9niyaTable .btn button:hover{border-radius: 5px;}
.ti9niya-Basic .features li::selection{background: var(--yellow-color);}
.ti9niya-Basic ::selection,
.ti9niya-Basic .ti9niya-Price-area,
.ti9niya-Basic .inner-area{background: var(--yellow-color);}
.ti9niya-Basic .btn button{border: 2px solid var(--yellow-color);background: #fff;color: var(--yellow-color);}
.ti9niya-Basic .btn button:hover{background: var(--yellow-color);color: #fff;}
.ti9niya-Premium ::selection,
.ti9niya-Premium .ti9niya-Price-area,
.ti9niya-Premium .inner-area,
.ti9niya-Premium .btn button{background: var(--ribbon-color);}
.ti9niya-Premium .btn button:hover{background: #833af8;}
.ti9niya-Ultimate ::selection,
.ti9niya-Ultimate .ti9niya-Price-area,
.ti9niya-Ultimate .inner-area{background: var(--green-color);}
.ti9niya-Ultimate .btn button{border: 2px solid var(--green-color);color: var(--green-color);background: #fff;}
.ti9niya-Ultimate .btn button:hover{background: var(--green-color);color: #fff;}
.ti9niya-Basic .ti9niya-Package-name{background: var(--basic-background);}
.ti9niya-Premium .ti9niya-Package-name{background: var(--premium-background);}
.ti9niya-Ultimate .ti9niya-Package-name{background: var(--ultimate-background);}
.ti9niya-Basic .ti9niya-Package-name::before{content: "اساسي";}
.ti9niya-Premium .ti9niya-Package-name::before{content: "ممتاز";font-size: 24px;}
.ti9niya-Ultimate .ti9niya-Package-name::before{content: "خبير";font-size: 24px;}
@media (max-width: 1020px) {.ti9niyaWrapper .ti9niyaTable{width: calc(50% - 20px);margin-bottom: 40px;}}
@media (max-width: 698px) {.ti9niyaWrapper .ti9niyaTable{width: 100%;}}
::selection{color: #fff;}
.ti9niyaTable .ribbon{width: 150px;height: 150px;position: absolute;top: -10px;left: -10px;overflow: hidden;}
.ti9niyaTable .ribbon::before,
.ti9niyaTable .ribbon::after{position: absolute;content: "";z-index: -1;display: block;border: 7px solid #4606ac;border-top-color: transparent;border-left-color: transparent;}
.ti9niyaTable .ribbon::before{top: 0px;right: 15px;}
.ti9niyaTable .ribbon::after{bottom: 15px;left: 0px;}
.ti9niyaTable .ribbon span{position: absolute;top: 30px;right: 0;transform: rotate(-45deg);width: 200px;background: var(--ribbon-color);padding: 10px 0;color: #fff;text-align: center;font-size: 17px;text-transform: uppercase;box-shadow: 0 5px 10px rgba(0,0,0,0.12);}
</style>
الخطوة 5: قم بحفظ الموضوع.
الخطوة 6: الآن انسخ كود التالي لجدول التسعير والصق كود HTML في الصفحة التي تريد.
<div class="ti9niyaWrapper">
<div class="ti9niyaTable ti9niya-Basic">
<div class="price-section">
<div class="ti9niya-Price-area">
<div class="inner-area">
<span class="text">$</span><span class="price">20</span></div></div></div>
<div class="ti9niya-Package-name"></div>
<ul class="features"><li>
<span class="list-name">قالب واحد بلوجر</span></li><li>
<span class="list-name">100٪ تصميم مستجيب</span></li><li>
<span class="list-name">إزالة الحقوق</span></li><li>
<span class="list-name">تحديثات قالب مستمرة</span> </li></ul>
<div class="btn"><button>شراء</button></div></div>
<div class="ti9niyaTable ti9niya-Premium">
<div class="ribbon"><span>موصى به</span></div>
<div class="price-section">
<div class="ti9niya-Price-area">
<div class="inner-area">
<span class="text">$</span><span class="price">50</span></div></div></div>
<div class="ti9niya-Package-name"></div><ul class="features"><li>
<span class="list-name">خمسة قوالب بلوجر</span></li><li>
<span class="list-name">100٪ تصميم مستجيب</span></li><li>
<span class="list-name">إزالة الحقوق</span></li><li>
<span class="list-name">تحديثات قالب مستمرة</span> </li></ul>
<div class="btn"><button>شراء</button></div></div>
<div class="ti9niyaTable ti9niya-Ultimate">
<div class="price-section">
<div class="ti9niya-Price-area">
<div class="inner-area">
<span class="text">$</span><span class="price">90</span></div></div></div>
<div class="ti9niya-Package-name"></div>
<ul class="features">
<li><span class="list-name">جميع القوالب المتوفرة</span></li><li>
<span class="list-name">100٪ تصميم مستجيب</span></li><li>
<span class="list-name">إزالة الحقوق</span></li><li>
<span class="list-name">تحديثات قالب مستمرة</span></li></ul>
<div class="btn"><button>شراء</button></div></div> </div>
لقد قمت بمشاركة طريقة إضافة جدول التسعير بسيط لمدونة Blogger معكم، اذا اعجبك المقال لا تنسى متابعة المدونة ، وإذا كان لديك أي سؤال فيمكنك تركه في التعليق. شكرا لزيارة موقعنا.
اذا كانت مواضيعنا تعجبك. قم بدعمنا والتبرع بمبلغ صغير لنسمر في المزيد.
