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

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

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

معاينة الاضافة من هنا

طريقة تركيب

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

<b:if cond='data:view.isPost'>
  <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>
</b:if>