جدول مباريات اليوم html شبيه بموقع كووورة

سلام عليكم ورحمة الله وبركاته و مرحبا بك في مدونة ماتريال ويب

وبعد بما انك هنا فأنت لديك مدونة كرة القدم او تريد إنشائها واحدة مهم فأنت في مكان صحيح
صديقي اقدم لك تصميم جدول مباريات اليوم شبيه بموقع كووورة.

معاينة

إضافة جدول مباريات اليوم إلى بلوجر (html و css) v1

 لقد لاحظت مأخرا أن تدونات التي سبق ونشرتها حول جدول مباريات اليوم html css أكتر زيارة من طرف متابعين في مدونة ماتريال ويب لدي قرر ان اقدم لك اليوم هدا تصميم الدي قمت بتصميمه الدي يشبه جدول مباريات موقع كووورة html css معروف ومشهور جدا

 فهدا الجدول اي جدول مباريات اليوم ل موقع كووورة مميزة مصمم بشكل بسيط أيضا متجاوب

 مميزات جدول مباريات اليوم شبيه بموقع كووورة html css 

• متجاوب مع جميع أجهزة
•  سهل تركيب 
• قابل لتعديل 

طريقة تركيب جدول مباريات اليوم في بلوجر html css

 طريقة سهلة جدا كل ما عليك هو إتباع خطوات

 المرحلة الأولى : 

1. المظهر
2.  تم html
3.  تم إبحث عن </head> بإستخدام cntrl + F
4.  ضغ كود التالي فوقه / أعلاه

<style>


.liveMatches {
    border: 1px solid #d2d2d2;
}
.mb20 {
    margin-bottom: 20px;
}


h2, h3 {
    border-bottom: 3px solid #ffb925;
    color: #fff;
    height: 36px;
    line-height: 35px;
    padding: 0 10px;
      background-color: #333;

}



h2, h3, th {
    font-size: 1.1em;
}

.bg_dark td, .white, h1.title a, h2 a, h3 a {
    color: #fff;
  text-decoration: blink;
}

table {
    border-collapse: collapse;
    width: 100%!important;
}
.liveMatches tr {
    border-bottom: 1px solid #d2d2d2;
}

.liveMatches td {
    vertical-align: middle;
    font-weight: 700;
}

.cellCenter td, .mainNav a {
    text-align: center;
}

.liveTeam {
    width: 100px;
}

select, td {
    vertical-align: middle;
    padding: 3px 2px;
}

.liveMatches img {
    max-height: 2em;
}

img {
    max-width: 100%;
    height: auto;
}

.liveTeam div {
    color: #5a5a5a;
}

.liveMatches td {
    vertical-align: middle;
    font-weight: 700;
}

cellCenter td, .mainNav a {
    text-align: center;
}



.liveDet div {
    width: 64px;
    padding: 3px 0;
    margin: 0 auto 3px;
    color: #fff;
    border-radius: 7px;
    max-width: 100%;
    text-align: center;
}

.liveDraw, .liveVersus {
    background-color: #272727;
}

.liveDraw, .now{
  background-color: #E91E63;
}

.liveDraw, .now1{
    background-color: #4CAF50;
}

.liveDraw, .now2{
    background-color: #3F51B5;
}
.liveMatches td {
    vertical-align: middle;
    font-weight: 700;
}

.liveVersus span,{
    height: 14px;
    margin-left: 3px;
    vertical-align: middle;
    width: 15px;
    background-position: 0 -144px;
}



</style>

 المرحلة الثانية :

1.  التخطيط
2.  تم إنشاء html/javascript
3.  ألصق كود التالي داخله
4.  تم إضغط على حفظ 

