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

سلام عليكم ورحمة الله وبركاته وبعد
اليوم أقدم لك عزيزي اضافة مميزة جدا 😊 خاصة بالمدونة بلوجر مهتمة بالرياضة وخاصة كرة القدم حيت يرغب متابعين بمعرفة المباريات اليوم بإستمرار بطبعة حال يفضل الزوار شكل بسيط وسهل ومميز سريع التحميل بترتيب جيد وألوان جذابة 😎
هدا ما أقدمه لك اليوم في هده اضافة

معاينة

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

تضمين الصور في تعليقات بلوحر

سنحاول تقسيم ✂ هدا المقال الى عدة مراحل لنستطيع إضافة كود مباريات اليوم

#⃣ قبل أن تقوم بأي مرحلة ننصح بحفظ نسخة إحتياطية للقالب خاص بك

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

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

إضافة تأثير سقوط ثلج إلى مدونات و المواقع

أدخل إلى بلوجر ⬅️قالب ⬅️تحرير القالب
ثم إبحث عن ]]></b:skin></style> بإستخدام cntrl + F
وضع الكود التالي فوقه

    <style>
::-webkit-scrollbar-thumb{background:#002e70}
::-webkit-scrollbar{width:5px;height:9px;background:#dcdcdc}
body{margin:0}
td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.container{margin-left:auto;margin-right:auto;padding-right:15px;padding-left:15px}
@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}
@media (min-width:1200px){.container{width:1170px}}
.container-fluid{margin-left:auto;margin-right:auto;padding-right:15px;padding-left:15px}
.container:before,.container:after,.container-fluid:before,.container-fluid:after{content:" ";display:table}
.container:after,.container-fluid:after,{clear:both}
/*mnajiri*/
.contents.widget-content {padding: 5px !important;}
/*mnajiri*/
.contents.widget-content{padding:15px}
div#match_today h2{text-align:center;padding:10px;background:#532855;color:#fff}
/*mnajiri*/
.mnajiri{display:block;height:94px;position:relative;
box-shadow:rgba(0, 0, 0, 0.57) 0px 25px 20px -21px;
-webkit-transition:box-shadow .3s;transition:box-shadow .3s;
border-radius:5px;margin:12px auto;
background:#DCEDC8;}
/*mnajiri*/
.fullink{display:block;height:100%;position:absolute;right:0;width:100%;z-index:5}
/*mnajiri*/
.mnajiriin{margin:0 13px}
/*mnajiri*/
.mnajiri img{background-color:#fff;border-bottom:3px solid #532855;height:50px;padding:4px;position:absolute;width:50px;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,0.1),0 2px 5px -1px rgba(0,0,0,0.2);-webkit-transition:box-shadow .3s;transition:box-shadow .3s}
/*mnajiri*/
.mpart1 strong{
    color: #fff;
    height: 50px;
    margin-right: -50px;
    position: absolute;
    right: 50%;
    text-align: center;
    width: 100px;
    z-index: 1;
    border-radius: 5px;}
.mpart1{position:relative;height:48px;line-height:48px}
.mpart1 span{
    float: right;
    text-align: center;
    width: 100%;
    z-index: 2;
}
/*mnajiri*/
.right_match{float:right;padding-left:30px;width:50%;position:relative;z-index:2}
/*mnajiri*/
.left_match{float:left;padding-right:30px;width:50%;position:relative;z-index:2}
.details_match{padding:0 100px;font-size:14px}
.details_match i{margin-left:5px}
.details_match span{background-color:#532855;border-left:1px solid #fff;color:#fff;float:right;height:36px;line-height:36px;position:relative;text-align:center;width:33.3%}
.details_match .liga_mdw{border:0 none}
.first_match::before,.liga_mdw::before{background-color:#532855;content:"";height:36px;position:absolute;top:0;width:20px}
.first_match::before{transform:skew(-20deg);right:-12px;border-radius:0 0 8px}
.liga_mdw::before{transform:skew(20deg);left:-12px;border-radius:0 0 0 8px}
@media screen and (max-width:700px){.liga_mdw{display:none}.details_match{padding:0 60px}.details_match span{width:50%}.thany::before{background-color:#532855;content:"";height:36px;position:absolute;top:0;width:20px;transform:skew(20deg);left:-12px;border-radius:0 0 0 8px}}
@media screen and (max-width:500px){.gadwal{font-size:14px;width:106%;background:#fff} }
.details_match{font-size:12px}
/*mnajiri*/
.mpart1{line-height:30px}
/*mnajiri*/
.mnajiriin{margin:0 5px}
/*mnajiri*/
.right_match{padding-left:20px}
.left_match{padding-right:20px}
/*mnajiri*/
.mnajiri{height:157px}
.details_match{padding:0 25px}
/*mnajiri*/
.mnajiri img{position:relative;display:block;margin:5px auto;background:transparent;border:0;padding:0}
.mpart1 strong{height:36px;line-height:36px;top:30px;width:60px;margin-right:-30px}
.najiri1{
    background-color: #532855;
}
.najiri2{
    background-color: #E91E63;
}
.najiri3{
    background-color: #4caf50;
}
</style>

لا تقلق كود عبارة عن لغة css لن يؤثر على مدونتك لقد إستخدمت أوسمة (tag) مميزة 🌟 ومختلفة ولأن نمر إلى مرحلة التانية🔥

إضافة كود html للمباريات اليوم بلوجر

بالنسبة لهدا الكود هو مكلف بإضهار إضافة فهو عبارة عن كود html و بطبعة حال لا يمكن أن يشتغل دون اضافة كود css أعلاه

طريقة إضافة كود html

هنا لك إختيار أين تريد اضافة كود إما ان انشئ صفحة خاصة بالمباريات او تحرير مقال وهذا ما سننشره في قادم الأيام حيث انا في صدد تصميم قالب خاص بالمباريات وكما يمكن إضافة كود في html/javascript
إما في قائمة جانبية ادا كان موقعك يتوفر عليها و دلك بإضافة كود التالي داخله

    
<div class="match_today container" id="match_today">
<h2>مباريات اليوم</h2>

<div class="widget-content">

<!--match mdw-->
<div class="mnajiri">
     <a class="fullink" href="#"></a>
       <div class="mnajiriin">
         <div class="mpart1">
           <div class="right_match">
              <span class="right_tech">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE9g2MJ59sJG6nADrdhz_E_ucMJUsyoR4t0UuJlo4l3s15ZigYnKRKUxCfGXch4RG9H8mqGNNZVDQkxMDm-xXFNBAlk_LJWObJOzefa_CbbjL2Uv-JSqDlf75WKSgGwzbVgXuXh8KdRg/s1600/a.png">
                  <div class="fname">برشلونة</div>
               </span>
           </div>
                 <strong class="najiri1">19:00</strong>
                 <div class="left_match">
                   <span class="left_tech">
                     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUECVpmyDHP41Cqo8L0tBx5OYFuLpaLT6kpowkisOFpYSPoxalLPyS0WSvhf1HhHCxvltDms44d3mmaDQaPi8KRiVux6Brfzza7noO384zlbBjRNrHSH19xkrWvflRd-UaHoIJChtCPto/s1600/u.png">
                       <div class="fname">ريال مدريد</div>
                   </span>
                </div>
            </div>
               <div class="details_match">
                  <span class="first_match">
                     <i aria-hidden="true" class="fa fa-clock-o"></i><b>غرينتش</b>
                   </span>
                   <span class="thany"><i aria-hidden="true" class="fa fa-futbol-o"></i><b>دوري ابطال اوروبا</b>
                   </span>
                   <span class="liga_mdw"><i aria-hidden="true" class="fa fa-desktop"></i><b>Bein Sport HD1</b>
                   </span>
              </div>
      </div>
   </div>





<!--match mdw-->
<div class="mnajiri">
   <a class="fullink" href="#"></a>
     <div class="mnajiriin">
       <div class="mpart1">
         <div class="right_match">
            <span class="right_tech">
               <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUECVpmyDHP41Cqo8L0tBx5OYFuLpaLT6kpowkisOFpYSPoxalLPyS0WSvhf1HhHCxvltDms44d3mmaDQaPi8KRiVux6Brfzza7noO384zlbBjRNrHSH19xkrWvflRd-UaHoIJChtCPto/s1600/u.png">
                <div class="fname">ليفربول</div>
             </span>
         </div>
               <strong class="najiri2">شوط 1</strong>
               <div class="left_match">
                 <span class="left_tech">
                   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1lRqOJVf30YvHEnAF641db5T6C8FibGLXafSVHvDrOXHx-OBL8q6lCG0HReQmE0_o_IB8VcupFQSilGFowGxnScXbrRltwClWGH7Toe8aaYtQnxf1GnZ5v1BBBoB1vvGzkeenVxlZDHs/s1600/c.png">
                     <div class="fname">برايتون</div>
                 </span>
              </div>
          </div>
             <div class="details_match">
                <span class="first_match">
                   <i aria-hidden="true" class="fa fa-clock-o"></i><b>جارية الأن</b>
                 </span>
                 <span class="thany"><i aria-hidden="true" class="fa fa-futbol-o"></i><b>الدوري الانجليزي</b>
                 </span>
                 <span class="liga_mdw"><i aria-hidden="true" class="fa fa-desktop"></i><b>Bein Sport HD1</b>
                 </span>
            </div>
    </div>
 </div>





  <!--match mdw-->
<div class="mnajiri">
   <a class="fullink" href="#"></a>
     <div class="mnajiriin">
       <div class="mpart1">
         <div class="right_match">
            <span class="right_tech">
               <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicd47CQhI-r7UlkzxlkW9hFsu8V9EihQ83q1E5VZWpfdRDG5e72uQUOemh4X75cZ4XwiRzuXueqyqCN28y51dDiqdRijimMEksrFyM_kkODYuS4W2qLILC6lIbsbj8TiAt2BVeLus0ls0/s1600/d.png">
                <div class="fname">ليفربول</div>
             </span>
         </div>
               <strong class="najiri3">إستراحة</strong>
               <div class="left_match">
                 <span class="left_tech">
                   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUECVpmyDHP41Cqo8L0tBx5OYFuLpaLT6kpowkisOFpYSPoxalLPyS0WSvhf1HhHCxvltDms44d3mmaDQaPi8KRiVux6Brfzza7noO384zlbBjRNrHSH19xkrWvflRd-UaHoIJChtCPto/s1600/u.png">
                     <div class="fname">برايتون</div>
                 </span>
              </div>
          </div>
             <div class="details_match">
                <span class="first_match">
                   <i aria-hidden="true" class="fa fa-clock-o"></i><b>ستبدأ بعد قليل</b>
                 </span>
                 <span class="thany"><i aria-hidden="true" class="fa fa-futbol-o"></i><b>الدوري الانجليزي</b>
                 </span>
                 <span class="liga_mdw"><i aria-hidden="true" class="fa fa-desktop"></i><b>Bein Sport HD1</b>
                 </span>
            </div>
    </div>
 </div>



  <!--match mdw-->
<div class="mnajiri">
   <a class="fullink" href="#"></a>
     <div class="mnajiriin">
       <div class="mpart1">
         <div class="right_match">
            <span class="right_tech">
               <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE9g2MJ59sJG6nADrdhz_E_ucMJUsyoR4t0UuJlo4l3s15ZigYnKRKUxCfGXch4RG9H8mqGNNZVDQkxMDm-xXFNBAlk_LJWObJOzefa_CbbjL2Uv-JSqDlf75WKSgGwzbVgXuXh8KdRg/s1600/a.png">
                <div class="fname">ليفربول</div>
             </span>
         </div>
               <strong class="najiri1">4-0</strong>
               <div class="left_match">
                 <span class="left_tech">
                   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1lRqOJVf30YvHEnAF641db5T6C8FibGLXafSVHvDrOXHx-OBL8q6lCG0HReQmE0_o_IB8VcupFQSilGFowGxnScXbrRltwClWGH7Toe8aaYtQnxf1GnZ5v1BBBoB1vvGzkeenVxlZDHs/s1600/c.png">
                     <div class="fname">برايتون</div>
                 </span>
              </div>
          </div>
             <div class="details_match">
                <span class="first_match">
                   <i aria-hidden="true" class="fa fa-clock-o"></i><b> إنتهت</b>
                 </span>
                 <span class="thany"><i aria-hidden="true" class="fa fa-futbol-o"></i><b>الدوري الانجليزي</b>
                 </span>
                 <span class="liga_mdw"><i aria-hidden="true" class="fa fa-desktop"></i><b>Bein Sport HD1</b>
                 </span>
            </div>
    </div>
 </div>





</div></div>

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

سكريبت عرض حلقات بشكل إحترافية بلوجر

لزيادة أكتر من مبارة انسخ احد اكواد التالية 👇👇👇👇

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

كود مباريات اليوم لوضح توقيت المبارة و قناة الناقلة لمباراة و نوع البطولة بشكل سهل جدا

    
<!--match mdw-->
<div class="mnajiri">
     <a class="fullink" href="#"></a>
       <div class="mnajiriin">
         <div class="mpart1">
           <div class="right_match">
              <span class="right_tech">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE9g2MJ59sJG6nADrdhz_E_ucMJUsyoR4t0UuJlo4l3s15ZigYnKRKUxCfGXch4RG9H8mqGNNZVDQkxMDm-xXFNBAlk_LJWObJOzefa_CbbjL2Uv-JSqDlf75WKSgGwzbVgXuXh8KdRg/s1600/a.png">
                  <div class="fname">برشلونة</div>
               </span>
           </div>
                 <strong class="najiri1">19:00</strong>
                 <div class="left_match">
                   <span class="left_tech">
                     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUECVpmyDHP41Cqo8L0tBx5OYFuLpaLT6kpowkisOFpYSPoxalLPyS0WSvhf1HhHCxvltDms44d3mmaDQaPi8KRiVux6Brfzza7noO384zlbBjRNrHSH19xkrWvflRd-UaHoIJChtCPto/s1600/u.png">
                       <div class="fname">ريال مدريد</div>
                   </span>
                </div>
            </div>
               <div class="details_match">
                  <span class="first_match">
                     <i aria-hidden="true" class="fa fa-clock-o"></i><b>غرينتش</b>
                   </span>
                   <span class="thany"><i aria-hidden="true" class="fa fa-futbol-o"></i><b>دوري ابطال اوروبا</b>
                   </span>
                   <span class="liga_mdw"><i aria-hidden="true" class="fa fa-desktop"></i><b>Bein Sport HD1</b>
                   </span>
              </div>
      </div>
   </div>

كود مباريات الأن html

بالنسبة لهدا كود خاص بالمباريات التي تجري الان اى فى الموعد محدد لها ووقت دخول الزائر إلى موقعك أو مدونتك

    
<!--match mdw-->
<div class="mnajiri">
   <a class="fullink" href="#"></a>
     <div class="mnajiriin">
       <div class="mpart1">
         <div class="right_match">
            <span class="right_tech">
               <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUECVpmyDHP41Cqo8L0tBx5OYFuLpaLT6kpowkisOFpYSPoxalLPyS0WSvhf1HhHCxvltDms44d3mmaDQaPi8KRiVux6Brfzza7noO384zlbBjRNrHSH19xkrWvflRd-UaHoIJChtCPto/s1600/u.png">
                <div class="fname">ليفربول</div>
             </span>
         </div>
               <strong class="najiri2">شوط 1</strong>
               <div class="left_match">
                 <span class="left_tech">
                   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1lRqOJVf30YvHEnAF641db5T6C8FibGLXafSVHvDrOXHx-OBL8q6lCG0HReQmE0_o_IB8VcupFQSilGFowGxnScXbrRltwClWGH7Toe8aaYtQnxf1GnZ5v1BBBoB1vvGzkeenVxlZDHs/s1600/c.png">
                     <div class="fname">برايتون</div>
                 </span>
              </div>
          </div>
             <div class="details_match">
                <span class="first_match">
                   <i aria-hidden="true" class="fa fa-clock-o"></i><b>جارية الأن</b>
                 </span>
                 <span class="thany"><i aria-hidden="true" class="fa fa-futbol-o"></i><b>الدوري الانجليزي</b>
                 </span>
                 <span class="liga_mdw"><i aria-hidden="true" class="fa fa-desktop"></i><b>Bein Sport HD1</b>
                 </span>
            </div>
    </div>
 </div>

كود وقت إستراحة بين الشوطين html

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

    


  <!--match mdw-->
  <div class="mnajiri">
     <a class="fullink" href="#"></a>
       <div class="mnajiriin">
         <div class="mpart1">
           <div class="right_match">
              <span class="right_tech">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicd47CQhI-r7UlkzxlkW9hFsu8V9EihQ83q1E5VZWpfdRDG5e72uQUOemh4X75cZ4XwiRzuXueqyqCN28y51dDiqdRijimMEksrFyM_kkODYuS4W2qLILC6lIbsbj8TiAt2BVeLus0ls0/s1600/d.png">
                  <div class="fname">ليفربول</div>
               </span>
           </div>
                 <strong class="najiri3">إستراحة</strong>
                 <div class="left_match">
                   <span class="left_tech">
                     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUECVpmyDHP41Cqo8L0tBx5OYFuLpaLT6kpowkisOFpYSPoxalLPyS0WSvhf1HhHCxvltDms44d3mmaDQaPi8KRiVux6Brfzza7noO384zlbBjRNrHSH19xkrWvflRd-UaHoIJChtCPto/s1600/u.png">
                       <div class="fname">برايتون</div>
                   </span>
                </div>
            </div>
               <div class="details_match">
                  <span class="first_match">
                     <i aria-hidden="true" class="fa fa-clock-o"></i><b>ستبدأ بعد قليل</b>
                   </span>
                   <span class="thany"><i aria-hidden="true" class="fa fa-futbol-o"></i><b>الدوري الانجليزي</b>
                   </span>
                   <span class="liga_mdw"><i aria-hidden="true" class="fa fa-desktop"></i><b>Bein Sport HD1</b>
                   </span>
              </div>
      </div>
   </div>
  

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

كود عندما تنتهي مبارة يمكنك وضعه مع وضع نتيجة المبارة و وضع رابط كذلك للمزيد من التفاصيل حول المبارة

    

  <!--match mdw-->
  <div class="mnajiri">
     <a class="fullink" href="#"></a>
       <div class="mnajiriin">
         <div class="mpart1">
           <div class="right_match">
              <span class="right_tech">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE9g2MJ59sJG6nADrdhz_E_ucMJUsyoR4t0UuJlo4l3s15ZigYnKRKUxCfGXch4RG9H8mqGNNZVDQkxMDm-xXFNBAlk_LJWObJOzefa_CbbjL2Uv-JSqDlf75WKSgGwzbVgXuXh8KdRg/s1600/a.png">
                  <div class="fname">ليفربول</div>
               </span>
           </div>
                 <strong class="najiri1">4-0</strong>
                 <div class="left_match">
                   <span class="left_tech">
                     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1lRqOJVf30YvHEnAF641db5T6C8FibGLXafSVHvDrOXHx-OBL8q6lCG0HReQmE0_o_IB8VcupFQSilGFowGxnScXbrRltwClWGH7Toe8aaYtQnxf1GnZ5v1BBBoB1vvGzkeenVxlZDHs/s1600/c.png">
                       <div class="fname">برايتون</div>
                   </span>
                </div>
            </div>
               <div class="details_match">
                  <span class="first_match">
                     <i aria-hidden="true" class="fa fa-clock-o"></i><b> إنتهت</b>
                   </span>
                   <span class="thany"><i aria-hidden="true" class="fa fa-futbol-o"></i><b>الدوري الانجليزي</b>
                   </span>
                   <span class="liga_mdw"><i aria-hidden="true" class="fa fa-desktop"></i><b>Bein Sport HD1</b>
                   </span>
              </div>
      </div>
   </div>
  

كتابة مقال متوافق مع seo محركات البحث

ادا كانت لديك اي أسألة يمكنك تعليق أسفله 😎 إلى هنا ينتهي موضوع اليوم و سلام عليكم ورحمة الله ✋✋🌹🌹

شارك Share Tweet Share Share Share

انقر هنا

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