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

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

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

معاينه

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

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

.pricing-tablebox {display: flex;width: 100%;font-family: tajawal;}
.pricing-columncon {width: 100%; transition: transform 0.3s ease-in-out;margin-bottom: 20px;}  
.pricing-column {text-align: center;border-radius: 25px;box-shadow: rgb(71 75 255 / 10%) 0px 2px 4px;position: relative;overflow: hidden;transform: translateY(0);display: flex;flex-direction: column;align-content: center;flex-wrap: wrap;width: calc(100% - 10px);}
.pricing-column.one {border: 1px solid #10aeb0;}
.pricing-column.two {border: 1px solid #fbc37a;}
.pricing-column.three {border: 1px solid #ee5285;}
.pricing-columncon:hover {transform: translateY(-10px);}
p.pricing-header.two.s:after{content:"";background:none}
p.pricing-header {padding: 12px;border-radius: 28px;width: fit-content;margin: 0;color:#fff;box-shadow: 0px 10px 30px 0px rgb(11 121 107 / 53%);background-image:linear-gradient( 270deg, #07acb2 0.2%, #53bca7);}
p.pricing-header.two {background-image: linear-gradient( 90.1deg, #f59878 0.2%, #fdca7b 99.9% ); box-shadow: 0px 10px 30px 0px #f7a37982;}
p.pricing-header.three {background-image: linear-gradient( 90.1deg, #f4806f 0.2%, #ee4d88);    box-shadow: 0px 10px 30px 0px #ee4d8859;}
p.price {color: #17b0b0;font-size: 60px;font-weight: bold;margin-top: 20px;}  
p.price.two {color: #f7a379;}
p.price.three {color: #ee4d88;}
p.price.one:before,p.price.two:before,p.price.three:before {content: "\f154";font-size: 30px;position: absolute;margin-right: -15px;font-weight: 700;font-family: fontawesome;}
p.price.one:before {color: #4dbba8;}
p.price.two:before {color: #fbc17a;}
p.price.three:before {color: #f0647c;}
ul.features li:after {font-family:fontawesome;content: '\f058';color: #0b7764; }
ul.features.one li:after {color: #12aeb0; }ul.features.two li:after {color: #f7a379; }ul.features.three li:after {color: #ee4d88; }
ul.features {display: flex;flex-direction: column;direction: ltr;align-items: flex-end;margin-bottom: 40px;margin-top: -70px;font-size: 14px;list-style:none}
.btn {background-image: linear-gradient( 270deg, #07acb2 0.2%, #53bca7);color: #fff;padding: 3px 40px;border-radius: 30px;position: absolute;display: flex;justify-content: center;margin-top: -20px;}
.btn.two {background-image: linear-gradient( 90.1deg, #f59878 0.2%, #fdca7b 99.9% )}
.btn.three {background-image: linear-gradient( 90.1deg, #f4806f 0.2%, #ee4d88);}
.pricing-btn {display: flex;justify-content: center;}
i.fa-solid{ margin: 20px;font-size: 65px;}
i.fa-solid.fa-briefcase{color: #17b0b0;}
i.fa-solid.fa-rocket {color: #f7a379;}
i.fa-solid.fa-paper-plane{color: #ee4d88;}
p.pricing-header.two:after {right: 10px;content: "الاكثر شهره";position: absolute;color: #fff;top: 3px;background: #f69d78;font-size: 10px;padding: 4px;border-radius: 20px;}
.pricing-header {display: flex;flex-wrap: wrap;align-items: flex-start;align-content: flex-start;justify-content: center;}
.btn:before {content: "\f07a";font-family: 'FontAwesome';margin-right: 3px;transition: .3s;}
.btn:hover::before {transform: translateX(10px);}
@media screen and (max-width: 580px) {.pricing-tablebox {flex-direction: column;}.pricing-header {display: flex;flex-wrap: wrap;justify-content: center;align-content: center;align-items: center;}.btn {margin-top: -25px;padding: 7px 40px;}}

اضافه كود HTML

3. قم بالدخول الى الصفحه التى تريد وضع الزر بها واضف بها الكود التالى

<div class="pricing-tablebox">
    <div class="pricing-columncon">
        <div class="pricing-column one">
            <i class="fa-solid fa-briefcase"></i>
            <div class="pricing-header"><p class="pricing-header one">الحزمه المبتدئه</p></div>
            <p class="price one">80</p>
            <ul class="features one">
                <li>استبدل النص هنا</li>
                <li>استبدل النص هنا</li>
                <li>استبدل النص هنا</li>
                <li>استبدل النص هنا</li>
            </ul>
        </div>
        <div class="pricing-btn">
            <a href="#" class="btn one" target="_blank">شراء</a>
        </div>
    </div>
    <div class="pricing-columncon">
        <div class="pricing-column two">
            <i class="fa-solid fa-rocket"></i>
            <div class="pricing-header"><p class="pricing-header two">الحزمه المتوسطه</p></div>
            <p class="price two">110</p>
            <ul class="features two">
                <li>استبدل النص هنا</li>
                <li>استبدل النص هنا</li>
                <li>استبدل النص هنا</li>
                <li>استبدل النص هنا</li>
            </ul>
        </div>
        <div class="pricing-btn">
            <a href="#" class="btn two" target="_blank">شراء</a>
        </div>
    </div>
    <div class="pricing-columncon">
        <div class="pricing-column three">
            <i class="fa-solid fa-paper-plane"></i>
            <div class="pricing-header"><p class="pricing-header three">الحزمه المتقدمه</p></div>
            <p class="price three">150</p>
            <ul class="features three">
                <li>استبدل النص هنا</li>
                <li>استبدل النص هنا</li>
                <li>استبدل النص هنا</li>
                <li>استبدل النص هنا</li>
            </ul>
        </div>
        <div class="pricing-btn">
            <a href="#" class="btn three" target="_blank">شراء</a>
        </div>
    </div>
</div>

4. قم بالبحث عن وسم </head> ثم اضف الكود التالى اعلى الوسم

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>

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

price box .zip 3.88KB

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