<div class="liveMatches mb20"><h3>
  <a href="?region=-1&area=0">أهم المباريات</a></h3>
  
  <table width="100%" cellspacing="0" cellpadding="0" class="cellCenter"><tbody>
    

     <tr class="matchRow" ><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUECVpmyDHP41Cqo8L0tBx5OYFuLpaLT6kpowkisOFpYSPoxalLPyS0WSvhf1HhHCxvltDms44d3mmaDQaPi8KRiVux6Brfzza7noO384zlbBjRNrHSH19xkrWvflRd-UaHoIJChtCPto/s1600/u.png"><div>mdwab</div></td>
       
       <td class="liveDet"><div class="liveVersus">اليوم<br><span class="bgShare"></span>16:30</div></td><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE9g2MJ59sJG6nADrdhz_E_ucMJUsyoR4t0UuJlo4l3s15ZigYnKRKUxCfGXch4RG9H8mqGNNZVDQkxMDm-xXFNBAlk_LJWObJOzefa_CbbjL2Uv-JSqDlf75WKSgGwzbVgXuXh8KdRg/s1600/a.png"><div>ar1books</div></td></tr>   
    
    
    
  
    
     <tr class="matchRow" ><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUECVpmyDHP41Cqo8L0tBx5OYFuLpaLT6kpowkisOFpYSPoxalLPyS0WSvhf1HhHCxvltDms44d3mmaDQaPi8KRiVux6Brfzza7noO384zlbBjRNrHSH19xkrWvflRd-UaHoIJChtCPto/s1600/u.png"><div>mdwab</div></td>
       
       <td class="liveDet"><div class="now">جارية الان<br><span class="bgShare"></span>0 - 0</div></td><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE9g2MJ59sJG6nADrdhz_E_ucMJUsyoR4t0UuJlo4l3s15ZigYnKRKUxCfGXch4RG9H8mqGNNZVDQkxMDm-xXFNBAlk_LJWObJOzefa_CbbjL2Uv-JSqDlf75WKSgGwzbVgXuXh8KdRg/s1600/a.png"><div>ar1books</div></td></tr>  
    
    
    
  
        <tr class="matchRow" ><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUECVpmyDHP41Cqo8L0tBx5OYFuLpaLT6kpowkisOFpYSPoxalLPyS0WSvhf1HhHCxvltDms44d3mmaDQaPi8KRiVux6Brfzza7noO384zlbBjRNrHSH19xkrWvflRd-UaHoIJChtCPto/s1600/u.png"><div>mdwab</div></td>
       
       <td class="liveDet"><div class="now1">شوط 1<br><span class="bgShare"></span>2 - 1</div></td><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE9g2MJ59sJG6nADrdhz_E_ucMJUsyoR4t0UuJlo4l3s15ZigYnKRKUxCfGXch4RG9H8mqGNNZVDQkxMDm-xXFNBAlk_LJWObJOzefa_CbbjL2Uv-JSqDlf75WKSgGwzbVgXuXh8KdRg/s1600/a.png"><div>ar1books</div></td></tr>  
    
    
    
    
         <tr class="matchRow" ><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUECVpmyDHP41Cqo8L0tBx5OYFuLpaLT6kpowkisOFpYSPoxalLPyS0WSvhf1HhHCxvltDms44d3mmaDQaPi8KRiVux6Brfzza7noO384zlbBjRNrHSH19xkrWvflRd-UaHoIJChtCPto/s1600/u.png"><div>mdwab</div></td>
       
       <td class="liveDet"><div class="now2">إنتهت<br><span class="bgShare"></span>0 - 0</div></td><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE9g2MJ59sJG6nADrdhz_E_ucMJUsyoR4t0UuJlo4l3s15ZigYnKRKUxCfGXch4RG9H8mqGNNZVDQkxMDm-xXFNBAlk_LJWObJOzefa_CbbjL2Uv-JSqDlf75WKSgGwzbVgXuXh8KdRg/s1600/a.png"><div>ar1books</div></td></tr> 
    
    
    
    
    </tbody></table></div>

هدا أكواد يتم وضعها في html/javascript 

