![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2k7QdbhTbtsh6u7jISFjkGCHlQkpJOdb92R6JfyNwNHnrcEdlZNEOlioT1O9v3kvUZNDfj4rVDMNfdgaXnSYu0G_BUFQ4TbHElU50PTz31DiynTR5-HB4kjn9XSUE-NVvk33-7N9HZFo/s640/tumblr_loskxktY9m1qgo5u4o1_500.jpg)
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 ▲▼.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvy9FTpNFmb9LuWJwVxtAYKKCH8tBlzv68vNnkzokhDh8pv4ac4roVMvIspgQ5xeuPSbrmdxzqONrrdmnXcEFcfjEv9FLm2xAmdmT879OydiMuKoFhbpcaoCCzZO43qCxmiqCV8k8zOwSo/s1600/pixels_dp+(16).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