Que Seja Eterno..

[enquantovivermos-blog]

Menu Slide..:

Aprenda a colocar um menu slide no seu tumblr. Esse menu é aquele que tem apenas uma palavra ou frase que quando clicada abra várias opções de links. 1º Passo: Copiar o código abaixo e cola-lo imediatamente acima de </head>. <script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".links_body").hide(); $(".links_head").click(function(){ $(this).next(".links_body").slideToggle('fast'); }); }); </script> <style type="text/css"> .links_list { margin:0px; padding:0px; width:180px;} .links_head { padding-top:5px; padding-bottom:5px; cursor:pointer; position:relative; margin:1px; text-align:center;} .links_body { padding:10px; text-align:left; color: #fff; display:none;} </style> 2º Passo: Copie o código abaixo e cole na descrição. <div class="links_list"> <p class="links_head">PALAVRA</p> <div class="links_body"> <center> <a href="LINK">nome_do_link</a><br><a href="LINK">nome_do_link</a><br><a href="LINK">nome_do_link</a><br><a href="LINK">nome_do_link</a><br><a href="LINK">nome_do_link</a><br><a href="LINK">nome_do_link</a><br> </center> </div></div>                                                                                                            No Lugar de PALAVRA, coloque a palavra que vai ser clicada, no lugar de LINK coloque o link e no lugar de nome_do_link coloque o que vai aparecer no lugar do link.                                                                                         Para colocar ou retirar um link basta adicionar ou eliminar essa parte do código: <a href="LINK">nome_do_link</a><br> 3º Passo: Veja se esta tudo certo com o seu theme, se sim salve, vá no seu tumblr e teste para ver se esta tudo funcionando direito.

[enquantovivermos-blog]

Imagem se movendo..:

Seguindo os passos abaixo você irá aprender a colocar imagens passando na sua barra lateral. 

1º Passo: Copie o código abaixo                                                                                                                                                    <marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200"> <a href="url link" target="_blank"><img src="LINK" /></a> <a href="url linkl" target="_blank"><img src="LINK" /></a> </marquee>2º Passo: No lugar de LINK coloque o link das imagens que vão ficar se movendo.                      3º Passo: Copie o código já com os links e cole-o na sua descrição.                                            4º Passo: Veja se as imagens estão se movendo na barra lateral do seu theme, se sim salve e saia, se não, cancele.

[enquantovivermos-blog]

Link Colorido..:

Aprenda a deixar os links do seu tumblr mudando de cor quando alguém passar o mouse por cima deles.   

1º Passo: Copie o código abaixo

<script type='text/javascript'> //<![CDATA[ var rate = 50; if (document.getElementById) window.onerror=new Function("return true") var objActive; // The object which event occured in var act = 0; // Flag during the action var elmH = 0; // Hue var elmS = 128; // Saturation var elmV = 255; // Value var clrOrg; // A color before the change var TimerID; // Timer ID if (document.all) { document.onmouseover = doRainbowAnchor; document.onmouseout = stopRainbowAnchor; } else if (document.getElementById) { document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT); document.onmouseover = Mozilla_doRainbowAnchor; document.onmouseout = Mozilla_stopRainbowAnchor; } function doRainbow(obj) { if (act == 0) { act = 1; if (obj) objActive = obj; else objActive = event.srcElement; clrOrg = objActive.style.color; TimerID = setInterval("ChangeColor()",100); } } function stopRainbow() { if (act) { objActive.style.color = clrOrg; clearInterval(TimerID); act = 0; } } function doRainbowAnchor() { if (act == 0) { var obj = event.srcElement; while (obj.tagName != 'A' && obj.tagName != 'BODY') { obj = obj.parentElement; if (obj.tagName == 'A' || obj.tagName == 'BODY') break; } if (obj.tagName == 'A' && obj.href != '') { objActive = obj; act = 1; clrOrg = objActive.style.color; TimerID = setInterval("ChangeColor()",100); } } } function stopRainbowAnchor() { if (act) { if (objActive.tagName == 'A') { objActive.style.color = clrOrg; clearInterval(TimerID); act = 0; } } } function Mozilla_doRainbowAnchor(e) { if (act == 0) { obj = e.target; while (obj.nodeName != 'A' && obj.nodeName != 'BODY') { obj = obj.parentNode; if (obj.nodeName == 'A' || obj.nodeName == 'BODY') break; } if (obj.nodeName == 'A' && obj.href != '') { objActive = obj; act = 1; clrOrg = obj.style.color; TimerID = setInterval("ChangeColor()",100); } } } function Mozilla_stopRainbowAnchor(e) { if (act) { if (objActive.nodeName == 'A') { objActive.style.color = clrOrg; clearInterval(TimerID); act = 0; } } } function ChangeColor() { objActive.style.color = makeColor(); } function makeColor() { // Don't you think Color Gamut to look like Rainbow? // HSVtoRGB if (elmS == 0) { elmR = elmV; elmG = elmV; elmB = elmV; } else { t1 = elmV; t2 = (255 - elmS) * elmV / 255; t3 = elmH % 60; t3 = (t1 - t2) * t3 / 60; if (elmH < 60) { elmR = t1; elmB = t2; elmG = t2 + t3; } else if (elmH < 120) { elmG = t1; elmB = t2; elmR = t1 - t3; } else if (elmH < 180) { elmG = t1; elmR = t2; elmB = t2 + t3; } else if (elmH < 240) { elmB = t1; elmR = t2; elmG = t1 - t3; } else if (elmH < 300) { elmB = t1; elmG = t2; elmR = t2 + t3; } else if (elmH < 360) { elmR = t1; elmG = t2; elmB = t1 - t3; } else { elmR = 0; elmG = 0; elmB = 0; } } elmR = Math.floor(elmR).toString(16); elmG = Math.floor(elmG).toString(16); elmB = Math.floor(elmB).toString(16); if (elmR.length == 1) elmR = "0" + elmR; if (elmG.length == 1) elmG = "0" + elmG; if (elmB.length == 1) elmB = "0" + elmB elmH = elmH + rate; if (elmH >= 360) elmH = 0; return '#' + elmR + elmG + elmB; } //]]> </script>

2º Passo: Cole o código imediatamente depois de <head>, aperte Update Preview e veja se esta tudo certo com o seu tumblr, se estiver salve, vá para a sua página do tumblr, procure por um link e veja se deu certo.

[enquantovivermos-blog]

Reblog This Tumblr..:

Algumas pessoas vem perguntando como colocar um link em cada post escrito Reblog This ao invés do botão de Reblog. Vou ensinar no tutorial de hoje como fazer isso. Para quem não sabe, esse link facilita para as pessoas que visitam o seu tumblr de reblogarem os seus posts, e ele também permite que você reblog o seu próprio post. Bom, esse tutorial é bem simples... 1º Passo: Copiar o código abaixo: <a href="{ReblogURL}" target="_blank">Reblog This</a> 2º Passo: Há dois lugares para se colocar o link: acima ou abaixo do post. Para colocá-lo acima do post procure por: <div class="post"> e cole o código imediatamente abaixo do primeiro <div class="post"> que aparecer no seu código. NOTA: Se não achar o <div class="post"> no seu HTML procure por {block:Posts} e cole o código imediatamente abaixo disso. Para colocá-lo abaixo do post procure por: <div class="bottom"></div> e cole o código imediatamente antes do primeiro <div class="bottom"></div> que aparecer no seu código.  NOTA: Se não achar o <div class="bottom"></div> no seu HTML procure por {/block:Posts} e cole o código acima dele. 3º Passo:) Depois de colocar o código no lugar de sua preferência aperte Update Preview e veja se esta tudo certo com o seu theme, se estiver tudo ok salve e vá para o seu tumblr testar o link pra ver se ele funciona. NOTA: O link não funciona na página de customização do tumblr

