اضافة الخدمات بتقنية الماتريال ديزاين

شرح طريقة التركيب

1. نتوجه الى لوحة تحكم المدونة >>>> قالب >>>> تحرير html
2. اضف الكود فى المكان الذى تريده ويفضل اسفل مكان التدوينات مباشرة

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mido-cn1gk-net-PLANS'>
<section class='plans-container' id='plans' style='     height: 550px; '>
<article class='col s12 m6 l4' id='mido-plans-1' style='width: 28%;float: right;margin-right: 66px;'>
<div class='card hoverable' style='     background: #fff !important; '>
<div class='card-image purple waves-effect' style='     background: url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibtD66TNVkEEnjKP9uo5J4Ly-H5Kfult4oG7U-W7tU_Qo6kbfLtC8zHIBfAe4E9zltZcJftEkazhRKxy8SiDvOmNnt8giLaS3NSrx2kmUibyvm0wxVHpO5VRKNkkkeD2-WfExu52Ntv7Eb/s1600/tr.png&apos;) !important;     background-attachment: fixed !important;     background-size: cover !important;     background-color:  #880c9e  !important; '>
<div class='card-title'>تعديل وتطوير وحل مشاكل قوالب بلوجر</div>
<div class='price' style='    position: relative;     position: relative !important;     font-size: 5rem !important;     line-height: 1.6em !important;     color: #fff !important;     font-weight: 300 !important;     text-align: center !important;'><sup>$</sup>0<sub>/للقالب</sub></div>
<div class='price-desc'>الخدمة مجانا </div>
</div>
<div class='card-content'>
<div class='collection'>
<div class='collection-item' id='mido-price'>تركيب الإضافات الحصرية</div>
<div class='collection-item'> حذف الأدوات الغير قابلة للحذف</div>
<div class='collection-item' id='mido-price'>تحسين الخطوط</div>
<div class='collection-item'>تحسين مظهر القالب</div>
<div class='collection-item' id='mido-price'>تغيير الألوان</div>
<div class='collection-item'>تركيب المساحات الإعلانية</div>
</div>
</div>
<div class='card-action center-align' style='     border-bottom: solid 2px #9c27b0; '>
<a href='https://www.facebook.com/Mido.Oops' style='     margin-right: 0px !important;     margin-left: 0px !important; '>
<button class='waves-effect waves-light  btn' href='https://www.facebook.com/Mido.Oops' style='     background: #9c27b0; '>أختر الخدمة</button>
</a>
</div>
</div>
</article>
<article class='col s12 m6 l4' id='mido-plans-2' style='width: 28%;float: right;margin-right: 40px;'>
<div class='card z-depth-1 hoverable' style='     background: #fff !important; '>
<div class='card-image cyan waves-effect' style='     background: url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibtD66TNVkEEnjKP9uo5J4Ly-H5Kfult4oG7U-W7tU_Qo6kbfLtC8zHIBfAe4E9zltZcJftEkazhRKxy8SiDvOmNnt8giLaS3NSrx2kmUibyvm0wxVHpO5VRKNkkkeD2-WfExu52Ntv7Eb/s1600/tr.png&apos;) !important;     background-attachment: fixed !important;     background-size: cover !important;     background-color: #11a1c1 !important; '>
<div class='card-title'>إعلان على مدونة كن مهووس</div>
<div class='price' style='    position: relative;     position: relative !important;     font-size: 5rem !important;     line-height: 1.6em !important;     color: #fff !important;     font-weight: 300 !important;     text-align: center !important;'><sup>$</sup>5<sub>/للواحد</sub></div>
<div class='price-desc'>مدة اضافية للبنرى</div>
</div>
<div class='card-content'>
<div class='collection'>
<div class='collection-item' id='mido-price'>رابط نصي وبنرى صغير بالمجان </div>
<div class='collection-item'>بانر 125x125 لمدة 4 شهور</div>
<div class='collection-item' id='mido-price'>بانر 300x250 لمدة 3 شهور</div>
<div class='collection-item'>بانر 728X90 لمدة شهرين </div>
<div class='collection-item' id='mido-price'> شهر إضافي للإعلان البنري</div>
<div class='collection-item'>زوار يوميا</div>
</div>
</div>
<div class='card-action center-align' style='     border-bottom: solid 2px #00bcd4; '>
<a href='https://www.facebook.com/Mido.Oops' style='     margin-right: 0px !important;     margin-left: 0px !important; '>
<button class='waves-effect waves-light  btn' href='https://www.facebook.com/Mido.Oops' style='     background: #00bcd4; '>أختر الخدمة</button>
</a>
</div>
</div>
</article>
<article class='col s12 m6 l4' id='mido-plans-3' style='width: 28%;float: right;margin-right: 40px;'>
<div class='card hoverable' style='     background: #fff !important; '>
<div class='card-image green waves-effect' style='     background: url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibtD66TNVkEEnjKP9uo5J4Ly-H5Kfult4oG7U-W7tU_Qo6kbfLtC8zHIBfAe4E9zltZcJftEkazhRKxy8SiDvOmNnt8giLaS3NSrx2kmUibyvm0wxVHpO5VRKNkkkeD2-WfExu52Ntv7Eb/s1600/tr.png&apos;) !important;     background-attachment: fixed !important;     background-size: cover !important;     background-color: #21b527 !important; '>
<div class='card-title'>شراء قالب المدونة السابق الاحترافى</div>
<div class='price' style='    position: relative;     position: relative !important;     font-size: 5rem !important;     line-height: 1.6em !important;     color: #fff !important;     font-weight: 300 !important;     text-align: center !important;'><sup>$</sup>0<sub>/للقالب</sub></div>
<div class='price-desc'>دعم غير محدود</div>
</div>
<div class='card-content'>
<div class='collection'>
<div class='collection-item' id='mido-price'>يتوفر على سلايدر انيق</div>
<div class='collection-item'>متجاوب بنسبة 95%</div>
<div class='collection-item' id='mido-price'>به افضل اكواد السيو</div>
<div class='collection-item'>تأثيرات جميلة بجميع الاتجاهات</div>
<div class='collection-item' id='mido-price'>الوان متناسقة</div>
<div class='collection-item'>دعم فني مقدم بالمجان</div>
</div>
</div>
<div class='card-action center-align' style='     border-bottom: solid 2px #4caf50; '>
<a href='https://www.facebook.com/Mido.Oops ' style='     margin-right: 0px !important;     margin-left: 0px !important; '>
<button class='waves-effect waves-light  btn' href='http://www.cn1gk.com/2016/08/cngk-v2_16.html' style='     background: #4caf50; '>القالب مجانا</button>
</a>
</div>
</div>
</article>
</section>
<style>

