السلام عليكم ورحمة الله وبركاته اضافة اليوم على مدونة عالم المدن هى اضافة قائمة احترافية لعرض خدماتك باربع اقسام مثل الذى سوف تجدها فى مدونتى وقد قمت باضافها منذ يومين تقريبا واليوم اقدمها لكم والإضافة بها اربع اقسام بشكل احترافى لعرض خدماتى مثل ما ان اقوم بعرض خدماتى على مومع خمسات والإضافة لا تحتاج معاينة ننتقل الى شرح التركيب.
شرح التركيب
- اولا قم باخذ نسخة من قالب مدونتك لعدم حدوث اى مشكلة
- قم بالبحث فى قالب مدونتك عن الوسم ]]></b:skin> ثم قم بوضع الكود التالى فوقه .
/* خدماتى على خمسات */
.plans-containerwdbloog{width:98.2%;margin:20px 19px 40px 22px;float:left;word-wrap:break-word;overflow:hidden}
li#osama-price{border-bottom:none;text-align:center;font-size:1.07rem;line-height:1.6em;transition:all .4s;margin:0 -1px 0 -1px}
li#osama-price1{border-bottom:none;text-align:center;font-size:1.07rem;line-height:1.6em;transition:all .4s;margin:0 -1px 0 -1px}
li#osama-price2{border-bottom:none;text-align:center;font-size:1.07rem;line-height:1.6em;transition:all .4s;margin:0 -1px 0 -1px}
li#osama-price3{border-bottom:none;text-align:center;font-size:1.07rem;line-height:1.6em;transition:all .4s;margin:0 -1px 0 -1px}
li.collection-item{border-bottom:none;text-align:center;font-size:1.07rem;line-height:1.6em;padding:10px;transition:all .4s;margin:0 -1px 0 -1px}
li.collection-item1{border-bottom:none;text-align:center;font-size:1.07rem;line-height:1.6em;padding:10px;transition:all .4s;margin:0 -1px 0 -1px}
li.collection-item2{border-bottom:none;text-align:center;font-size:1.07rem;line-height:1.6em;padding:10px;transition:all .4s;margin:0 -1px 0 -1px}
li.collection-item3{border-bottom:none;text-align:center;font-size:1.07rem;line-height:1.6em;padding:10px;transition:all .4s;margin:0 -1px 0 -1px}
article#osama-plans-1{border:1px solid #ccc;width:22.42%;float:right;margin-right:30px;margin-bottom:20px;background: #FFFFFF;}
article#osama-plans-2{border:1px solid #ccc;width:28%;float:right;margin-right:40px}
article#osama-plans-3{border:1px solid #ccc;width:28%;float:right;margin-right:40px}
.card-title{background:#F74047;padding:15px;color:#FFF;text-align:center;margin:0 -1px 0 -1px}
.card-title1{background:#4caf50;padding:15px;color:#FFF;text-align:center;margin:0 -1px 0 -1px}
.card-title2{background:#0B6EAB;padding:15px;color:#FFF;text-align:center;margin:0 -1px 0 -1px}
.card-title3{background:#9664b5;padding:15px;color:#FFF;text-align:center;margin:0 -1px 0 -1px}
.price{background:#0F4566;height:100px;padding:30px 0 0 0;text-align:center;color:#FFF;font-size:58px;margin:0 -1px 0 -1px;transition:all .4s}
.price1{background:#0F4566;height:100px;padding:30px 0 0 0;text-align:center;color:#FFF;font-size:58px;margin:0 -1px 0 -1px;transition:all .4s}
.price2{background:#0F4566;height:100px;padding:30px 0 0 0;text-align:center;color:#FFF;font-size:58px;margin:0 -1px 0 -1px;transition:all .4s}
.price3{background:#0F4566;height:100px;padding:30px 0 0 0;text-align:center;color:#FFF;font-size:58px;margin:0 -1px 0 -1px;transition:all .4s}
.price2{background:#0F4566;height:100px;padding:30px 0 0 0;text-align:center;color:#FFF;font-size:58px;margin:0 -1px 0 -1px;transition:all .4s}
.price3{background:#0F4566;height:100px;padding:30px 0 0 0;text-align:center;color:#FFF;font-size:58px;margin:0 -1px 0 -1px;transition:all .4s}
sup.p44rice1{font-size:35px}
sup.p44rice2{font-size:75px}
.card-actionwdbloog{background:#F74047;text-align:center;padding:15px;margin:0 -1px 0 -1px;transition:all .4s}
.card-actionwdbloog1{background:#4CAF50;text-align:center;padding:15px;margin:0 -1px 0 -1px;transition:all .4s}
.card-actionwdbloog2{background:#0B6EAB;text-align:center;padding:15px;margin:0 -1px 0 -1px;transition:all .4s}
.card-actionwdbloog3{background:#9664B5;text-align:center;padding:15px;margin:0 -1px 0 -1px;transition:all .4s}
.card-actionwdbloog:hover{background:#0F4566;color:#fff}
.card-actionwdbloog1:hover{background:#F74047;color:#fff}
.card-actionwdbloog2:hover{background:#F74047;color:#fff}
.card-actionwdbloog3:hover{background:#F74047;color:#fff}
.waves-wdbloog{color:#FFFFFF}
li#osama-price:hover{background:#F74047;color:#fff}
li#osama-price1:hover{background:#0F4566;color:#fff}
li#osama-price2:hover{background:#0B6EAB;color:#fff}
li#osama-price3:hover{background:#0F4566;color:#fff}
li.collection-item:hover{background:#0F4566;color:#fff}
li.collection-item1:hover{background:#4caf50;color:#fff}
li.collection-item2:hover{background:#0F4566;color:#fff}
li.collection-item3:hover{background:#9664b5;color:#fff}- الان مع الكود الخاص باظهار الإضافة على مدونتك ضع فى المكان الذى تريده
<!-- خدماتى على خمسات -->
<div class='plans-containerwdbloog'>
<article class='col s12 m6 l4' id='osama-plans-1'>
<div class='card hoverable'>
<div class='card-image purple waves-effect'>
<div class='card-title'>تعديل وتطوير وحل مشاكل قوالب بلوجر</div>
<div class='price'><sup class='p44rice1'>$</sup><sup class='p44rice2'>5</sup></div>
</div>
<div class='card-content'>
<ul class='collection'>
<li class='collection-item' id='osama-price'>تركيب الإضافات الحصرية</li>
<li class='collection-item'> حذف الأدوات الغير قابلة للحذف</li>
<li class='collection-item' id='osama-price'>تحسين الخطوط</li>
<li class='collection-item'>تحسين مظهر القالب</li>
<li class='collection-item' id='osama-price'>تغيير الألوان</li>
<li class='collection-item'>تركيب المساحات الإعلانية</li>
</ul>
</div>
<div class='card-actionwdbloog'>
<a href='https://khamsat.com/programming/css-html/512087' target='_blank'>
<div class='waves-wdbloog' href='https://khamsat.com/programming/css-html/512087' target='_blank'>اطلب الخدمة</div>
</a>
</div>
</div>
</article>
<article class='col s12 m6 l4' id='osama-plans-1'>
<div class='card hoverable'>
<div class='card-image purple waves-effect'>
<div class='card-title1'>إعلان على مدونة عالم المدون</div>
<div class='price1'><sup class='p44rice1'>$</sup><sup class='p44rice2'>5</sup></div>
</div>
<div class='card-content'>
<ul class='collection'>
<li class='collection-item1' id='osama-price1'>رابط نصي 5 دولار لمدة شهر </li>
<li class='collection-item1'>بانر 125x125 لمدة 20 يوم</li>
<li class='collection-item1' id='osama-price1'>بانر 300x250 لمدة 15 يوم</li>
<li class='collection-item1'>بانر 728X90 لمدة 10 أيام </li>
<li class='collection-item1' id='osama-price1'>شهر إضافي للروابط النصية</li>
<li class='collection-item1'>زوار يوميا</li>
</ul>
</div>
<div class='card-actionwdbloog1'>
<a href='https://khamsat.com/marketing/advertising/512054' target='_blank'>
<div class='waves-wdbloog' href='https://khamsat.com/marketing/advertising/512054' target='_blank'>اطلب الخدمة</div>
</a>
</div>
</div>
</article>
<article class='col s12 m6 l4' id='osama-plans-1'>
<div class='card hoverable'>
<div class='card-image purple waves-effect'>
<div class='card-title2'>جعل موقعك متجاوب مع جميع الهواتف</div>
<div class='price2'><sup class='p44rice1'>$</sup><sup class='p44rice2'>5</sup></div>
</div>
<div class='card-content'>
<ul class='collection'>
<li class='collection-item2' id='osama-price2'>جعل قالب مدونتك متجاوب</li>
<li class='collection-item2'>نسبة التجاوب تصل لـ 100%</li>
<li class='collection-item2' id='osama-price2'>تساعدك فى الأرشفه</li>
<li class='collection-item2'>كسب المزيد من الوزار</li>
<li class='collection-item2' id='osama-price2'>سعر الخدمة 5 دولار</li>
<li class='collection-item2'>سرعه فى العمل</li>
</ul>
</div>
<div class='card-actionwdbloog2'>
<a href='https://khamsat.com/programming/css-html/519250' target='_blank'>
<div class='waves-wdbloog' href='https://khamsat.com/programming/css-html/519250' target='_blank'>اطلب الخدمة</div>
</a>
</div>
</div>
</article>
<article class='col s12 m6 l4' id='osama-plans-1'>
<div class='card hoverable'>
<div class='card-image purple waves-effect'>
<div class='card-title3'>انشاء مدونة اجنبية اوعربية للربح منها</div>
<div class='price3'><sup class='p44rice1'>$</sup><sup class='p44rice2'>5</sup></div>
</div>
<div class='card-content'>
<ul class='collection'>
<li class='collection-item3' id='osama-price3'>انشاء لك مدونة عربية</li>
<li class='collection-item3'>او انشاء لك مدونة أجنبية</li>
<li class='collection-item3' id='osama-price3'>بأفضل اكواد السيو</li>
<li class='collection-item3'>قالب احترافى</li>
<li class='collection-item3' id='osama-price3'>متجاوب بنسبة 100%</li>
<li class='collection-item3'>المدونة الواحدة بـ 5 دولار</li>
</ul>
</div>
<div class='card-actionwdbloog3'>
<a href='https://khamsat.com/programming/css-html/512731' target='_blank'>
<div class='waves-wdbloog' href='https://khamsat.com/programming/css-html/512731' target='_blank'>اطلب الخدمة</div>
</a>
</div>
</div>
</article>
</div>- كل قسم محدد باللون الخاص به يمكنك تكرار القسم بتكرار الكود الخاص به
- وقم بتغيير العنوين بما تريد هىمحدده باللون البرتقالى
- اذا واجهتك مشكلة فى تركيب الإضافة وا تريد تعديل العرض او الطول قم بطلب ذلك فى تعليق