[enquantovivermos-blog]

Imagem tremendo no Tumblr..:

Um efeito muito legal para colocar no tumblr é deixar as imagens do seu blog tremendo quando se passa o mouse por cima delas. É um efeito muito interessante e não muito difícil de se colocar.   1º Passo: Copie o código abaixo, vá no tumblr >> customize >> Advanced e cole o código no box de Custom Css ( caso não de certo dessa forma cole o código imediatamente antes de </style> )                                                                     .shakeht {

position:relative }

2ºPasso: Copie o código abaixo e cole imediatamente antes de </head>

  <script type="text/javascript"> var rector=3 var stopit=0 var a=1 function init(which){ stopit=0 shake=which shake.style.left=0 shake.style.top=0 } function rattleimage(){ if ((!document.all&&!document.getElementById)||stopit==1) return if (a==1){ shake.style.top=parseInt(shake.style.top)+rector+"px" } else if (a==2){ shake.style.left=parseInt(shake.style.left)+rector+"px" } else if (a==3){ shake.style.top=parseInt(shake.style.top)-rector+"px" } else{ shake.style.left=parseInt(shake.style.left)-rector+"px" } if (a<4) a++ else a=1 setTimeout("rattleimage()",50) } function stoprattle(which){ stopit=1 which.style.left=0 which.style.top=0 } </script>