.card:hover,#footer .widget:hover,.blog-grid .post:hover,.waves-light:hover,.blog-content .post:hover,.sidebar .widget:hover,h4:hover,.post ol li:hover,pre:hover,#related-posts:hover,#comments:hover {
    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}
.card-action{border-top: 1px solid rgba(160, 160, 160, .2);text-align:center;padding:15px;margin:0 -1px 0 -1px;transition:all .4s}
.collection {
    margin: 0rem 0 1rem 0 !important;
  }
 .waves-effect{   padding: 6px 27px;
    color: #fff;
    font-family: &#39;Acme&#39;,ge_ss_threeregular;
    border: none;
    border-radius: 2px;    font-weight: 900;
  font-size: 20px;cursor: pointer;}
.plans-container .card .card-image .card-title {
    position: relative;
    font-size: 1.28rem;
    line-height: 1.6em;
    text-align: center;
    width: 100%;
    padding: 10px 15px;
    text-transform: uppercase;
    background: rgba(0,0,0,0.1);
    color: #fff;
}
#mido-price {
    background: #f7f7f7;
}
@media (min-width:811px) and (max-width:979px) {
#mido-plans-1,#mido-plans-2,#mido-plans-3 {
    width: 25% !important;
    }
}

@media screen and (max-width : 810px) {
#mido-plans-1,#mido-plans-2,#mido-plans-3 {
    width: 93% !important;
    margin-right: 14px !important;
}

.plans-container {
    height: 1960px !important;
    }

  }
</style>
<style>
.plans-container .collection .collection-item {
    font-size: 1.4rem !important;
}
.collection .collection-item {
    background-color: #fff;
    line-height: 1.5rem;
    padding: 10px 20px;
    margin: 0;text-align: -webkit-center;
}
.plans-container .card .card-image .price-desc {
    text-align: center;
    color: #fff;
    padding-bottom: 10px;
}

.plans-container .collection .collection-item:before {
font-family:fontawesome !important;
    content: &quot;\f0e7&quot; !important;
font-size: 1.5rem !important;
margin-left: 15px;
  }

  </style>
</div>
  </b:if>

1. احفظ