all codes for expanding scrollbox crd tut

<!--- CSS STUFF --->
<style>
#container01 {
border-width:7px;
border-style:solid;
border-image: url("https://i.imgur.com/8Tk8PKV.gif") 7 fill round;
width: 20em;
margin:auto;
}

#text01 a {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
</style>


<!--- TYPING NAME --->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Yomogi&display=swap" rel="stylesheet">

<style>
#news {
position: relative;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
z-index: 1;
right: -10.5px;
font-family: 'Yomogi', cursive;
font-size:1.5em;
color: #fff;
font-weight: bold;
}

#cursor {
position: relative;
z-index: 1;
right: -1.5px;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
font-family: 'Yomogi', cursive;
font-size:0.875em;
color: #fff;
font-weight: bold;
}

</style>

<span id="news"></span><span id="cursor">:-)</span>

<script type="text/javascript">
// <![CDATA[
var news=Array("name");
var cursor=""; // set cursor
var delay=3; // seconds between each news item

/***************************\
* News Ticker Text Effect *
*(c)2004-14 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var newsp, cursp, flash, item=0;

if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}

addRVLoadEvent(teleprint);

function teleprint () { if (document.getElementById) {
var span=document.getElementById("news");
while (span.childNodes.length) span.removeChild(span.childNodes[0]);
delay*=1000;
newsp=document.createElement("span");
cursp=document.createElement("span");
cursp.appendChild(document.createTextNode(String.fromCharCode(160)+cursor));
span.appendChild(newsp);
span.appendChild(cursp);
ticker();
}}

function ticker() {
var i;
while (newsp.childNodes.length) newsp.removeChild(newsp.childNodes[0]);
newsp.appendChild(document.createTextNode(news[item].substring(0,1)));
for (i=1; i<news[item].length; i++) setTimeout('newsp.firstChild.nodeValue="'+news[item].substring(0, i+1)+'"', 100*i);
if (news[item].indexOf("www")!=-1) setTimeout('linkit('+item+')', 100*i);
setTimeout('flash=setInterval("cursp.style.visibility=(cursp.style.visibility==\'visible\')?\'hidden\':\'visible\'", 234)', 100*i)
setTimeout('clearInterval(flash)', delay);
setTimeout('cursp.style.visibility="visible"', delay);
setTimeout('ticker()', delay);
item=++item%news.length;
}
function linkit(q) {
var a,p,e,l;
p=news[q].indexOf("www");
e=news[q].indexOf(" ", p);
if (e==-1) e=news[q].length;
l=news[q].substring(p, e);
while (newsp.childNodes.length) newsp.removeChild(newsp.childNodes[0]);
newsp.appendChild(document.createTextNode(news[q].substring(0, p)));
a=document.createElement("a");
a.href="http://"+l;
a.appendChild(document.createTextNode(l));
newsp.appendChild(a);
newsp.appendChild(document.createTextNode(news[q].substring(e)));
}
// ]]>
</script>


<!--- EXPANDING SCROLLBOX 1 --->
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""><link href="https://fonts.googleapis.com/css2?family=Mali:wght@500&amp;display=swap" rel="stylesheet">

<div id="conte">
<strong>text</strong> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
</div>

<style>
#conte {
border: 3px double #f0b5c0;
border-radius: 8px;
background: #fff ;
width: 110px;
height: 70px;
transition: 0.6s ease;
padding: 5px;
font-family: 'Mali', cursive;
text-align: left;
font-size:0.75em;
overflow: scroll;
position: relative;
right: -8em;
bottom: 3.5em;
}

#conte:hover {
background: #f0c3cf;
width: 140px;
height: 90px;
}
</style>


<!--- EXPANDING SCROLLBOX 2 --->
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""><link href="https://fonts.googleapis.com/css2?family=Mali:wght@500&amp;display=swap" rel="stylesheet">

<div id="conte2">
<strong>text</strong> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
</div>

<style>
#conte2 {
border: 3px double #f0b5c0;
border-radius: 8px;
background: #fff ;
width: 110px;
height: 70px;
transition: 0.6s ease;
padding: 5px;
font-family: 'Mali', cursive;
text-align: left;
font-size:0.75em;
overflow: scroll;
position: relative;
right: -8em;
bottom: 3.5em;
}

#conte2:hover {
background: #f0c3cf;
width: 140px;
height: 90px;
}
</style>


<!--- EXPANDING SCROLLBOX 3 --->
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""><link href="https://fonts.googleapis.com/css2?family=Mali:wght@500&amp;display=swap" rel="stylesheet">

<div id="conte3">
<strong>text</strong> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
</div>

<style>
#conte3 {
border: 3px double #f0b5c0;
border-radius: 8px;
background: #fff ;
width: 110px;
height: 70px;
transition: 0.6s ease;
padding: 5px;
font-family: 'Mali', cursive;
text-align: left;
font-size:0.75em;
overflow: scroll;
position: relative;
right: -8em;
bottom: 3.5em;
}

#conte3:hover {
background: #f0c3cf;
width: 140px;
height: 90px;
}
</style>