recent
أخبار ساخنة

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

Walid Al-Bana
الصفحة الرئيسية

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



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

نتوجه الى لوحة تحكم المدونة >>>> قالب >>>> تحرير 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: 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://2.bp.blogspot.com/-Tli7X-Epbus/V5ENQ3om9hI/AAAAAAAAAWc/xsCPHqTOTIQeJu8ZEaXmFIIGoMyxnyyPACLcB/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='http://alwalednet.blogspot.com' 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://2.bp.blogspot.com/-Tli7X-Epbus/V5ENQ3om9hI/AAAAAAAAAWc/xsCPHqTOTIQeJu8ZEaXmFIIGoMyxnyyPACLcB/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://alwalednet.blogspot.com' 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://2.bp.blogspot.com/-Tli7X-Epbus/V5ENQ3om9hI/AAAAAAAAAWc/xsCPHqTOTIQeJu8ZEaXmFIIGoMyxnyyPACLcB/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='http://alwalednet.blogspot.com ' 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>


google-playkhamsatmostaqltradent