08/11/2014

Adicionando Texto com Rolagem

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 ▲▼.







Para Onde Vão As Aves :--------------------------------------------------

 Frente ao mar no crepúsculo eu pude templar , um bando de aves marinhas no último revoar , iam encontrar o horizonte sem nem se preocupar , se quando a noite chegasse teriam onde pousar , meu rumo também era assim não ter para onde ir , não ter certeza de voltar , não saber se tinha onde chegar , Eu queria ir com as aves e saber onde elas vão chegar. 

 Foi assim pensando que ali eu adormeci , sonhei que existia uma ilha e o Mistério  conheci , quando acordei vi o sol que nascia e logo avistei , que as aves marinhas voltavam cantando mais uma vez meu rumo então eu achei , Jesus Cristo eu encontrei , ele é a ilha onde eu vou chegar, se a noite em trevas me deixar , vou continuar voando ele é a ilha onde vou chegar. Foi assim pensando que ali eu adormeci , sonhei que existia uma ilha e o Mistério conheci , quando acordei vi o sol que nascia e logo avistei , que as aves marinhas voltavam cantando mais uma vez 

 meu rumo então eu achei , Jesus Cristo eu encontrei  , ele é a ilha onde eu vou chegar, se a noite em trevas me deixar , vou continuar voando ele é a ilha onde vou chegar.


----------------------------------------------------------------------------------

Para utilizar o efeito marque a opção HTML, 
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>

----------------------------------------------------------------------------------

Nenhum comentário:

Postar um comentário