#tutoriais scripts

[reciteoseuamor]

Textos aleatórios

Os textos seram exibidos de maneira aleatória, você pode regular a quantidade mudando o valor 5 para o valor referente a quantidade desejada.

<script language="JavaScript"> var r_text = new Array (); r_text[0] = "Frase 1"; r_text[1] = "Frase 2"; r_text[2] = "Frase 3"; r_text[3] = "Frase 4"; r_text[4] = "Frase 5"; var i = Math.floor(5*Math.random()) document.write(r_text[i]); </script>

Não faça alterações no script, ele pode não funcionar corretamente.

[reciteoseuamor]

Menu Lava lamp

Antes de mais nada, conheçam o autor do script. Veja o menu aqui. Sei que existem 45624 mil tutoriais do menu lava lamp, só que alguns deles não explicam como editar o menu, vou tentar explicar como você pode personalizar.

01)Insira os scripts acima da tag </head> (os scripts abaixo, foram hospeados por mim)

<!-- lava lamp by marlívia --> <script type="text/javascript" src="http://marlivia-tutorial.webs.com/jquery-1.1.3.1.min.js"></script> <script type="text/javascript" src="http://marlivia-tutorial.webs.com/jquery.lavalamp.js"></script> <!-- Optional --> <script type="text/javascript" src="http://marlivia-tutorial.webs.com/jquery.easing.min.js"></script> <script type="text/javascript"> $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })}); </script>

02)No lugar desejado, adicione o código abaixo para exibir o menu :

<div class="lavaLamp"> <li><a href="url-da-página.com">About</a></li> <li><a href="url-da-página.com">Ask-me</a></li> <li><a href="url-da-página.com">Extras</a></li> <li><a href="url-da-página.com">Links</a></li> <li><a href="url-da-página.com">Créditos</a></li> <li><a href="url-da-página.com">Home</a></li> <li><a href="url-da-página.com">Link</a></li> </div>

Agora vamos partir para o css, vamos personaliza-lo. Ah, baixem o menu, se desejarem. Adicione os códigos a seguir no seu css!: a)Posicionamento:

/**** menu lava lamp editado por Marlívia!*/ .lavaLamp { float:left;/* posicionado ao lado esquerdo!*/ margin:1em 0 2em 0; /* margin superior e inferior! */ background-color: #D3E6E6;/* cor do fundo do menu! */ padding:10px; /* não altere!*/ width:425px; /* largura do menu!*/ height:22px; /* altura do menu !*/ position:relative; /* posição! */ display:block; /* importante!*/ }

b)Links :

/** menu lava lamp! */ .lavaLamp li { float: left; list-style: none; } /** edite as cores!*/ .lavaLamp li a { font-size: 10px; /* tamanho da fonte! */ font-family: verdana; /* fonte! */ font-weight: bold; /* negrito! */ text-decoration: none; /* underline none!*/ text-transform: uppercase; /* letrás maiúsculas! */ color: #fff; /* cor do link! */ text-align: center; /* centralizado! */ } /* não precisa editar!*/ .lavaLamp li a { outline: none; height: 22px; top: 7px; z-index: 10; letter-spacing: 0; float: left; display: block; margin: auto 10px; position: relative; overflow: hidden;}

c)Por ultimo, o efeito deslizante do menu:

/* menu lava lamp!*/ .lavaLamp li.back{ background-color: #F1A0AB;/* cor do fundo */ width: 9px; /* largura! */ top:15px; /* não altere!*/ height: 30px; /* altura!*/ position: absolute; /* importante!*/ } .lavaLamp li.back .left { background-color: #F1A0AB;/* cor do fundo */ height: 22px; /*altura!*/ }

Opcional: Se você desejar deixar com as bordas arredondadas, acresente no seu css:

/** menu lava lamp!*/ .lavaLamp,.lavaLamp li.back,.lavaLamp li.back .left { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} /** crédite! marlívia tumblr */

Daí é só modificar de acordo com seu gosto, lembre-se se for alterar algum valor, por exemplo a altura, mude a altura dos outros códigos, para não ficar desproporcional.

[reciteoseuamor]

Menu de abas

Autor do script Barelyfitz

01)Baixe aqui o script (o download é automático), em seguida hospede o script em seu servidor, caso não tenha utilize a ferramenta de upload do tumblr. 02)Após hospedar o script adicione o código baixo antes da tag </head> do seu theme (substituindo pelo link do arquivo hospedado):