3º Passo: Procure por {block:Photo} e apague de <img src… até /> e cole o código abaixo no lugar: (Olhe as imagens para compreender melhor)

<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500" class="shakeht" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()" /> 

Antes

  Depois 4º Passo: Aperte Update Preview e veja se esta tudo certo com o seu theme, se estiver tudo ok, salve e vá para o seu tumblr conferir o resultado. (Não da para ver as imagens tremendo na página de customização do tumblr).

[enquantovivermos-blog]

Wibiya - Barra de ferramentas no tumblr..:

Aprenda a colocar uma barra de ferramentas no seu tumblr, que pode incluir entre outras coisas, botões do Facebook, Twitter, Youtube, Foursquare e contador de pessoas online.   1º Passo: Acesse http://www.wibiya.com/ 2º Passo: Aperte GET IT NOW! 3º Passo: Faça o seu cadastro no site. Aperte NEXT quando terminar 4º Passo: Escolha a cor da sua barra de ferramentas, depois de fazer isso aperte Next. 5º Passo: Escolha quais serão os aplicativos da sua barra de ferramentas, depois de fazer isso aperte mais uma vez Next. 6º Passo: Conforme as opções que você escolheu no passo anterior, o site irá pedir algumas informações, como por exemplo, usuário do twitter, canal do youtube, link da página de fãs do facebook etc. Coloque todas essas informações nos seus devidos lugares e aperte DONE. 7º Passo: Escolha o Tumblr como a sua plataforma 8º Passo: Copie o código que apareceu na página 9º Passo: Vá no tumblr >> Customize >> Custom HTML >> procure por </body>e cole o código imediatamente acima disso, aperte Update Preview e veja se esta tudo certo com o seu theme, se estiver tudo ok, salve, vá para a página do seu tumblr e veja se a barra apareceu na parte inferior da página.  NOTA (1): A barra de ferramentas não aparece na página de customização do tumblr. NOTA (2): Em alguns themes o código pode ser colocado na descrição, que mesmo assim ele funciona.

[enquantovivermos-blog]

Barra(Pattern) fixa nos lados..:

Agora vamos ensinar como deixar o seu tumblr com um toque especial e charmoso, com barras fixas nas laterais do theme.   1º Passo: Copiar o código referente ao lado que você quer que a barra fique.  Direita:

<div style=" background-image: url('LINKDOPATTERN'); top: 0px; right: 0px; width: 50px; height: 100%; z-index: 100; position: fixed;"></div>

Esquerda:

<div style=" background-image: url('LINKDOPATTERN'); top: 0px; left: 0px; width: 50px; height: 100%; z-index: 100; position: fixed;"></div>

