Seja bem-vindo ao making-themes, um tumblr de qualidade onde você encontra os melhores tutoriais, materiais e themes para o seu tumblr! Faremos de tudo para ajudá-los da melhor maneira possível. Acesse nossa FAQ para verificar se sua dúvida já foi respondida ou mande-a na nossa ask e nós responderemos da melhor forma possível.
Te ensino então, dá uma olhada no passo-a-passo:
- Faz teu theme num tumblr de testes;
- Salva ele;
- Abre esse tumblr numa guia;
- Abre o código fonte;
- Copia todo o código fonte que abriu;
- Vai no teu tumblr (no que você quer usar pra pôr o exemplo);
- Abre o customize do tumblr pra pôr o preview;
- Vai em pages e crie uma page nova;
- Vai abrir uma janelinha. No topo dela, você muda de “Stardard Layout” pra “Custom Layout”;
- Cola o código que você tinha copiado na box maior, do conteúdo;
- Onde pede pra colocar o link pra page, você coloca algo como /themetal (theme + nome dele) :D
Expliquei bem detalhado mesmo, espero que entenda! :)
Laura
Vai nesse link:
http://www.tumblr.com/follow/NOMEDOTUMBLR
E mude o “NOMEDOTUMBLR” pela url do tumblr que você quer dar unfollow. Obs.: Isso serve também para dar follow quando não tem botão.
(Gi)
Menu Underline
- Veja um exemplo aqui (Só um detalhe: no menu de verdade, não há aquele sublinhado no normal, ok?)
Ele é bem simples e pode ser usado tanto em themes enfeitadinhos, quanto em themes simples como no Theme Emblem3. Coloque o seguinte código no seu css:
.menu a {float: center; font: bold 20px "Play"; text-transform: uppercase; color: #625E6E; -webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear; z-index: 4;}
.menu a:hover {color: #57B3A9; border-bottom: 5px solid #57B3A9; -webkit-transition: all 0.6s linear;-moz-transition: all 0.6s linear;transition: all 0.6s linear;}
Lembrando que você pode personalizar tudo ali em cima. E então, cole o seguinte código onde quiser o menu:
<div class="menu"><a href="/">exemplo</a> + <a href="/">exemplo</a> <a href="/">exemplo</a></div>
Obs.: A linha do exemplo não vem nesse código.
- Tutorial por Giovanna;
- Se lhe for útil, dê like e credite ao making-themes.
Coloque esse código no seu css: (pode mudar tudo que estiver em negrito)
.divdate {border-bottom: 1px solid #f2f2f2; margin-bottom: 0px; padding:2px; font: 9px;}
E, antes do /block das postagens coloque:
<div class="divdate"></div>
Exemplo:
{block:Text} Conteúdo do block texto...
<div class="final"></div>
perma e etc...
{/block:Text}
(Gi)
É esse:
<iframe frameborder="0" scrolling="no" width="100%" height="500" id="submit_form" src="http://www.tumblr.com/submit_form/NOME DO SEU TUMBLR.tumblr.com" style="background-color:transparent; margin-top:15px; overflow:hidden;"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('submit_form').allowTransparency=true;</script><![endif]-->
Não esquece de mudar o “NOME DO SEU TUMBLR” lá no código, pelo nome do seu tumblr com as palavras juntas.
(Gi)
Procura ela tag body entre <style> e </style> e adicione:
cursor: url("LINKDOSEUCURSOR"),default !important;
E pronto :D
(Gi)
Oi! Isso é bem simples, mas minha explicação está meio estranha porque estou morrendo de cansaço, rs.
Abra no ps um arquivo com um tamanho maior do que a caixa que você quer, e coloque no background o pattern que você usará no theme (isso não é importante, mas melhora a sua visão de como a borda ficará).
Então, procure pela ferramenta “Rectangle Tool” (atalho U no teclado), e faça uma caixa que não ocupe todo o espaço do arquivo. Exemplo. E, na mesma ferramenta, crie uma caixa com a cor branca (#ffffff) que seja maior do que a caixa feita acima, que será a borda. Puxe o layer para debaixo da caixa acima e diminua a opacidade, como na imagem. Exemplo. (eu coloquei a opacidade 40%, mas você pode aumentar ou diminuir). E então, finalmente, a caixa está pronta e a borda meio transparente.
Dica: Se você quiser esse efeito da caixa sobressaindo a borda, adicione sombra na caixa principal.
- Se o tutorial for útil, dê like no post ou credite ao making-themes.
- Por Giovanna.
Inverted Effect
Esse efeito é super simples, mas só pode ser usado em imagens, seja elas para menus, efeitos de parcerias, efeitos de moderação e etc. Primeiro, vamos ao css: o códio abaixo deverá ser colocado entre as tags <style> e </style>:
.swip img {position: relative; -webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear; border-radius: 10px;}
.swip img:hover{-moz-transform: scale(-1) translateX(0px); -webkit-transform: scale(-1) translateX(0px); -o-transform: scale(-1) translateX(0px); -ms-transform: scale(-1) translateX(0px); transform: scale(-1) translateX(0px); z-index:2; opacity: 1.0 !important; -webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;}
E, onde você quiser o efeito, coloque:
<div class="swip"><img src="URLDAIMAGEM"><img src="URLDAIMAGEM"><img src="URLDAIMAGEM"></div>
E pronto… o seu efeito invertido está feito! Ah, e um lembrete: você não pode colocar a class dentro do código da imagem, senão não funcionará.
- Tutorial por Giovanna;
- Se lhe for útil, dê like e credite ao making-themes.
Efeito Clipping Mask pelo html
então ainda não vi isso por aqui, mas se já tiver me avisem rs. Vai ficar como no Theme Queen (clique) e dá pra colocar gif etc.
1. Coloque isso no CSS:
#idsidebar{background: url('URL DA IMAGEM'); width: 200px; height: 200px; overflow: hidden;}
#imgframe{position:absolute; background: url('URL DA MOLDURA'); margin-top: -200px; height: 200px; width: 200px;}
Ok, agora reparem que a moldura e a imagem tem o mesmo tamanho. Se você colocar uma delas maior que a outra vai ficar cortado, então coloque sempre no mesmo tamanho.
Eu tenho uma moldura pronta que vocês podem pegar, não tem muito segredo, é só uma moldura externa branca com o meio vazado, isso dá pra criar tranquilo rs. Pega aqui.
2. Coloque isso no html onde quer que apareça:
<div id="idsidebar"></div> <div id="imgframe"></div>
Só isso, se for útil credite :D
Carol
É porque, algumas pessoas no tumblr, não usam o pre para colocar os códigos. O pre é isso:
<"exemplo do pre">
E, ele é meio que uma caixa para códigos, sabe? Sem ele, as aspas ficam tortinhas e o customize não aceita. Olha um exemplo:
<”exemplo das aspas sem o pre”>
Viu só? E, isso faz com que o código não funcione. Por isso, quando você repõe as aspas, elas ficam retinhas e normais e o código fica direito.
(Gi)
0
0
0
0
0
0
0
0
0
0
0