<script type="text/javascript" src="http://www.seu-servidor-com.br/tabber.js"></script>

03)No seu css adicione (editei o css, é só você adicionar as cores desejadas):

/* menu de abas editado by marlivia */ .tabberlive .tabbertabhide {display: none;} .tabberlive {margin-top: 1em;} ul.tabbernav {margin: 0; padding: 3px 0; font-family: verdana; font-size: 10px;} ul.tabbernav li {list-style: none; margin: 0; display: inline;} ul.tabbernav li a {padding: 3px 0.5em; margin-left: 3px; border: 1px solid #COR;background-color:#COR; border-bottom: none; text-decoration: none;} ul.tabbernav li a:link {color: #COR;} ul.tabbernav li a:visited {color: #COR;} ul.tabbernav li a:hover, ul.tabbernav li.tabberactive a {color: #COR; background-color: #COR; border: 1px solid #COR;} ul.tabbernav li.tabberactive a:hover {color: #COR; background-color: #COR; border: 1px solid #COR;} .tabberlive .tabbertab {padding: 5px; border: 0; border-top: 0;} .tabberlive .tabbertab h2 {display: none;} .tabberlive .tabbertab h3 {display: none;} .tabberlive#tab2 .tabbertab {height: 200px; overflow: auto;} /* fim do menu de bars */

04)No local desejado, onde queira exibir o menu, adicione :

<div class="tabber"> <div class="tabbertab"> <h3>Aba 1</h3> Conteúdo da aba 1 </div> <div class="tabbertab" title="Aba 2"> Conteúdo da aba 2 </div> <div class="tabbertab" title="Aba 3"> Conteúdo da aba 3 </div> </div>

[reciteoseuamor]

Script: Tooltips (balão nos links)

Autor do script

O script funciona corretamente (que por sinal utilizo aqui no blog), caso não consiga instalar mande-me uma mensagem.

01)Copie o código abaixo e cole antes da tag </head> ou abaixo da tag <head> do seu theme:

<!-- script tool tips --> <script type="text/javascript" src="http://marlivia-carmo.xp3.biz//tool-tips2.txt"></script> <script type="text/javascript" src="http://marlivia-carmo.xp3.biz//tool-tips.txt"></script> <!-- fim do script -->

02)Após adicionar os scripts acima em seu theme, localize novamente a tag </head> e logo acima dela coloque :

<style> /* // TOOL TIPS BY MARLÍVIA SE USAR CRÉDITE */ /* caixinha */ div#toolTip {position: absolute; background-color: #F0F0F0;border:1px solid #EEE; text-align: left; padding: 5px; -moz-border-radius: 5px; z-index: 1000;} /*cor da descrição do link */ div#toolTip p {margin: 0; padding: 0; color: #999999; font-family:verdana;font-size:12px;} /* cor do link */ div#toolTip p em {display: block; color: #000000;margin:2px 0 0 0; font-style: normal; font-weight:normal;} </style>

Ediando o Tooltips

Muitos me perguntaram como eu editei o "Tooltips", na verdade só retirei uma função que exibe o link, vou explicar com eu fiz: 01) abra o script no bloco de notas ou em qualquer editor, localize esta parte :

this.tip.innerHTML = "<p>"+anch.getAttribute('tip')+"<em>"+access+addy+"</em></p>";

E substitua por :

this.tip.innerHTML = "<p><img src=\"http://i42.tinypic.com/34ybclj.gif\"> "+anch.getAttribute('tip')+"</p>";

Em seguida salve, hospede e adicione após a tag <head> ou acima da tag </head>:) Você pode substitutir a imagem que vai apareçer do lado do link, é só substituir a o link que está em negrito.