Procure pela div dos posts do seu tumblr, e depois dela, coloque isso:

#content img {max-width: 550px;} 

~ Modificando~

Nem todas as divs de posts são "#content" então, assim que você encontrar, mude pela div que é a do seu theme, depois mude o valor "550", se quiser, se não... Deixe como está. Porém eu acho 550 muito grande, enfim... Isso vai de acordo com a caixa dos posts do seu theme e etc. 

Preview 1 / Preview 2 / Exemplo que ela me deu. 

TUTORIAL »

No PS, faça um novo arquivo (vulgo: imagem) e coloque no tamanho de 600x600 pixel.

Em um site de fotos em HQ, ou da Celebridade, copia a imagem que você deseja usar, e cole no arquivo que você criou no Photoshop.

Eu aconselho vocês a pegarem a foto em seu tamanho original, não aquelas que aparecem para você. Por exemplo, em sites de fotos HQ, elas aparecem em um tamanho, clicando na imagem ela abrirá em uma nova janela em um tamanho maior, copie está imagem de tamanho maior e cole no arquivo do PS.

Para deixa-la menor, é só usar a ferramenta “Move"/Mover (V), observe que quando você clicar nesta ferramenta, irá aparecer quadradinhos ao redor da imagem, clique em um desses quadradinhos (aconselho que seja os de cima ou os de baixo) e selecione a “corrente” que fica no menu superior.

Após deixar a imagem menor, é só você aplicar uma PSD de efeito, ou Atn (Action) para deixar a imagem com um efeito mais bonito, e depois aplique uma atn com nitidez. 

Eu utilizei a action “Rita Ora” 3D do L-agallerrie. (clique)

Bom, foto editada, agora crie uma nova camada, iremos usar o balde de tinta, então no “background/foreground”, deixe a cor que você deseja usar. No exemplo eu usei a cor #244356. Eu acho melhor você usar cores escuras, mas fica ao seu critério. 

Abra esta moldura, salve e coloque na imagem, da mesma forma que você fez com a textura.

Agora vamos aplicar uma textura para que a imagem fique com esses “risquinhos”. A textura é essa, salve, e abra ela no PS, depois arraste até a imagem, como se fosse uma PSD. Clique na camada dessa textura e coloque no modo “Overlay"/Luz Indireta, e deixe com um pouco de opacidade, se quiser. (Eu usei opacidade e deixei em 50%).

Com a ferramenta de “Shape"/Formas (U), faça um circulo (para ele sair certinho é só usar o Shift enquanto tiver fazendo o circulo), clique com o botão direito na camada do circulo e clique em “Blending Options"/Opções de Mesclagem. Irá abrir uma aba, certo? Certo. Agora clique em "Stroke"/Traçado »

Em “Color"/Cor escolha a cor branca (se quiser mudar, fique a vontade). 

Em “Size"/Tamanho você pode colocar 7/8 por aí, fica ao seu critério. (Eu escolhi 8)

Em “Opacity"/Opacidade aplique um pouco, eu deixei em 40%. 

Pesquise uma outra foto da Celebridade escolhida, copie e cole no arquivo e depois clique com o botão direito do mouse em “Create Clipping Mask"/Criar Máscara de Corte e depois ajuste para que fique certinha a imagem. 

Dica: Se quiser aplicar um efeito na imagem antes de colar ela no arquivo, você pode ficar à vontade! 

Após tudo isso, vamos colocar as frases…

Escolha duas fontes, eu escolhi as fontes Century Gothic e Hasteristico.

//

Efeito da segunda preview: Eu apliquei Blur, para ficar esse desfoque, se quiser aplicar também, é da seguinte forma:

PS em Inglês:

Filter > Blur > Gaussian Blur 

PS em Português:

Filtro > Desfoque > Desfoque Gaussiano

Salve o seu theme em psd. » Mescle as camadas » E recorte por partes:

Header;

Page;

Footer;

Todos da mesma largura.

E depois hospede e passe para o css, da seguinte forma:

/*--- Header / Page / Footer - HAVINGTHEMES ---*/#header{width: VALORpx; height: VALORpx; margin-top: 30px; margin-right: auto; margin-left: auto; background: url('URL') top left no-repeat; position: relative;}#content{margin-left: auto; margin-right: auto; width: VALORpx; background: url('URL'); margin-bottom: -10px;}#footer{background: url('URL') top left no-repeat; margin-top: -30px; margin-left: auto; margin-right: auto; width: VALORpx; height: VALORpx; margin-bottom: -10px;}

