جرووا تك

مرحبا بكم أصدقائي متابعي مدونة لحن القلب ، في درس جديد وهو إضافة حصرية لأربع صناديق لعرض خدماتك ومنتوجاتك على بلوجر بتقنية المتريال ديزاين . 
هذه الإضافة هي عبارة عن أدات لعرض و الترويج لخدمات أو منتوجات و ذلك من خلال عرض جزء من محتواها على شكل سطور وجمل مختصرة ، كما أنها تأتي بتأثيرات رائعة وألوان مميزة .
الإضافة مخصصة لتعرض في الصفحة الرئيسية فقط , لذلك قمنا بتسهيل الأمر عليكم بالكامل حيث جمعن هته الأكواد في كود واحد مختصر لكي تضعه في المكان الذى تريده  ، كما أنه سهل التعديل . لذا كل ما عليك فعله هو البحث عن ما تريد تغيره .

طريقة إضافة الخدمات في بلوجر بشكل إحترافي

* - توجه الى لوحة التحكم في بلوجر

* - إضغط على قالب

* - ثم تحرير HTML 

* - أضف الكود فى المكان الذى تريده ويفضل أسفل مكان التدوينات مباشرة

<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: 24%;float: right;margin-right: 00px;'>
<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/AVvXsEheztOcOAhyphenhyphentgoBFM7mGdGnm4LtYJ5yA7g9q7Yi7VW5XKRK3etVDn6UygHIoyh0tXZOWw1gzp1S4uRxoIMctd6_mAUnS2dKWQOo_JZhOXVrx-Bd9LlxBroXTl4ZWKDfnH22C3E9Hke6l2-F/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>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'> حذف الأدوات الغير قابلة للحذف</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='http://www.tuneofheart.com/p/contactez-nous.html' style='     margin-right: 0px !important;     margin-left: 0px !important; '>
<button class='waves-effect waves-light  btn' href='http://www.tuneofheart.com/p/contactez-nous.html' style='     background: #9c27b0; '>أختر الخدمة</button>
</a>
</div>
</div>
</article>
<article class='col s12 m6 l4' id='mido-plans-2' style='width: 24%;float: right;margin-right: 16px;'>
<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/AVvXsEheztOcOAhyphenhyphentgoBFM7mGdGnm4LtYJ5yA7g9q7Yi7VW5XKRK3etVDn6UygHIoyh0tXZOWw1gzp1S4uRxoIMctd6_mAUnS2dKWQOo_JZhOXVrx-Bd9LlxBroXTl4ZWKDfnH22C3E9Hke6l2-F/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='http://www.tuneofheart.com/p/contactez-nous.html' style='     margin-right: 0px !important;     margin-left: 0px !important; '>
<button class='waves-effect waves-light  btn' href='http://www.tuneofheart.com/p/contactez-nous.html' style='     background: #00bcd4; '>أختر الخدمة</button>
</a>
</div>
</div>
</article>
<article class='col s12 m6 l4' id='mido-plans-3' style='width: 24%;float: right;margin-right: 16px;'>
<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/AVvXsEheztOcOAhyphenhyphentgoBFM7mGdGnm4LtYJ5yA7g9q7Yi7VW5XKRK3etVDn6UygHIoyh0tXZOWw1gzp1S4uRxoIMctd6_mAUnS2dKWQOo_JZhOXVrx-Bd9LlxBroXTl4ZWKDfnH22C3E9Hke6l2-F/s1600/tr.png&apos;) !important;     background-attachment: fixed !important;     background-size: cover !important;     background-color: #e7505a !important; '>
<div class='card-title'>شراء قالب مدونة لحن القلب V1</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>10<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'>متجاوب بنسبة 90%</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 #e7505a; '>
<a href='http://www.tuneofheart.com/p/contactez-nous.html ' style='     margin-right: 0px !important;     margin-left: 0px !important; '>
<button class='waves-effect waves-light  btn' href='http://www.tuneofheart.com/p/contactez-nous.html' style='     background: #e7505a; '>شراء القالب</button>

</a>
</div>
</div>
</article>
<article class='col s12 m6 l4' id='mido-plans-4' style='width: 24%;float: right;margin-right: 16px;'>
<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/AVvXsEheztOcOAhyphenhyphentgoBFM7mGdGnm4LtYJ5yA7g9q7Yi7VW5XKRK3etVDn6UygHIoyh0tXZOWw1gzp1S4uRxoIMctd6_mAUnS2dKWQOo_JZhOXVrx-Bd9LlxBroXTl4ZWKDfnH22C3E9Hke6l2-F/s1600/tr.png&apos;) !important;     background-attachment: fixed !important;     background-size: cover !important;     background-color: #21b527 !important; '>
<div class='card-title'>شراء قالب مدونة لحن القلب V2</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>35<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'>تصميم احترافى متجاوب 99%</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='http://www.tuneofheart.com/p/contactez-nous.html ' style='     margin-right: 0px !important;     margin-left: 0px !important; '>
<button class='waves-effect waves-light  btn' href='http://www.tuneofheart.com/p/contactez-nous.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,#mido-plans-4 {
    width: 25% !important;
    }
}

@media screen and (max-width : 810px) {
#mido-plans-1,#mido-plans-2,#mido-plans-3,#mido-plans-4 {
    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-size: 1.5rem !important;
margin-left: 15px;
  }

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

مبروك عليك الإضافة . هنا ينتهي الموضوع أتمنى أن يكون الشرح في متناول الجميع . و لا تنسوا أي تساؤل أتركوه في التعليقات ، وسوف أجيب على الأسئلة بإذن الله .