gallyack

Tamanhos para backgrounds (bgs)

Então, vejo que algumas pessoas se confundem muito com o tamanho dos bg’s, então resolvi dar essa dica para vocês.

Os tamanhos do bg’s variam de computador para computador.

Assim, eu conheço três resoluções de tela de computador.

Existe o 800x600; 1366x768; e o mais conhecido, 1024x768. (lembrando que os valores são e larguraXaltura)

Para saber qual a resolução do seu pc, basta ir na “área de trabalho”, clicar com o botão direito em qualquer espaço vazio da tela, e ir em “Resolução da Tela”.

Irá aparecer essa tela:

De acordo com os valores escrito ali, você fará o seu bg exatamente do tamanho de sua tela.

Obs: Lembrando que quando uma pessoa que tenha outra resolução de tela for visualizar esse bg (no seu tumblr, suponho), ele ficará diferente do modo em que você ver.

Espero que tenha ajudado, qualquer dúvida, ask!

imagem-maior

Gossip Girl
  • O problema dos novos começos é que eles precisam de algo para terminar.
  • Alguns finais levam um tempo para se revelarem. Mas quando isso acontece, eles são mais fáceis de ignorar. Alguns começos iniciam tão silenciosamente, que você nem nota quando acontecem. Mas muitos finais vêm quando você menos espera.
  • E o que eles pressagiam é mais negro do que você imagina. Nem todos os começos são para se celebrar. Muitas coisas ruins começam:brigas, época de gripe. E a pior de todas...
  • Quero começar algo.
Traduzindo o Photoshop cs5 para português

Primeiramente, vamos baixar:

Photoshop cs5:

Tradução:

Se você já tem o cs5 em seu pc, não precisa baixar-lo novamente, é claro.

Depois de baixado, você terá que procurar a pasta que se photoshop está.

O meu caminho da pasta, é esse (pode não ser o mesmo do seu):

C:\Program Files\Photoshop CS5 Portable\PhotoshopPortable\App\PhotoshopCS5\Locales

Descompacte o pasta pt_BR que você baixou anteriormente e cole-a dentro da pasta “Locales”. Tem que ficar assim:

imagem-maior

Prontinho, a tradução estará instalada. Agora teremos que ativar ela no photoshop. Abra o seu photoshop cs5 » vá em Edit » Preferences » Interface. Abrirá essa janela:

imagem-maior

Então, ali você irá escolher “portuguese-brasil”, e dará ok.

Agora reinicie (feche e abra novamente) o photoshop, e ele estará em português.

Obs: Caso algum dia você queira mudar ele para inglês, por conta de um tutorial ou sei lá o porque, você irá seguir esses mesmos passos.. Ir em Edit»Preferências»(…) Caso tenha alguma dúvida, contacte me via ask.

Menu Growing

Bom, vejo que muitas pessoas estão usando esse menu ultimamente, então decidi criar um tuto dele para vocês.

Visualize ele aqui.

Insira o código abaixo entre seu <style> e </style>:

/**************** Menu por Gallyack - learn-html ****/
a.gagau{
cursor: url(urldocursor), progress;
background:#000000;
padding:4px;
padding-left:6px;
padding-right:6px;
font:10px verdana;
text-transform:uppercase;
color: #ffffff;
-webkit-transition:1s;
-moz-transition:1s;
}

a.gagau:hover {
background:#ff8e17;
padding-left:80px;
-webkit-transition:1s;
-moz-transition:1s;
text-align:center;
color: #ffffff;
}

Agora insira o código onde você quer que seu menu apareça, (tem que ser depois de <body>):

<center>
<a class="gagau" href="">TestedoMenu</a>  
<a class="gagau" href="">TestedoMenu</a>  
<a class="gagau" href="">TestedoMenu</a>  
<a class="gagau" href="">TestedoMenu</a>  
<a class="gagau" href="">TestedoMenu</a>  
<a class="gagau" href="">TestedoMenu</a>  
<a class="gagau" href="">TestedoMenu</a>  
</center>

Bom, fiz esse tutorial com a ajuda de um menu que vi em um theme blogskins. 

Se usar dê LIKE, não repasse e não reblogue.

/anna

Efeito Tooltip somente com CSS

Veja online aqui (xx)

Bom, em seu Css você vai inserir esse código (xx).