كود مبارة جارية الان

    
     <tr class="matchRow" ><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUECVpmyDHP41Cqo8L0tBx5OYFuLpaLT6kpowkisOFpYSPoxalLPyS0WSvhf1HhHCxvltDms44d3mmaDQaPi8KRiVux6Brfzza7noO384zlbBjRNrHSH19xkrWvflRd-UaHoIJChtCPto/s1600/u.png"><div>mdwab</div></td>
       
       <td class="liveDet"><div class="now">جارية الان<br><span class="bgShare"></span>0 - 0</div></td><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE9g2MJ59sJG6nADrdhz_E_ucMJUsyoR4t0UuJlo4l3s15ZigYnKRKUxCfGXch4RG9H8mqGNNZVDQkxMDm-xXFNBAlk_LJWObJOzefa_CbbjL2Uv-JSqDlf75WKSgGwzbVgXuXh8KdRg/s1600/a.png"><div>ar1books</div></td></tr>  
    
    

 كود مبارة إنتهت 

 
         <tr class="matchRow" ><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUECVpmyDHP41Cqo8L0tBx5OYFuLpaLT6kpowkisOFpYSPoxalLPyS0WSvhf1HhHCxvltDms44d3mmaDQaPi8KRiVux6Brfzza7noO384zlbBjRNrHSH19xkrWvflRd-UaHoIJChtCPto/s1600/u.png"><div>mdwab</div></td>
       
       <td class="liveDet"><div class="now2">إنتهت<br><span class="bgShare"></span>0 - 0</div></td><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE9g2MJ59sJG6nADrdhz_E_ucMJUsyoR4t0UuJlo4l3s15ZigYnKRKUxCfGXch4RG9H8mqGNNZVDQkxMDm-xXFNBAlk_LJWObJOzefa_CbbjL2Uv-JSqDlf75WKSgGwzbVgXuXh8KdRg/s1600/a.png"><div>ar1books</div></td></tr> 

كود مباريات اليوم

     <tr class="matchRow" ><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUECVpmyDHP41Cqo8L0tBx5OYFuLpaLT6kpowkisOFpYSPoxalLPyS0WSvhf1HhHCxvltDms44d3mmaDQaPi8KRiVux6Brfzza7noO384zlbBjRNrHSH19xkrWvflRd-UaHoIJChtCPto/s1600/u.png"><div>mdwab</div></td>
       
       <td class="liveDet"><div class="liveVersus">اليوم<br><span class="bgShare"></span>16:30</div></td><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE9g2MJ59sJG6nADrdhz_E_ucMJUsyoR4t0UuJlo4l3s15ZigYnKRKUxCfGXch4RG9H8mqGNNZVDQkxMDm-xXFNBAlk_LJWObJOzefa_CbbjL2Uv-JSqDlf75WKSgGwzbVgXuXh8KdRg/s1600/a.png"><div>ar1books</div></td></tr>   
    

 كود الشوط 1 و 2

  
  
        <tr class="matchRow" ><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUECVpmyDHP41Cqo8L0tBx5OYFuLpaLT6kpowkisOFpYSPoxalLPyS0WSvhf1HhHCxvltDms44d3mmaDQaPi8KRiVux6Brfzza7noO384zlbBjRNrHSH19xkrWvflRd-UaHoIJChtCPto/s1600/u.png"><div>mdwab</div></td>
       
       <td class="liveDet"><div class="now1">شوط 1<br><span class="bgShare"></span>2 - 1</div></td><td class="liveTeam">
       
       <img alt="mnajiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE9g2MJ59sJG6nADrdhz_E_ucMJUsyoR4t0UuJlo4l3s15ZigYnKRKUxCfGXch4RG9H8mqGNNZVDQkxMDm-xXFNBAlk_LJWObJOzefa_CbbjL2Uv-JSqDlf75WKSgGwzbVgXuXh8KdRg/s1600/a.png"><div>ar1books</div></td></tr>  
    
    
    
    

 إلى هنا تنتهي تدوينة اليوم إستمتع بإضافة اذا لم تعجبك قل لى ذلك يمكنك إعطاء رايك في تصميم أسفله في تعليقات و السلام عليكم ورحمة الله

إضافة جدول مباريات اليوم إلى بلوجر (html و css) v1

شارك Share Tweet Share Share Share

انقر هنا

محمد نجيري (mnajiri@) مشرف على مدونة ماتريال ويب تحت الرابط التالي :https://mdwab.blogspot.com/ مند 2018 و أدعوك لمتابعتي عبر حسابي على أنستغرام