
Eu encontrei um tutorial bem legal no blog da Dany, para ajudar a organizar as postagens com textos muito longos. Adicione rolagem no meio do seu post facilitando na leitura e personalização. Confira o resultado do efeito no final do texto abaixo descansando o mouse nas setinhas ▲▼.
.gif)
----------------------------------------------------------------------------------
Para utilizar o efeito marque a opção HTML,
Veja o exemplo abaixo.
Veja o exemplo abaixo.
----------------------------------------------------------------------------------
Copie o código abaixo e cole no Post.
<div style="height: 100px; overflow: hidden; position: relative; width: 300px;">
<div id="container" style="position: absolute; top: 0px; width: 300px;">
<!--Inicio do texto----------------------------->
ESCREVA O SEU TEXTO AQUI!
<!--Final do texto------------------------------>
</div></div>
<table style="font-family: Comic Sans MS; font-size: 12px; text-align: right; width: 300px;"><tbody>
<tr><td><div align="right">
<a href="http://www.blogger.com/blogger.g?blogID=3617655987223293965#" onmouseout="clearTimeout(move.to)" onmouseover="move('container',5)">▲</a> <a href="http://www.blogger.com/blogger.g?blogID=3617655987223293965#" onmouseout="clearTimeout(move.to)" onmouseover="move('container',-5)"> ▼</a></div>
</td> </tr>
</tbody></table>
<script type="text/javascript">
/******************************************
* Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/
function move(id,spd){
var obj=document.getElementById(id),max=-obj.offsetHeight+obj.parentNode.offsetHeight,top=parseInt(obj.style.top);
if ((spd>0&&top<=0)||(spd<0&&top>=max)){
obj.style.top=top+spd+"px";
move.to=setTimeout(function(){ move(id,spd); },135);
}
else {
obj.style.top=(spd>0?0:max)+"px";
}}
</script>
<div id="container" style="position: absolute; top: 0px; width: 300px;">
<!--Inicio do texto----------------------------->
ESCREVA O SEU TEXTO AQUI!
<!--Final do texto------------------------------>
</div></div>
<table style="font-family: Comic Sans MS; font-size: 12px; text-align: right; width: 300px;"><tbody>
<tr><td><div align="right">
<a href="http://www.blogger.com/blogger.g?blogID=3617655987223293965#" onmouseout="clearTimeout(move.to)" onmouseover="move('container',5)">▲</a> <a href="http://www.blogger.com/blogger.g?blogID=3617655987223293965#" onmouseout="clearTimeout(move.to)" onmouseover="move('container',-5)"> ▼</a></div>
</td> </tr>
</tbody></table>
<script type="text/javascript">
/******************************************
* Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/
function move(id,spd){
var obj=document.getElementById(id),max=-obj.offsetHeight+obj.parentNode.offsetHeight,top=parseInt(obj.style.top);
if ((spd>0&&top<=0)||(spd<0&&top>=max)){
obj.style.top=top+spd+"px";
move.to=setTimeout(function(){ move(id,spd); },135);
}
else {
obj.style.top=(spd>0?0:max)+"px";
}}
</script>
----------------------------------------------------------------------------------
Nenhum comentário:
Postar um comentário