E depois de body ficará assim:

CONTEUDO QUE VC QUER NO HEADER

CONTEUDO QUE VC VAI QUERER NO CONTENT DA PAGE... TAG DOS POSTS E TALS.

Oi amores, hoje vou ensinar a fazer o menu do HT, esse que fica no topo, que tem abas, ele é o menu Drop Down, mas de uma outra forma :o *preview* Bom, vamos lá...

Mini dica: Você precisa de uma faixa, a que vai ficar no fundo. Ela precisa ser da mesma cor que vai ficar no balão. Mas se a sua faixinha tiver duas linhas, você pode ficar a vontade para colocar cor diferente no drop down. 

O CSS do menu ficará assim:

/* Drop Down - Hamide Falcão */ .cima{ height: 30px; position: absolute; top: -5px; ; display: block; z-index:100;text-align:right; margin-left: -18px; font-family: }

Entendo alguns valores:

Esse código ".cima" é da Bruna, ela que colocou para o menu ficar combinando com a faixa de fundo que ela fez, e eu acho que seria melhor para vocês trabalharem, então adicionei essa div no código.

Height: É para definir a caixinha do titulo dos menus, as que ficam expostas. Eu coloquei o valor de 30 pixels. Mas você pode aumentar ou diminuir, vai do valor da sua faixa de fundo.

Top: Eu coloquei -5px, ou seja, o valor é negativo. É para a caixa dos menus ficarem dentro da faixa, mas se você quiser mudar, fica a seu criterio também, você que sabe.

Margin-left: É o valor -18, quanto mais você aumentar ou diminuir o valor vai ir para um lado. Se você aumentar vai ir para o lado direito, se você diminuir vai para o lado esquerdo.

Continuando...

#navbar {list-style: none; float: left; width: 585px; padding-left:50px; height:100px; line-height: 35px; margin-top: 2px;}

A width é um tamanho que eu defini para ficar certo na minha tela o menu, você pode aumentar de acordo com a quantidade de abas que ficará no seu menu.

A height é um tamanho que eu defini também, mas você pode aumentar, porém eu não acho que ficará legal, enfim, vai de você!

Logo em seguida, coloque isso:

#navbar li {list-style: none; font-family : georgia; font-style: italic; float: left; vertical-align:middle;} #navbar li a {display: block; text-align: center; font-size: 12px; padding-left: 6px; padding-right: 6px; font-family : georgia; font-style: italic; margin-left:6px; margin-right:6px; text-decoration: none; color: #9DA2A8;  -webkit-transition: background-color 0.2s linear;-moz-transition: background-color 0.2s linear; -o-transition: background-color 0.2s linear;}

Desse código acima "#navbar li a" você só precisa modificar a cor, a font-size e a font-family, se você mudar o resto dos códigos vai ficar desconfigurado o menu.

#navbar li a:hover {background:#334256; text-shadow: 1px 1px 0 #2d3b4d; border-bottom:0; color: #ececdc;} #navbar li ul {display:none; padding:0; width:auto; height:30px; line-height:30px; margin-left: -40px; background:#334256; -moz-border-radius:0px 0px 8px 8px; -webkit-border-radius:0px 0px 8px 8px; border-radius:0px 0px 8px 8px; margin-top: 2px}

Nos códigos acima a mesma coisa, você só precisa mudar a cor do background para ficar na cor da sua faixa de fundo e no segundo código "#navbar li ul" você precisa mudar a cor do background e o valor do border-radius.

#navbar li:hover ul, #navbar li.hover ul {position: absolute; display: inline; padding-left:5px; margin-left: -60px; padding-right:5px; border-bottom:0; -webkit-transition: background-color .2s ease; } #navbar li:hover li, #navbar li.hover li {float: left; margin-top:1px; border-bottom:0; color: #ececdc} #navbar li:hover, #navbar li:hover a {background:#334256;  border-bottom:0; margin-top: 1px;} #navbar li:hover li a {color: #767b82; -webkit-transition: background-color .2s ease; border-bottom:0;} #navbar li li a:hover {color: #ececdc; border-bottom:0;}

Nos códigos acima a mesma coisa gente.

No geral o que vocês mais precisam mudar é o valor da width e height, background, color e a border-radius.

No final os códigos ficaram assim:

/* Drop Down - Hamide Falcão */ #navbar {list-style: none; float: left; width: 585px; padding-left:50px; height:100px; line-height: 35px; margin-top: 2px;} #navbar li {list-style: none; font-family : georgia; font-style: italic; float: left; vertical-align:middle;} #navbar li a {display: block; text-align: center; font-size: 12px; padding-left: 6px; padding-right: 6px; font-family : georgia; font-style: italic; margin-left:6px; margin-right:6px; text-decoration: none; color: #9DA2A8;  -webkit-transition: background-color 0.2s linear;-moz-transition: background-color 0.2s linear; -o-transition: background-color 0.2s linear;} #navbar li a:hover {background:#334256;text-shadow: 1px 1px 0 #2d3b4d; border-bottom:0; color: #ececdc;} #navbar li ul {display:none; padding:0; width:auto; height:30px; line-height:30px; margin-left: -40px; background:#334256; -moz-border-radius:0px 0px 8px 8px; -webkit-border-radius:0px 0px 8px 8px; border-radius:0px 0px 8px 8px; margin-top: 2px} #navbar li:hover ul, #navbar li.hover ul {position: absolute; display: inline; padding-left:5px; margin-left: -60px; padding-right:5px; border-bottom:0; -webkit-transition: background-color .2s ease;} #navbar li:hover li, #navbar li.hover li {float: left; margin-top:1px; border-bottom:0; color: #ececdc} #navbar li:hover, #navbar li:hover a {background:#334256;  border-bottom:0; margin-top: 1px;} #navbar li:hover li a {color: #767b82; -webkit-transition: background-color .2s ease; border-bottom:0;} #navbar li li a:hover {color: #ececdc; border-bottom:0;}

Não sei se soube explicar direitinho, mas enfim.. Espero que tenham entendido algo, qualquer dificuldade por favor me procurem na ask.

O Iframe ficará da seguinte forma:

<div class="faixinha"></div> <div class="cima"> <ul id="navbar"> <li><a href="/">home</a><li> <li><a href="#" span onClick="document.getElementById('liuc') .innerHTML=document.getElementById('sobre').innerHTML">sobre</a></li> <li><a>contato</a><ul> <li><a href="#" span onClick="document.getElementById('liuc') .innerHTML=document.getElementById('ask').innerHTML">ask</a></li> <li><a href="#" span onClick="document.getElementById('liuc') .innerHTML=document.getElementById('submit').innerHTML">submit</a></li></ul></li> <li><a>mais links</a><ul> <li><a href="#" span onClick="document.getElementById('liuc') .innerHTML=document.getElementById('PAGINA IFRAME').innerHTML">link</a></li> <li><a href="#" span onClick="document.getElementById('liuc') .innerHTML=document.getElementById('PAGINA IFRAME').innerHTML">link</a></li></ul></li> </ul> </div></div></div>

*Faixinha: A div da faixinha pode ser assim:

.faixinha{ background: url(URL DA FAIXA); height:VALORpx; position: absolute; top: 0px; left: 0; display: block; width:100%; z-index: 50;}

Coloque isso antes de :

alert("Sua mensagem ♥");

Olá! Bom, devido a vários pedidos hoje estou postando o tutorial de Notes Hover, esse é bem simples, não tem nada demais nele, é só a imagem de like e reblog e a opacidade, clique aqui para visualizar o efeito.

Espero que gostem e usem. Conforme eu for encontrando e/ou fazendo icons de like e reblog faço novos tutos, ok? Vamos lá.

O código que irá ficar no seu css (entre <style> e </style>) é esse:

.htnotes {margin-left: 80px; margin-top: -5px; padding: 5px; position: absolute; opacity:0; -webkit-transition-duration: .40s; -webkit-transition-duration: .60s; z-index: 1; width:150px;} .box:hover .htnotes {margin-left: 80px; margin-top: 10px; opacity:0.4; width:150px;} 

Observe que ali tem ".box:hover", essa é a div da sua box/caixa, se no seu theme não for essa a div mude pela que é, caso contrario o hover dos notes não irá funcionar.

Depois, nos blocks de posts coloque isso:

<div class="htnotes"> <a href="{Permalink}"><img src="http://static.tumblr.com/hqb6dzr/oIlmpvxpm/like_1.png"></a> <a  href="{ReblogURL}" target="_blank"><img src="http://static.tumblr.com/hqb6dzr/mD6mpvxq4/reblog.png"></a> </div>

Veja se está tudo pegando normalmente e salve. 

Não esqueça de dá like no tutorial e creditar. Qualquer dúvida » Ask.