2º Passo> Editar o código: No lugar de LINKDOPATTERN coloque o link da imagem que você escolheu. (Cuidado para não apagar as aspas na hora de colocar o link.

Mude valor de 50, para aumentar ou diminuir o tamanha da sua barra.

NOTA: Nesse link http://iemai.com.br/blog/2010/07/19/backgrounds-para-blog-tumblr-e-twitter/ vocês encontram uma seleção de vários sites com patterns legais.   3º Passo: Cole o código já com o link da imagem depois de <body> no seu HTML. NOTA: Se quiser que a barra fique dos dois lados, cole os dois códigos no seu HTML um após o outro.

[enquantovivermos-blog]

Imagens Aleatórias..:

Em alguns tumblrs na barra lateral aparece uma imagem, e quando mudamos de página ou atualizamos a mesma, a imagem muda.

1º Passo: Copiar o código abaixo:

<script language="JavaScript"> hoje = new Date() numero_de_imagens = 6 segundos = hoje.getMilliseconds() numero = segundos % numero_de_imagens if (numero == 0){ imagem= "LINK" } if (numero == 1){ imagem= "LINK" }

if (numero == 2){ imagem= "LINK" }

if (numero == 3){ imagem= "LINK" }

if (numero == 4){ imagem= "LINK" }

if (numero == 5){ imagem= "LINK" }

document.write('<p align="center"><a href="LINK_CLICAR"target=_blank"><img src="' +imagem + '"width="300""><a></p>')</script>

2º Passo: Editar o código:

No Lugar de LINK coloque o link da imagem. Para adicionar ou remover imagens basta que você coloque ou retire essa parte do código:

if (numero == ?){

imagem= "LINK" }

O ? vai ser o número da imagem, se você adicionar ou remover alguma imagem preste bem atenção na sequencia dos números, não pode ficar faltando nenhum número entre a primeira e a última imagem.

No lugar de 6 coloque o número total de imagens, lembre-se sempre de contar a imagem 0, no nosso exemplo a sequência vai de 0 a 5, portanto temos 6 imagens.

No lugar de LINK_CLICAR coloque o link da página que vai abrir quando alguém clicar em uma das imagens.

Para exemplificar melhor vou colocar aqui o código que tem 3 imagens, notem que no número de imagens coloquei 3, que a sequencia só vai até o 2 e que no LINK_CLICAR eu coloquei o link do blog.

<script language="JavaScript">

hoje = new Date() numero_de_imagens = 3 segundos = hoje.getMilliseconds() numero = segundos % numero_de_imagens if (numero == 0){ imagem= "LINK" } if (numero == 1){ imagem= "LINK" }

if (numero == 2){ imagem= "LINK" }

document.write('<p align="center"><a href="http://www.dicastumblr.com"target=_blank"><img src="' +imagem + '"width="300""><a></p>')</script>

Nota: Cuidado para não apagar as aspas.

3º Passo: Depois de editar o seu código, vá no tumblr >> customize e cole o código na descrição, aperte update preview e veja se uma das imagens apareceu, se sim salve se não cancele.

Nota: Nem todos os themes funcionam códigos na descrição.

[enquantovivermos-blog]

Menu para Tumblr #2 ..:

Coloque um menu parecido com o da imagem abaixo no seu tumblr de maneira simples e rápida.

1º Passo: Copie o código abaixo:  

div.navigate a{

  background: #87CEEB; color: #ffffff; letter-spacing: 0px; display:block; padding:0px 0;  border: 0px solid #000000;  width: 180px; margin-top:1px; position:relative; -webkit-transition-duration: .0s; z-index:1;  } div.navigate a:hover{  font-weight: bold; letter-spacing: 1px; background: #FF69B4}; display:block; padding:0px 0;  border: 0px solid #000000; z-index:2; }

2º Passo: Editar o código do passo anterior, no lugar de #87CEEB coloque o código da cor do menu e no lugar de #FF69B4 coloque o código da cor que a opção do menu ficará quando o mouse passar por cima dela. Por exemplo, a cor do menu da imagem abaixo é azul, só que quando passamos o mouse na opção a cor muda para rosa.Para ver o código HTML das cores acesse http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm                                      3º Passo: Copie o código já com as cores de sua preferência e vá no tumblr >> customize >> Advanced e cole o código no box de Custom Css ( caso não de certo dessa forma cole o código imediatamente antes de </style> )                                                 4º Passo: Copie o código abaixo                           <center><div class="navigate"> <a href="http://link1"style="text-decoration:none">TEXTO 1</a><a href="http://link2"style="text-decoration:none">TEXTO 2</a> </div></center> 5º Passo: No lugar da parte destacada em vermelho no código (http://link1) coloque os links, já na parte destacada em laranja (TEXTO 1) coloque o nome referente ao link.                                                                                                    Por exemplo,No menu acima só existe duas opções(links), Música e Cursores, portanto o código no caso desse exemplo ficou assim: <center><div class="navigate"> <a href="http://www.dicastumblr.com/search/label/musica"style="text-decoration:none">Música</a><a href="http://www.dicastumblr.com/search/label/cursores"style="text-decoration:none">Cursores</a></div></center> Você pode tanto adicionar quanto retirar links (opções) do seu menu, para acrescentar mais opções além dessas 2 do código basta adicionar <a href="http://link"style="text-decoration:none">Texto </a>   antes de </div> , para retirar alguma opção é só retirar essa mesma parte do código Nota(1):  Dependendo de como você colocar os códigos irá aparecer um espaço entre as opções do menu, para retirá-lo é só apagar o espaço que tem entre o código de um link(<a href="http://link"style="text-decoration:none">Texto </a>) e do outro.( Não é o espaço entre o <a e o href=... e sim o de antes do <a. ) 6º Passo: Copie o código do passo anterior já com os links (opções) do seu menu, vá no tumblr >> customize >> info e cole o código na descrição. Veja se o menu apareceu e se esta tudo certo com o seu theme.                                                                                                       Nota(2): Em alguns themes os códigos colocados na descrição não funcionam. Para fazer funcionar nesses themes tem que colocar o código direto no HTML, e como os themes são muito diferentes não temos como explicar um lugar específico para colocar o código nesses casos.                                        Nota(3):Os links não funcionam na página de customização do tumblr portanto se estiver tudo ok com o seu theme salve, vá na sua página e teste o menu para ver se ele esta funcionando direito. 

[enquantovivermos-blog]

Asks em um Balãozinho..:

Aprenda a deixar as perguntas das asks respondidas dentro de balões e com isso deixe o seu tumblr mais bonito e personalizado. NOTA: Esse tutorial não funciona em todos os themes 1º Passo: Copiar o código abaixo                                                                       /*** ask ***/

.bubble {align:right;background: #eee; margin:7px 0px 5px 66px;padding:10px;position: relative;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;} .bubble p {margin:1px 0px;} .bubble span {display:block;position:absolute;width:1px;height:1px;font-size: 0;line-height: 1px;left:-10px;top:10px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:10px solid #eee;} .askborder {float: left;margin: 1px 4px 0 0;padding: 2px; background: #eee}

2º Passo: Editar o código

No lugar dos dois #eee riscados coloque o código HTML da cor do fundo do balão. Já no lugar do #eee itálicos coloque o código HTML da cor da borda da foto da pessoa que escreveu a ask.

Para ver o código das cores acesse: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm

3º Passo: Copie o código já editado, vá no tumblr >> customize >> Advanced e cole o código no box de Custom Css ( caso não de certo dessa forma cole o código imediatamente antes de </style>), veja se esta tudo certo com o seu tumblr, se sim passe para o próximo passo, se estiver alguma coisa errada aperte cancel.

4º Passo: Procure no seu HTML por {block:Answer} e também por {/block:Answer}, os dois provavelmente vão estar próximos. Selecione tudo que estiver entre esses dois códigos, inclusive eles, substitua o que você selecionou pelo código abaixo:

{block:Answer}<img src="{AskerPortraitURL-48}" align="left" class="askborder"><div class="bubble"><span></span>{Asker}: {Question} </div>{Answer}{/block:Answer}

5º Passo: Aperte Updade Preview para ver se esta tudo ok com o seu tumblr, se sim salve e vá para a página do seu tumblr ver o resultado, se não aperte cancel.

[enquantovivermos-blog]

Resolvendo o problema do botão Reblog..:

Para quem já tem o botão reblog no tumblr procure por:                                                                                            <a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};"><img src="http://assets.tumblr.com/images/iframe_reblog_alpha.png?4"/></a>                                      E substitua por:                                                  <a href="{ReblogURL}" target="_blank"><img src="http://assets.tumblr.com/images/iframe_reblog_alpha.png?4"/></a> 

COMO COLOCAR O BOTÃO DENTRO DO POST..:

Aprenda a colocar o botão de Reblog dentro dos posts, assim fica mais fácil para os seus leitores verem e reblogarem as coisas que você posta. Esse botão também permite que você reblog seu próprio post.

1º Passo: Copiar o código abaixo: <a href="{ReblogURL}" target="_blank"><img src="http://assets.tumblr.com/images/iframe_reblog_alpha.png?4"/></a> 2º Passo: Ir em Customize >> Theme >> Custom HTML Procure por {/block:Posts} se você quiser que o botão apareça no final do post, cole o código acima imediatamente antes do primeiro {/block:Posts} que aparecer no seu código.  Caso queira que o botão apareça no começo do post procure por {block:Posts} e cole o código imediatamente abaixo do primeiro {block:Posts} que aparecer no seu código.

[enquantovivermos-blog]

Barra(Pattern) embaixo..:

Já ensinamos aqui como colocar uma Barra fixa no topo do theme, agora vamos ensinar como deixar o seu tumblr mais bonito com uma barra fixa na parte de baixo do theme. 1º Passo: Copiar o código abaixo  

<div style=" background-image: url('LINKDOPATTERN'); bottom: 0px; left: 0px; width: 100%; height: 15px; z-index: 100; position: fixed;"></div>

2º Passo: Editar o código:

No lugar de LINKDOPATTERN coloque o link da imagem que você escolheu. (Cuidado para não apagar as aspas na hora de colocar o link.)

Mude valor de 15, para aumentar ou diminuir o tamanha da sua barra.

NOTA: Nesse link http://iemai.com.br/blog/2010/07/19/backgrounds-para-blog-tumblr-e-twitter/ vocês encontram uma seleção de vários sites com patterns legais.

3º Passo: Cole o código já com o link da imagem depois de <body> no seu HTML.

[enquantovivermos-blog]

Menu para Tumblr..:

Coloque um menu parecido com o da imagem abaixo no seu tumblr de maneira simples e rápida. 1º Passo: Copie o código abaixo: div.navigate a{  background: #D8BFD8; color: #ffffff; display:block; width: 88px; height: 15px; text-align: center; padding-top:2px; margin-left:2px; margin-top:2px; position:relative; text-align: center; z-index:1; font-weight: bold; -moz-border-radius:7px; -webkit-border-radius:7px; display: inline-block; } div.navigate a:hover{  background: #FFC0CB; letter-spacing:1px; } 2º Passo: Editar o código do passo anterior, no lugar de #D8BFD8 coloque o código da cor do menu e no lugar de #FFC0CB coloque o código da cor que a opção do menu ficará quando o mouse passar por cima dela.                                                                             Por exemplo, a cor do menu da imagem abaixo é roxo, só que quando passamos o mouse na opção a cor muda para rosa. Para ver o código HTML das cores acesse http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm                                              3º Passo: Copie o código já com as cores de sua preferência e vá no tumblr >> customize >> Advanced e cole o código no box de Custom Css ( caso não de certo dessa forma cole o código imediatamente antes de </style> )                                                  4º Passo: Copie o código abaixo                                                                                                                                         <center><div class="navigate"> <a href="http://link1"style="text-decoration:none">Texto 1</a> <a href="http://link2"style="text-decoration:none">Texto 2</a> <a href="http://link3"style="text-decoration:none">Texto 3</a> <a href="http://link4"style="text-decoration:none">Texto 4</a>                                          </div> </center>                                                                                                                                  5º Passo: No lugar da parte destacada em vermelho no código (http://link1) coloque os links, já na parte destacada em azul (Texto 1) coloque o nome referente ao link.                                                                                                    Por exemplo, No menu acima só existe duas opções(links), Música e Cursores, portanto o código no caso desse exemplo ficou assim: <center><div class="navigate"><a href="http://www.dicastumblr.com/search/label/musica"style="text-decoration:none">Música</a> <a href="http://www.dicastumblr.com/search/label/cursores"style="text-decoration:none">Cursores</a>                                                                                                                 </div></center>  Você pode tanto adicionar quanto retirar links (opções) do seu menu, para acrescentar mais opções além dessas 4 do código basta adicionar  <a href="http://link"style="text-decoration:none">Texto </a>   antes de </div> , para retirar alguma opção é só retirar essa mesma parte do código 6º Passo: Copie o código do passo anterior já com os links (opções) do seu menu, vá no tumblr >> customize >> info e cole o código na descrição. Veja se o menu apareceu e se esta tudo certo com o seu theme.                                                                                                              Nota(1): Em alguns themes os códigos colocados na descrição não funcionam. Para fazer funcionar nesses themes tem que colocar o código direto no HTML, e como os themes são muito diferentes não temos como explicar um lugar específico para colocar o código nesses casos.                                        Nota(2):Os links não funcionam na página de customização do tumblr portanto se estiver tudo ok com o seu theme salve, vá na sua página e teste o menu para ver se ele esta funcionando direito.   

[enquantovivermos-blog]

Opacidade nas imagens..:

Com o código desse post as imagens do seu tumblr irão mudar de opacidade quando o mouse passar sobre elas.                                                                                                        1º Passo: Copiar o código abaixo                                                                                                                       img{ margin: 1px; border: none; filter: alpha(opacity=75); moz-opacity:.80; opacity:.80 ; -webkit-transition-duration: .50s; } img:hover{ margin: 1px; border: none; filter: alpha(opacity=100); moz-opacity:1.0; opacity:1.0; }                                                                                                                                                             2º Passo:  Vá no tumblr >> customize >> Advanced e cole o código no box de Custom Css ( caso não de certo dessa forma cole o código imediatamente antes de </style> )

[enquantovivermos-blog]

Como mudar a barra de rolagem..:

Aprenda a mudar a barra de rolagem do seu tumblr e com isso deixe-o muito mais bonito e estiloso. Abaixo duas imagens, a primeira mostrando a barra de rolagem comum, e a segunda como ela ficará depois de personalizá-la. Antes: Depois: Nota: Essa barra de rolagem é só exemplo, você poderá deixá-la do jeito que quiser. Nota(2): Esse tutorial só funciona no Google Chrome 1º Passo: Copie o código abaixo: html::-webkit-scrollbar {width:22; height:auto;background: #FFF;} html::-webkit-scrollbar-corner { background: #FFF;} html::-webkit-scrollbar-button:vertical {height:1px;display:block;} html::-webkit-scrollbar-button:horizontal {width:1px;display:block;} html::-webkit-scrollbar-thumb:vertical {background-image: url(LINK DA IMAGEM );border: 1px solid  #A2A2A2;border-right:none;-webkit-border-radius: 8px;} html::-webkit-scrollbar-thumb:horizontal {background-image: url(LINK DA IMAGEM );border: 1px solid #A2A2A2;border-bottom;} html::-webkit-scrollbar-thumb  {background-image: url(LINK DA IMAGEM );} html::-webkit-scrollbar-thumb:hover {background-image: url(LINK DA IMAGEM );border: 1px solid  #A2A2A2;} html::-webkit-scrollbar-track-piece {background: none;} html::-webkit-scrollbar:vertical {border-left: 1px solid #A2A2A2;} html::-webkit-scrollbar:horizontal {border-top: 1px solid #A2A2A2;}                                                2º Passo: Editar o código. No lugar de: #FFF : Coloque o código da cor do fundo da barra de rolagem.                                                                               LINK DA IMAGEM : Coloque o link da imagem que irá substituir o botão de rolagem. O ideal é que a imagem seja um background ou uma pattern.                                                             Para ver os códigos das cores acesse esse link: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm                                 3º Passo: Copie o código já editado, vá no tumblr >> customize >> Advanced e cole o código no box de Custom Css ( caso não de certo dessa forma cole o código imediatamente antes de </style> )

[enquantovivermos-blog]

Barra (Pattern) fixa no topo..:

Como vocês já devem ter visto, alguns themes para tumblr possuem uma barra fixa com detalhes no topo, o que da um toque especial e um certo charme para o tumblr. No tutorial abaixo vamos ensinar como fazer isso no seu theme.     1º Passo: Copiar o código abaixo

<div style=" background-image: url('LINKDOPATTERN'); top: 0px; left: 0px; width: 100%; height: 50px; z-index: 100; position: fixed;"></div>

2º Passo: Editar o código:

No lugar de LINKDOPATTERN coloque o link da imagem que você escolheu. (Cuidado para não apagar as aspas na hora de colocar o link.)

Mude valor de 50, para aumentar ou diminuir o tamanha da sua barra.

NOTA: Nesse link http://iemai.com.br/blog/2010/07/19/backgrounds-para-blog-tumblr-e-twitter/ vocês encontram uma seleção de vários sites com patterns legais.

3º Passo: Cole o código já com o link da imagem depois de <body> no seu HTML.

[enquantovivermos-blog]

Bordas arredondadas..:

Alguns themes do Tumblr como o Redux e o Plaid, possuem as bordas das caixas dos posts quadradas. Para deixá-las arredondadas como na imagem abaixo é muito simples... Basta que vocês procurem no HTML por:   .post {  e cole imediatamente depois disso o código abaixo -moz-border-radius: 10px; -webkit-border-radius: 10px; Como resultado essa parte do seu HTML deve ficar igual a imagem abaixo Aperte Update Preview e veja se as bordas estão arredondadas e se esta tudo certo com o seu tumblr, se estiver tudo ok, salve e saia, se aconteceu alguma coisa errada, cancele.