É nele que você deve modificar cores, tamanhos, estilos, etc. O código do a.tooltip e a.tooltip:hover dará forma aos nome onde o tooltip será ligado, no exemplo acima, esses nomes são: Home, Contato, Textos… Ou seja, ele é para dar formatação ao texto que é um link.

Já o restante do código é para formatar a caixinha tooltip que irá aparecer. Tamanho, cores, fonte e etc.

Se você já tem o menu pronto, basta acrescentar somente os CSS que tem o SPAN.

Bom, agora vamos a parte de colocar ele. Dando continuidade ao exemplo que dei, assim que eu vou colocar ele onde eu desejar que ele apareça (xx).

As palavras que ficam entre <span> </span> será o que vai aparecer quando passamos o mouse. 

Bom, se você souber mexer um pouco com CSS verá que pode colocar esse tooltip em qualquer lugar, inclusive em imagens. Se não souber, vem na ask que ensino.

Espero que gostem. Se usar me credite e dê LIKE.

Menu Deslizar

Veja Online (xx)

Mais um menu bem fácil de fazer. No seu Css você vai por os códigos abaixo:

a.menusl{
padding:5px;
text-decoration:none;
font-family:tahoma;
font-size:10px;
text-transform:uppercase;
color: #000;
text-align:center;
width:70px;
background: #F6CED8;
display:inline-block;
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
-moz-box-shadow:inset 200px 0px 0px #efefef;
-webkit-box-shadow:inset 200px 0px 0px #fff;
box-shadow:inset 200px 0px 0px #efefef;
}
a.menusl:hover{
color: #F6CED8;
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
padding-left : 5px;
-moz-box-shadow:inset -100px 0px -200px -0.5px #aaa;
-webkit-box-shadow:inset -100px 0px -200px -0.5px #fff;
box-shadow:inset -100px 0px 0px -0.5px #aaa;
}

Agora você vai por o código abaixo onde quer que apareça o menu:

<a href="" class="menusl">Teste</a>
<a href="" class="menusl">Teste</a>
<a href="" class="menusl">Teste</a>
<a href="" class="menusl">Teste</a>
<a href="" class="menusl">Teste</a>

Prontinho! Se quiser usar o iframe, aqui tem um tutorial.

Se usar dê like e me credite. Código achados em blog do blogskins.

Theme 03 - Para tumblr de HTML

Preview Online || Código

Lembre-se: Só pode ser usado como base para uso próprio, nunca modifique-o e repasse.

Se precisar de banner, só pedir que eu faço.

Não retire meus créditos

Se usar avise e/ou dê like.

É preciso mudar os links do menu e da ask

Não gosta do novo customize? Leia esse tutorial!

Bom, o que eu vou ensinar aqui é como você pode fazer seu theme no notepad(bloco de notas) e visualizar no computador, solucionando o problema de quem estava acostumado a usar o customize classico e nao consegue fazer themes no novo customize.

Bom, eu aconselho vocês a a baixar o notepad++, ele é bem parecido com o bloco de notas original do win, porém com mais recursos, caso não o queira, fique a vontade com o bloco de notas, não mudará nada.

Vamos ao tuto.

Abra o notepad de sua preferencia e começe a colocar o seu código. Olha meu exemplo: print-01

Agora, um dos passos mais importante é salvar. Você deve ir em “Arquivo” >> “Salvar como”. Abrirá essa janela: print-02

Preste atenção a três coisas: - o local onde ele será salvo - o nome do arquivo - a entensão o arquivo print-03

Bom, o local que você irá salvar você que escolhe, porém salve em um lugar fácil de achar-lo. O nome do arquivo é obrigatório colocar “NOME.html”, um nome qualquer, e depois um “ponto” seguido do nome html. A extensão voce deverá deixar um dos dois exibidos na imagem acima, ou “.html” ou all file “.”.

Meu exemplo: print-04

Bom, ai seu theme será salvo, agora vamos aprender a visualizar-lo. Vá na pasta que você salvou o seu código e clique nele com o botão direito. Irá aparecer essa janela: print-05

Percebam que tem ali “Open with”, que eu seu pc deve ser “Abrir com”. Essa imagem aparecerá: print-06

