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

طريقة تركيب

1. إبحث في القالب على </head>
2. ضع الكود التالي فوقه

<style type="text/css">
    /*<![CDATA[*/
    .header-match{background-image:url(https://cdn.statically.io/img/1.bp.blogspot.com/-xY5wE1YDYsA/X7aib5v2_kI/AAAAAAAAHPQ/lh-5PtC_OoIvpAvB1sQR4BjkTVeiKCfrgCLcBGAsYHQ/s1600/945oec5w1.jpg);background-size:cover;background-position:50% 100%;width:100%;position:relative;color:#FFF;padding:10px;text-align:center;margin-bottom:28px;border-bottom:5px solid #eee} .header-match>.top{text-align:center} .header-match>.bottom{background:#FFF;border-radius:3px;position:relative;bottom:-28px;box-shadow:0 0 7px -3px #000;display:inline-block} .header-match>.top>div{display:inline-block;position:relative;width:40%;text-align:center} .header-match>.top>div .logo-club{max-width:100px;margin:0 auto;margin-bottom:5px} .header-match>.top>div .logo-club img{width:100%;height:auto;vertical-align:top} .header-match>.top>div:after{position:absolute;font-size:4em;content:'vs';right:-30px;top:5px} .header-match>.top .home:after{display:none} .header-match>.top>div h3{font-size:22px} .header-match>.bottom span{color:#000;padding:2px 10px;border-radius:3px;margin-left:5px;display:inline-block;font-size:15px} .header-match>.bottom span i{display:inline-block;margin-left:5px} .header-match>.bottom span .television-icon:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-tv' viewBox='0 0 512 512'%3E%3Cpath fill='%23000000bf' d='M400 244v-8c0-6.6 5.4-12 12-12h8c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12h-8c-6.6 0-12-5.4-12-12zm12 76h8c6.6 0 12-5.4 12-12v-8c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v8c0 6.6 5.4 12 12 12zm-36-136.5s-1.5-7.5-144-7.5-144.5 7.5-144.5 7.5S80 184 80 288s7.5 104.5 7.5 104.5S88 400 232 400s144-7.5 144-7.5 7.5-.5 7.5-104.5-7.5-104.5-7.5-104.5zM512 144v288c0 26.5-21.5 48-48 48h-16v32h-48l-10.7-32H122.7L112 512H64v-32H48c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h140.9l-54-55.2c-9.3-9.5-9.1-24.7.3-33.9 9.5-9.3 24.7-9.1 33.9.3L256 96l86.9-88.8c9.3-9.5 24.5-9.6 33.9-.3 9.5 9.3 9.6 24.5.3 33.9l-54 55.2H464c26.5 0 48 21.5 48 48zm-48 0H48v288h416V144z'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100%;width:17px;height:17px;display:block;content:"";margin-bottom:-1.2px} .header-match>.bottom span .clock-icon:before{background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000000bf'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z' clip-rule='evenodd' /%3E%3C/svg%3E");background-size:91%;width:21px;height:17px;display:block;content:""} .header-match>.bottom span .trophy-icon:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-cup' viewBox='0 0 576 512'%3E%3Cpath fill='%23000000bf' d='M448 64V16c0-8.8-7.2-16-16-16H144c-8.8 0-16 7.2-16 16v48H16C7.2 64 0 71.2 0 80v60.8C0 201.1 68.3 266 159.6 283.4c27.4 57.9 68.1 88.2 104.4 97.4V464h-64c-22.1 0-40 17.9-40 40 0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8 0-22.1-17.9-40-40-40h-64v-83.2c36.3-9.3 77-39.5 104.4-97.4C507.5 266.1 576 201.2 576 140.8V80c0-8.8-7.2-16-16-16H448zM48 140.8V112h80c0 39.2 2.1 76.2 12.3 116.8-55.1-18.9-92.3-58.9-92.3-88zM288 336c-53 0-112-78.4-112-216V48h224v72c0 140.5-60.8 216-112 216zm240-195.2c0 29.1-37.2 69.1-92.3 88C445.9 188.2 448 151.1 448 112h80v28.8z'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100%;display:block;content:"";width:17px;height:17px;margin-bottom:-3px} .header-match>.bottom span .microphone-icon:before{display:block;content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-speaker' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000bf' d='M10.403,15.231v2.035h2.827c0.223,0,0.403,0.181,0.403,0.404c0,0.223-0.181,0.403-0.403,0.403H6.77c-0.223,0-0.404-0.181-0.404-0.403c0-0.224,0.181-0.404,0.404-0.404h2.826v-2.035C6.89,15.024,4.751,12.758,4.751,10c0-0.223,0.181-0.403,0.404-0.403S5.559,9.777,5.559,10c0,2.449,1.992,4.441,4.441,4.441c2.449,0,4.441-1.992,4.441-4.441c0-0.223,0.182-0.403,0.404-0.403s0.403,0.18,0.403,0.403C15.248,12.758,13.108,15.024,10.403,15.231 M13.026,4.953V10c0,1.669-1.357,3.027-3.027,3.027S6.972,11.669,6.972,10V4.953c0-1.669,1.358-3.028,3.028-3.028S13.026,3.284,13.026,4.953M12.221,4.953c0-1.225-0.996-2.22-2.221-2.22s-2.221,0.995-2.221,2.22V10c0,1.225,0.996,2.22,2.221,2.22s2.221-0.995,2.221-2.22V4.953z'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100%;width:20px;height:20px;margin-bottom:-4px} @media screen and (max-width:992px){.header-match>.top>div:after{top:28px;font-size:3.8em}} @media screen and (max-width:768px){.header-match>.top>div .logo-club img{width:65px}.header-match>.top>div:after{font-size:3em}.header-match>.top>div h3{font-size:19px}} @media screen and (max-width:480px){.header-match>.top>div .logo-club img{width:50px}.header-match>.top>div:after{top:30px;font-size:2em;right:-15px}.header-match>.top>div h3{font-size:15px}} @media screen and (max-width:400px){.header-match>.top>div{margin:0 10px}.header-match>.top>div .logo-club{width:50px;height:50px}.header-match>.top>div .logo-club img{width:auto;height:100%}.header-match>.top>div h3,.header-match>.bottom span{font-size:12px}.header-match>.bottom span i:before{width:15px!important;height:14px!important}.header-match>.bottom span{display:block;width:100%}.header-match>.bottom{width:100%}.header-match{border-radius:10px 10px 0 0;padding-top:20px}.header-match>.top>div:after{top:6px;font-size:2em;right:-24px}} 
  /*]]>*/ 
    </style>  

3. الان احفظ القالب وضع الكود التالي في كل موضوع تريد ظهور فيه الإضافة

شرح التعامل مع لوحة التحكم