اضافة بلوجر لعرض نتائج المباريات

 

البعض يمتلك المدونات والمواقع الرياضية التى تبث المبارات ونتائجها وعلى مدونات بلوجر أطرح لكم اضافة مهمة فى هذا المجال وهى عرض نتائج المباريات .

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

حتى تقوم باضافتها على بلوجر اتبع الخطوات الآتيه :-

أولا قم بتحرير القالب تعديل htmlمن خيار المظهر  .

ثانيًا قم بالبحث عن الكود التالي :

 <b:skin><!

ثالثًا قم بوضع كود ال css التالي أسفل الكود السابق :

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

*,
*:after,
*:before {
    box-sizing: border-box;
}

:root {
    --color-text-primary: #1c2a38;
    --color-text-secondary: #8A8F98;
    --color-text-alert: #d72641;
    --color-text-icon: #dbdade;
    --color-bg-primary: #fff;
    --color-bg-secondary: #f3f5f9;
    --color-bg-alert: #fdeaec;
    --color-theme-primary: #623ce6;
}

button,
input,
select,
textarea {
    font: inherit;
}

img {
    display: block;
}

strong {
    font-weight: 600;
}

body {
    font-family: "Inter", sans-serif;
    line-height: 1.5;
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
}

.match {
    background-color: var(--color-bg-primary);
    display: flex;
    flex-direction: column;
    min-width: 600px;
    border-radius: 10px;
    box-shadow: 0 0 2px 0 rgba(#303030, 0.1), 0 4px 4px 0 rgba(#303030, 0.1);
}

.match-header {
    display: flex;
    border-bottom: 2px solid rgba(#303030, 0.1);
    padding: 16px;
}

.match-status {
    background-color: var(--color-bg-alert);
    color: var(--color-text-alert);
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    line-height: 1;
    margin-right: auto;
    &:before {
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        background-color: currentColor;
        border-radius: 50%;
        margin-right: 8px;
    }
}

.match-tournament {
    display: flex;
    align-items: center;
    font-weight: 600;
    img {
        width: 20px;
        margin-right: 12px;
    }
}

.match-actions {
    display: flex;
    margin-left: auto;
}

.btn-icon {
    border: 0;
    background-color: transparent;
    color: var(--color-text-icon);
    display: flex;
    align-items: center;
    justify-content: center;
}

.match-content {
    display: flex;
    position: relative;
}

.column {
    padding: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% / 3);
}

.team {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-logo {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-bg-primary);
    box-shadow: 0 4px 4px 0 rgba(#303030, 0.15),
        0 0 0 15px var(--color-bg-secondary);
    img {
        width: 50px;
    }
}

.team-name {
    text-align: center;
    margin-top: 24px;
    font-size: 20px;
    font-weight: 600;
}

.match-details {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.match-date, .match-referee {
    font-size: 14px;
    color: var(--color-text-secondary);
    strong {
        color: var(--color-text-primary);
    }
}

.match-score {
    margin-top: 12px;
    display: flex;
    align-items: center;
}

.match-score-number {
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    &--leading {
        color: var(--color-theme-primary);
    }
}

.match-score-divider {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-icon);
    margin-left: 10px;
    margin-right: 10px;
}

.match-time-lapsed {
    color: #DF9443;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
}

.match-referee {
    margin-top: 12px;
}

.match-bet-options {
    display: flex;
    margin-top: 8px;
    padding-bottom: 12px;
}

.match-bet-option {
    margin-left: 4px;
    margin-right: 4px;
    border: 1px solid var(--color-text-icon);
    background-color: #F9f9f9;
    border-radius: 2px;
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 600;
    padding: 4px 8px;
}

.match-bet-place {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    border: 0;
    background-color: var(--color-theme-primary);
    border-radius: 6px;
    padding: 10px 48px;
    color: rgba(#fff, 0.9);
    font-size: 14px;
    box-shadow: 0 4px 8px 0 rgba(#303030, 0.25);
}

// Codepen spesific styling - only to center the elements in the pen preview and viewport
.container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
// End Codepen spesific styling
 

رابعًا قم بتخصيص مكان عرض الاضافة فى المدونة لتعرض نتيجة المباريات ولصق كود ال html  التالي :

<div class="container">
    <!-- code here -->
    <div class="match">
        <div class="match-header">
            <div class="match-status">مباشر</div>
            <div class="match-tournament"><img src="https://assets.codepen.io/285131/pl-logo.svg" />الدوري الإنجليزي</div>
            <div class="match-actions">
                <button class="btn-icon"><i class="material-icons-outlined">grade</i></button>
                <button class="btn-icon"><i class="material-icons-outlined">add_alert</i></button>
            </div>
        </div>
        <div class="match-content">
            <div class="column">
                <div class="team team--home">
                    <div class="team-logo">
                        <img src="https://assets.codepen.io/285131/whufc.svg" />
                    </div>
                    <h2 class="team-name">ويست هام</h2>
                </div>
            </div>
            <div class="column">
                <div class="match-details">
                    <div class="match-date">
                        12 Aug at <strong>19:00</strong>
                    </div>
                    <div class="match-score">
                        <span class="match-score-number match-score-number--leading">2</span>
                        <span class="match-score-divider">:</span>
                        <span class="match-score-number">0</span>
                    </div>
                    <div class="match-time-lapsed">
                        72'
                    </div>
                    </div>
                        </div>

            <div class="column">
                <div class="team team--away">
                    <div class="team-logo">
                        <img src="https://assets.codepen.io/285131/chelsea.svg" />
                    </div>
                    <h2 class="team-name">تشيلسي</h2>
                </div>
            </div>
        </div>
    </div>
</div>

خامسًا وأخيرًا ثم تقوم بحفظ القالب وشاهد النتيجة بنفسك.

فى حالة تريد عمل تعديلات أكثر على الاضافة أو الاستفسارات اترك تعليقا بالأسفل .

 

شارك المقالة عبر:

إقرأ أيضا