Daí você irá escolher o navegador de sua preferencia, o chorme, mozila, ie… etc. Abrindo no navegador, você já vai ver como esta ficando o seu theme.

Vou abrir o meu para vocês verem print-07

Pronto, taí. Daí vocês podem irem modificando o código, dando ctrl+s para ele ir salvando, vai no theme aberto em seu navegador, dá f5 e ver as mudanças.

Qualquer dúvida podem vir me perguntar. Se algo der errado, me procurem.

Você pode reblogar este post, SÓ ESTE, para mais pessoas verem, porém não retire meus créditos. 

Tutorial feito por Gallyack(mundo-gallyack) e disponibilizado no Mundo Gallyack

Transições animada em fotos.
Assim, ao passar o mouse sobre a imagem, ela irá girar de acordo ao valor que você colocará no código.
img:hover{
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

img{
-webkit-transition:.10s linear all; 
-moz-transition:.10s linear all;
}

No lugar do valor 45, você irá colocar qualquer outro número, isso irá depender do efeito que você quer causar. Lembrando que por conta da div estar com o nome “img”, esse efeito será aplicado em todas as imagens que estiver em seu theme, inserida pela tag “img scr”.
Caso não queira isso, basta mudar o nome da div e adicionar essa classe nas fotos que você quer.

Se usar, nos credite e dê like.

Estilo de quote

Bem, funçando alguns themes do blogger aqui em meu pc, achei códigos legais e uteis, e por isso vou postar. O primeiro será um estilo de quote, bem fácil de fazer. Primeiramente em seu css coloque:

.qbylia {



	padding-left: 3em;

	background: url(17.png) no-repeat

	font-style: italic;



}

Lembrando que no lugar de 17.png, voce ira colocar o link de sua imagem do quote, aqui temos algumas que ja postei. Agora em seu código procure por {Quote} e substitua por esse:

 <div class="pbylia">{Quote} </div>

Seu resultado será esse: Se usar, dê like. Não reblogue e não repasse.

Menu Button

Visualização Online (xx)

Bom, lembrando que achei os códigos em themes blogskins ^^

Vamos aos códigos. Adicione o código abaixo em seu css (style):

a.botmenu { letter-spacing: 1pt; background-color: transparent; font-size: 7pt; font-family: tahoma; color: #111; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; display: block; margin: 1px 0; padding: 3px 3px 3px 3px; text-align: left; text-decoration: none; text-transform: uppercase; text-align:center; -webkit-transition-duration:0s; cursor: pointer; width: 100px;}

a.botmenu:hover { border: 1px solid #ddd; border-bottom: transparent; border-right: transparent; text-transform: uppercase; background-color: #fcfcfc; }

Depois coloque o código abaixo onde quer que seu menu apareça:

<a href="" class="botmenu">Teste</a>
<a href="" class="botmenu">Teste</a>
<a href="" class="botmenu">Teste</a>
<a href="" class="botmenu">Teste</a>
<a href="" class="botmenu">Teste</a>
É isso. Daí tu pode mexer no css, mudar cores, tamanho da caixinha do menu, font… enfim, fique a vontade ^^ Usou? Dê like! Bom uso!
Photoshop Cs5 expirou? Resolva aqui
Bom, formatei meu computador ontem e umas das primeiras coisas que fiz foi baixar o photoshop pois estou muito necessitada dele. Aqui no blog, na parte downloads tem o link para baixar ele. Eu baixei o Cs5 portable. Meu espanto foi, depois de baixar e extrair o photoshop, ver a mensagem que ele estava expirado, ou seja, para eu continuar usando teria que pagar.

Porém, achei uma solução muito simples.
Você vai ter que baixar essa .dll (baixe).
Agora, preste atenção. Você precisa saber onde está a pasta do seu photoshop. Por exemplo, a minha eu extrair a minha pasta na area de trabalho. Veja:


Dentro da pasta você vai percorrer esse caminho: << Photoshop CS5 Portable\PhotoshopPortable\App\PhotoshopCS5 >>

Ou seja, você vai entrando nas pastas até entrar na pasta App>PhotoshopCS5. Veja minha pasta como é:


Dentro desta pasta você vai colar a .dll que você baixou, a que eu disponibilizei aqui.
Fazendo isso, você pode abrir seu photoshop normalmente.
Qualquer dúvida, só avisar.