Hier sehen Sie die Einbindung eines Fussball-Tickers auf einer Website
Nullam rutrum metus neque.
Vivamus ut mauris varius neque maximus.
Cursus risus vel rhoncus.
Aenean risus enim, lobortis nec orci.
<div id="tickaroo-liveblog"></div> <script type="text/javascript"> (function(e, t, n, r, i, s, o) { e[i] = e[i] || function() { (e[i].q = e[i].q || []).push(arguments) }, e[i].l = 1 * new Date; s = t.createElement(n), o = t.getElementsByTagName(n)[0]; s.async = 1; s.src = r; o.parentNode.insertBefore(s, o) })(window, document, "script", "//cdn.tickaroo.com/embedjs/tik3.js", "_tik"); _tik("embedLiveblog", { container: "#tickaroo-liveblog", id: tickerID, clientId: clientID, locale: 'en', limit: 40, showTeamIcons: true, showWebEmbeds: 'consent_handling' }); </script>
#tickaroo-liveblog .tik3-ticker { line-height: inherit; margin-bottom: 2em; min-width: 250px; } @media screen and (max-width: 700px) { #tickaroo-liveblog .tik3-ticker { font-size: 14px; } } #tickaroo-liveblog .tik3-scores .tik3-event-item, #tickaroo-liveblog .tik3-ticker .tik3-event-item { padding-top: 2rem; padding-bottom: 2rem; } #tickaroo-liveblog .tik3-scores.tik3-ticker-wide .tik3-event-item-content { max-width: 850px; } #tickaroo-liveblog .tik3-ticker.tik3-ticker-wide .tik3-event-item-content { max-width: 850px; } #tickaroo-liveblog .tik3-ticker .tik3-event-item-content-media-list { margin-top: 0; } #tickaroo-liveblog .tik3-ticker .tik3-event-item-content-web-embed-item iframe { margin: 0 auto !important; display: block !important; min-width: 0 !important; } #tickaroo-liveblog .tickaroo-video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } #tickaroo-liveblog .tickaroo-video-container iframe[src*="youtube.com"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #tickaroo-liveblog .tik3-ticker .tik3-event-item-content-media-item, #tickaroo-liveblog .tik3-ticker .tik3-media-item img { width: 100%; max-width: none; } #tickaroo-liveblog .tik3-button-item a { color: #fff; background-color: #db0000; text-transform: uppercase; transition: 0.3s; font-weight: 600; } #tickaroo-liveblog .tik3-button-item a:hover { box-shadow: 0 0 0 1px #db000d; } #tickaroo-liveblog .tik3-ticker .tik3-flex-event-meta { margin-bottom: 0.5rem; } #tickaroo-liveblog .tik3-ticker .tik3-event-item-meta-timestamp { color: #777; } #tickaroo-liveblog .tik3-ticker .tik3-event-item-meta-timestamp .tik3-event-item-meta-timestamp-date, #tickaroo-liveblog .tik3-ticker .tik3-event-item-meta-timestamp .tik3-event-item-meta-timestamp-time { font-weight: 600; } #tickaroo-liveblog .tik3-event-item-meta-state span.tik3-even-item-meta-state-text { font-size: 1.3em; } @media screen and (max-width: 700px) { #tickaroo-liveblog .tik3-ticker .tik3-flex-event-meta-reporter .tik3-flex-event-content-meta-reporter__name { display: none; } } .tickaroo-first-heading { color: #db0000; } #tickaroo-liveblog .tik3-ticker .tik3-event-item-highlight { background: #f9f9f9; padding: 2rem 1rem; } .tik3-ticker .tik3-multi-select-filter-navigation-item select { border: 1px solid #dedede; background: #fff; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; padding: 0.25rem 1rem; padding-right: 2rem; background: #fff center right 0.5rem/auto 0.5em no-repeat url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIzMzZweCIgaGVpZ2h0PSIxOTNweCIgdmlld0JveD0iMCAwIDMzNiAxOTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+UGF0aDwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0xNjgsMTM1LjEgTDI5NSw4IEMzMDQuNCwtMS40IDMxOS42LC0xLjQgMzI4LjksOCBDMzM4LjIsMTcuNCAzMzguMiwzMi42IDMyOC45LDQyIEwxODUsMTg2IEMxNzUuOSwxOTUuMSAxNjEuMywxOTUuMyAxNTEuOSwxODYuNyBMNyw0Mi4xIEMyLjMsMzcuNCAwLDMxLjIgMCwyNS4xIEMwLDE5IDIuMywxMi44IDcsOC4xIEMxNi40LC0xLjMgMzEuNiwtMS4zIDQwLjksOC4xIEwxNjgsMTM1LjEgWiIgaWQ9IlBhdGgiIGZpbGw9IiM3Nzc3NzciIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPiAgICA8L2c+PC9zdmc+); } #tickaroo-liveblog .tik3-ticker .tik3-media-item-title { margin-top: 0.5rem; } #tickaroo-liveblog .tik3-ticker .tik3-event-tag-list .tik3-event-tag-item { padding: 0.2em 0; } #tickaroo-liveblog .tik3-ticker .tik3-event-tag-list .tik3-ref-item { border-radius: 2rem; padding: 0.25rem 0.5rem; transition: 0.3s; font-size: 0.8em; } #tickaroo-liveblog .tik3-ticker .tik3-event-tag-list .tik3-ref-item:hover { border-color: #777; } #tickaroo-liveblog .tik3-ticker .tik3-scoreboard-team { display: flex; align-items: center; } #tickaroo-liveblog .tik3-ticker .tik3-scoreboard-team img { margin-right: 1rem; } #tickaroo-liveblog .tik3-event-item-icon { position: absolute; transform: translate(-130%, 50%); background: #fff; border-radius: 50%; padding: 0.25rem; } #tickaroo-liveblog .tik3-flex-event-meta-state__time + .tik3-event-item-icon { position: absolute; transform: translate(-130%, 0); } #tickaroo-liveblog .tik3-ticker .tik3-event-item-content .tik3-event-item-content-headline { margin-bottom: 0.5rem; } @media screen and (max-width: 700px) { #tickaroo-liveblog .tik3-ticker .tik3-event-tag-list .tik3-event-tag-item { font-size: 0.8em; } } #tik3-event-item-highlights .tik3-event-item-meta-state { padding: 0 0.25rem; text-align: center; } @media (max-width: 700px) { #tickaroo-liveblog .tik3-scoreboard-row1, #tickaroo-liveblog .tik3-scoreboard-row2, #tickaroo-liveblog .tik3-flex-team-game-highlight__score { font-size: 1em; } #tickaroo-liveblog .tik3-scoreboard-score.tik3-scoreboard-main-score { font-size: 1.5em; } }