طريقة إضافة صندوق مراجعة وتقييم المنتجات لمدونات بلوجر
تطوير بلوجر تطوير ويب
إلى كل مدون على منصة بلوجر وخصوصا أولئك الذين لديهم مدونات متخصصة في مراجعة وتقييم المنتجات, في هذا المقال، مدمن ويب سيقدم لكم ميزة مميزة جدا لجعل مواضيعكم أكثر تميزا وإحترافية، من خلال إضافة صندوق لتقييم المنتجات وبشكل إحترافي جدا.
كما أن صندوق مراجعة وتقييم المنتجات تم تصميمه بإحترافيه (بأكواد HTML و CSS فقط) ليتوافق مع جميع المدونات وللعرض على مختلف الشاشات بشكل متجاوب ومميز ولا يحتاج إلى جافا سكربت كما أن طريقة تركيبه بسيطة جدا وبإمكان أي شخص أن يضيفها إلى مدونته على بلوجر.
يمكنكم مشاهدة مثال لصندوق مراجعة وتقييم المنتجات من هنا
تنبيه:
لاتنسى أخذ نسخة إحتياطية للقالب قبل تطبيق هذا الدرس، كي تتمكن من إستعادة القالب في حال ظهور أي مشاكل أو أخطآء بعد تطبيق هذا الدرس.
إقرأ أيضا :
كيفية إضافة صندوق مراجعة وتقييم المنتجات في المواضيع لمدونات بلوجر
بداية، إفتح بلوجر> ثم إذهب إلى المظهر (Theme) > ثم > تحرير HTML.
واضف الكود التالي داخل كود الاستايل أي قبل كود الإغلاق </style>
.border {
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
.mb-rating-3 {
margin-bottom: 1rem !important;
}
.pb-rating {
padding: 1rem !important;
}
.rounded {
border-radius: 0.25rem !important;
}
@media (min-width: 768px){
.p-rating {
padding: 2rem !important;
}}
.d-rating {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
align-items: center;
}
.rating-list {
display: flex;
align-items: center;
margin-top: 1.5rem !important;
margin-bottom: 1rem !important;
}
.percentage-rating {
margin-left: 1rem !important;
}
.text-rating {
color: #2163e8 !important;
}
.rounded-circle {
border-radius: 50% !important;
}
.bg-rating-soft {
background-color: rgba(33, 99, 232, 0.1) !important;
}
.icon-rating {
width: 5rem;
height: 5rem;
line-height: 5rem;
text-align: center;
font-size: 1.9rem;
/*font-weight:bold;*/
}
@-webkit-keyframes progress-bar-stripes {
0% {
background-position-x: 1rem;
}
}
@keyframes progress-bar-stripes {
0% {
background-position-x: 1rem;
}
}
.progress {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 1rem;
overflow: hidden;
font-size: 0.75rem;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 0.25rem;
}
.progress {
position: relative;
overflow-x: visible;
overflow-y: visible;
}
.progress.progress-md {
height: 12px;
}
.progress-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
color: #fff;
text-align: center;
white-space: nowrap;
background-color: #0d6efd;
-webkit-transition: width 0.6s ease;
transition: width 0.6s ease;
}
h5, .h5 {
font-size: 0.9375rem;
}
.progress-bar-striped {
background-image: linear-gradient(
-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
}
.progress-bar-animated {
-webkit-animation: 1s linear infinite progress-bar-stripes;
animation: 1s linear infinite progress-bar-stripes;
}
@media (prefers-reduced-motion: reduce) {
.progress-bar-animated {
-webkit-animation: none;
animation: none;
}
}
.rating-price {
background-color:#4f9ef8 !important;
}
.progress .progress-bar {
position: relative;
overflow: visible;
border-radius: 0.25rem;
}
.progress .progress-percent {
color: #595d69;
font-weight: 500;
line-height: 24px;
position: absolute;
left: 0;
top: -24px;
font-size: 12px;
}
.progress.progress-percent-bg .progress-percent {
background: #444;
padding: 2px 4px;
border-radius: 2px;
color: #fff;
line-height: 18px;
position: absolute;
left: 0;
top: -27px;
font-size: 14px;
}
.progress.progress-percent-bg .progress-percent:before {
border-top-color: #595d69;
border-width: 5px;
right: 50%;
margin-right: -5px;
}
.progress.progress-percent-bg .progress-percent:after, .progress.progress-percent-bg .progress-percent:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.progress.progress-percent-bg .progress-percent:after {
border-top-color: #595d69;
border-width: 4px;
right: 50%;
margin-right: -4px;
}
.bg-design {
background-color: #f7c32e !important;
}
.bg-quality {
background-color: rgba(12, 188, 135, 100%) !important;
}
.bg-preformance {
background-color: #444 !important;
}
.g-button {
display: grid !important;
justify-items: center;
}
.btn-rating {
display: inline-block;
font-weight: 500;
line-height: 1.5;
color: #595d69;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.5rem 1rem;
font-size: 0.9375rem;
border-radius: 0.25rem;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
font-family: 'Tajawal', sans-serif!important;
}
.btn-primary {
color: #fff;
background-color: #2163e8;
border-color: #2163e8;
}
.btn-lg, .btn-group-lg > .btn-rating {
padding: 0.8rem 1.5rem;
font-size: 1rem;
border-radius: 0.2rem;
}
.rounded {
border-radius: 0.25rem !important;
}
.btn-rating {
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
outline: 0;
white-space: nowrap;
margin-bottom: 6px;
}
button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) {
cursor: pointer;
}
.fa, .fab, .fad, .fal, .far, .fas {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
.fab {
font-family: "Font Awesome 5 Brands";
}
.fab, .far {
font-weight: 400;
}
.ms-2 {
margin-right: 0.5rem !important;
vertical-align: middle;
font-size:22px;
}
.fa-amazon:before {
content: "\f270";
}
.btn-primary:hover {
color: #fff;
background-color: #1c54c5;
border-color: #1a4fba;
}
الخطوة الثانية: انسخ الكود التالي مع تعديل عنوان ومحتوى الصندوق كما تريد وأضفه لمحرر HTML (عرض HTML) بمواضيع بلوجر الذي تريد أن يظهر فيه الصندوق.
<div id="item-5">
<div class="border pb-rating p-rating rounded mb-rating-3">
<h3>تقييم المنتج</h3>
<div class="d-rating rating-list">
<div class="percentage-rating">
<div class="icon-rating rounded-circle bg-rating-soft text-rating">8.5</div>
</div>
<p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
</p>
</div>
<!-- Progress bar item -->
<h5 class="rating-list">السعر</h5>
<div class="progress progress-percent-bg progress-md">
<div class="progress-bar progress-bar-striped progress-bar-animated rating-price" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"><span class="progress-percent">8.0</span></div>
</div>
<!-- Progress bar item -->
<h5 class="rating-list">التصميم</h5>
<div class="progress progress-percent-bg progress-md">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-design" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"><span class="progress-percent">7.5</span></div>
</div>
<!-- Progress bar item -->
<h5 class="rating-list">الجودة</h5>
<div class="progress progress-percent-bg progress-md">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-quality" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"><span class="progress-percent">9.5</span></div>
</div>
<!-- Progress bar item -->
<h5 class="rating-list">الأدآء</h5>
<div class="progress progress-percent-bg progress-md">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-preformance" role="progressbar" style="width: 82%" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"><span class="progress-percent">8.2</span></div>
</div>
</div>
<div class="g-button">
<button class="btn-rating btn-primary btn-lg rounded" type="button">إشتر المنتج الآن من أمازون<i class="fab fa-amazon ms-2"></i></button>
</div>
</div>
</div>
الخلاصة
كان هذا شرح حصري من مدمن ويب حول طريقة إضافة صندوق مراجعة وتقييم المنتجات لمدونات بلوجر بدون أي سكربتات وإنما فقط من خلال كود CSS لمدونات بلوجر.
إذا واجهتك أي مشاكل أو صعوبات أو أخطآء خلال تطبيق هذا الشرح، لاتتردد بالاستفسار وطرح مشكلتك في التعليقات أسفل هذه الصفحة، وسأحرص على مساعدتك والرد عليك في أسرع وقت إن شاء الله.
