How to make a cool text ticker widget on blogspot

This time, the tips from Enblog.us Blogger are about how to install a text ticker widget in Blogger using only CSS. I created this tutorial at the request of a fellow blogger who wanted to install a Subscription Box on their blog.

Actually, for those who understand blog coding, it might not be difficult to find code on a blog page, because all the desired code can be easily copied via Inspect Elements or Page Source from the blog page. However, as ethical human beings, asking for permission is the best thing to do.

{getCard} $type={custom} $title={Live Preview} $info={Result} $button={demo} $icon={}

Without further ado, you just need to follow these simple steps.

How to Install a Cool Text Ticker Widget in Blogger

First, open Blogger > Click the Theme menu > Click Edit HTML > Then find and add the code below before ]]></b:skin> Or </style>

/*-- Ticker CSS --*/
@-webkit-keyframes ticker{0%{transform:translate3d(25%,0,0)}100%{transform:translate3d(-25%,0,0)}}@keyframes ticker{0%{transform:translate3d(25%,0,0)}100%{transform:translate3d(-25%,0,0)}}
.textTicker,span.enblog-heading{line-height:1.4}
.textTicker{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;overflow:hidden;padding-bottom:0}
.textTicker .widget-content{width:400vw;display:flex;flex-direction:row;align-items:flex-start;justify-content:space-around;transform:translate3d(25%,0,0);color:transparent;-webkit-text-stroke-width:1px;-webkit-text-stroke-color:rgb(23 37 65 / 34%);font-size:100px;font-weight:600;white-space:nowrap;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:ticker;animation-name:ticker;-webkit-animation-duration:30s;animation-duration:30s;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}
.textTicker .widget-content:nth-child(2n){animation-direction:reverse}
[data-theme=dark]  .textTicker .widget-content{-webkit-text-stroke-width:1px;-webkit-text-stroke-color:rgb(23 37 65 / 34%)}
@media screen and (max-width:1024px){.textTicker .widget-content{font-size:80px}}

You can also directly paste the CSS below just before the </head> tag.

<style>
//<![CDATA[
/*-- Ticker CSS --*/
@-webkit-keyframes ticker{0%{transform:translate3d(25%,0,0)}100%{transform:translate3d(-25%,0,0)}}@keyframes ticker{0%{transform:translate3d(25%,0,0)}100%{transform:translate3d(-25%,0,0)}}
.textTicker,span.enblog-heading{line-height:1.4}
.textTicker{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;overflow:hidden;padding-bottom:0}
.textTicker .widget-content{width:400vw;display:flex;flex-direction:row;align-items:flex-start;justify-content:space-around;transform:translate3d(25%,0,0);color:transparent;-webkit-text-stroke-width:1px;-webkit-text-stroke-color:rgb(23 37 65 / 34%);font-size:100px;font-weight:600;white-space:nowrap;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:ticker;animation-name:ticker;-webkit-animation-duration:30s;animation-duration:30s;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}
.textTicker .widget-content:nth-child(2n){animation-direction:reverse}
[data-theme=dark]  .textTicker .widget-content{-webkit-text-stroke-width:1px;-webkit-text-stroke-color:rgb(23 37 65 / 34%)}
@media screen and (max-width:1024px){.textTicker .widget-content{font-size:80px}}
//]]>
</style>

After that, don't forget to save.
Next, place the following code freely, either below </header> or <main class='main'>, and it can also be above the Footer.
Here is the Widget Code

<b:section class='textTicker' id='textTicker' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML87' locked='true' title='Widget HTML #2' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[Just to share tricks & tips + interesting information that is useful for the whole world and outer space. Enjoy!]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:content'>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>

It is also possible to only install the Style section, later you just need to add an HTML widget in Layout

<b:section class='textTicker' id='textTicker' maxwidgets='1' showaddelement='no'/>

Change the text I marked according to your preference. After that, save and see the results.
Ok done! That's all for now for tips on How to Install a Cool Text Ticker Widget in Blogger. If you don't understand, please leave a comment below.