#tthy

PSD com textura, ao usar em imagem maior, apenas arrume a camada da textura.

Eu resolvi fazer o tutorial, porque faz tempo que prometi, então vamos lá. Por favor, leia o tutorial no tthy (entrando no tumblr) para caso alguma div não abra corretamente. Não esqueça de curti a postagem se gostar! ♥

Visualize o menu

Tudo nessa vida deve ter um valor (é, isso pareceu estranho) mas relativamente é isso. O local onde o conteúdo desse menu fica tem o valor de 300px ou seja, se no caso você vá colocar em uma sidebar de 260 ou o valor que for, lembre-se de mudar os valores e deixar da forma que mais fique certo. Às medidas são feitas corretamente, tudo é dividido corretamente. Então é só prestar atenção nos códigos e você vai se sair bem.

Eu começo o código com a div .demo, ela é onde o conteúdo do menu fica, eu a fiz apenas para ter um fundo, então você pode usar ou descartar ela. Tanto faz.

Logo em seguida vem a div .menuzito, ela é a div onde o menu fica. Na div .menuzito sem o "a" eu determinei o valor que é os 300 e o height que é 30. Essa div é o menu onde clicamos para que as informações apareçam. :)

O .menuzito a é a formatação dos links que fica dentro da div menuzito. Nela eu determino as cores, a fonte, o espaçamento e entre outras coisas. A div menuzito tem o valor de 300px certo? Eu quero dividir os blocos de links em 4 caixinhas então deveria informar o valor de 75px mas como dei um padding-left e right de 5px tiro 10 dos 75 e deixo 65px. Na hora eu resolvi por um border-right então eu tirei mais um numero dos 65px ficando então 64px e dai fica certo.

A div .caixamenuzito é a div que criei para informar o espaçamento e para o fade. O fade é o efeito que faz o conteúdo aparecer lentamente. Você pode formatar da forma que desejar.

Depois vem a div .linksmenu que é o menu que ficará dentro da caixamenuzito, que no caso você vai usar ou não.

Pronto, já expliquei o style e você pode pegá-lo aqui:

.demo {background: #fff; padding-bottom: 6px;-webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;} .menuzito {display: block; height: 30px; margin-bottom: 10px; line-height: 30px;  width: 300px; background: #846ea0; overflow: hidden;} .menuzito a {float: left; width: 64px; border-right: 1px solid #7a6694; text-transform:lowercase; background: #846ea0; padding-left: 5px;  padding-right: 5px;  text-align: center; display: inline-block;font-family: 'Open Sans', sans-serif; font-size: 12px; text-transform: uppercase; color: #fff;-webkit-transition: all 0.4s linear; -webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear; transition: all 0.4s linear; font-weight: 800;  } .menuzito a:hover {color: #424140; -webkit-transition: all 0.4s linear; -webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear; transition: all 0.4s linear;} .caixamenuzito {line-height: 20px; background: #eee; padding: 5px; margin: 6px; display: block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} .caixamenuzito {-webkit-animation: fade 2s;-moz-animation: fade 2s;-ms-animation: fade: 2s;} /* htmluv code */ @-webkit-keyframes fade {from {opacity: 0;}to {opacity: 1;}} @-o-keyframes fade {from {opacity: 0;}to {opacity: 1;}} @-moz-keyframes fade {from {opacity: 0;}to {opacity: 1;}} @-ms-keyframes fade {from {opacity: 0;}to {opacity: 1;}} @keyframes fade {from {opacity: 0;}to {opacity: 1;}} /* htmluv code */ .linksmenu {margin-top: 4px; margin-bottom: -6px;} .linksmenu a {width: 129px; background: #fff; padding: 4px; display: inline-block; color: #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 6px;} .linksmenu a:hover {color: #958aa2;}

Esse código é o que você vai usar no local onde você quer que apareça o menu rápido. Eu deixei o html todo separadinho para que você tenha noção das coisas.

<!-- demo --> <div class="demo"> <!-- imagem --> <img src="http://static.tumblr.com/t0iuumg/Lpmn10072/sdsdas.png"> <!-- fim imagem --> <!-- menuzito --> <div class="menuzito"> <a id="ask" onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('riso').innerHTML=document.getElementById('menu1').innerHTML" >O1</a> <a id="ask" onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('riso').innerHTML=document.getElementById('menu2').innerHTML" >O2</a> <a id="ask" onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('riso').innerHTML=document.getElementById('menu3').innerHTML" >O3</a> <a id="ask" onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('riso').innerHTML=document.getElementById('menu4').innerHTML" >O4</a> </div> <!-- fim menuzito --> <!-- a div riso é a div do iframe, o get element será aberta nela --> <div id="riso"> <!-- div menuzito --> <div class="caixamenuzito"> Alguma coisa aqui, exemplo, alguns tutoriais ou dicas </div> <!-- final da div caixamenuzito -->      </div> <!-- final da div riso --> </div> <!-- final da div demo -->

No html, a div riso é a do falso iframe, como já informei. É ela que informa o local onde o falso iframe irá abrir.

A parte do iframe, o local onde fica o conteúdo escondido.

Essas divs você deve por antes do fechamento do tema. Antes de </body></html> e colocar tudo o que você quiser dentro delas.

Pegue aqui as divs

Fonte usada:

Falta algumas coisas para arrumar, tipo a fanpage que não deu porque a Anna não apareceu e só ela pode reativar, então mais tarde eu faço isso.

Quem comentar sobre o tthy com reply (@thingstohyou) ou #tthy, nós daremos RT!

Espero que gostem do tema, eu tentei fazer o máximo que pude. Deixar ele mais limpo e livre de "certas" frescuras.

Ao gostar de alguma postagem apenas aperte o coração no final e pronto, você já curtiu o post. Ficaremos felizes se isso acontecer. *-*

Postei algumas coisas que fiz, espero que gostem e não esqueçam de dar like se baixar ou gostar.

Se o tema estiver com algum problema, nos avise, (menos o que o footer fique longo, porque isso é por causa do iframe), mas enfim.

Bom, antes de qualquer coisa, vocês precisam de algumas programas o primeiro programa é o aTube. Baixe o programa e logo em seguida baixe também o KMPlayer.

Parte de como baixar o vídeo.

Você vai no youtube, acha seu vídeo e copia a URL em questão. Abre o aTube e clica naquele "colar". Eu geralmente não mudo o formato do vídeo, não procuro um formato certo, baixo no formato que ele tem mesmo. Então em "perfil de saída" você vai por: "Não conversão (somente baixe o arquivo original). Então clique em baixar. Ao clicar em baixar, vai aparecer uma janela tipo essa. Sempre escolha o valor maior para o vídeo, que é a versão HD que esta no youtube. Geralmente nós que escolhemos em qual formato vamos assistir aquele clip, a versão HD demora mais para carregar em net lenta, por isso tem essa opção de escolher. Então, ao baixar aparece essa janela com os formatos do vídeo. Creio que sempre é a primeira opção a maior. Ao selecionar o formato aperte em baixar e então o download começara.

Parte dos screencaps

Abra o programa KMPlayer. Ao abrir clique no player, ao clicar no player vai abrir uma janela e então você escolhe o vídeo que quer tirar os screens.

Quando você escolher automaticamente o vídeo vai começar a tocar, então dê pause e volte para o começo do vídeo.

Na sua área de trabalho, crie uma pasta e a nomeie como desejar. Essa pasta é onde os screens ficarão.  Volte para o KMPlayer, e lá vai ter seu vídeo pausado, certo? Então, aperte CTRL+G. Vai abrir a janela de extração de quadros. Mude o "extrair para" clicando na pastinha que fica logo do lado, vai abrir uma janelinha e então você desce e clica na pasta que foi criada por você. Deixe os comandos assim e logo a seguir aperte "iniciar". Ao clicar em iniciar, dê play no seu vídeo e espere ele terminar.

Quando o vídeo terminar, feche o programa e vá até a pasta do destino que foi dado para os screencaps ficarem e eles estarão lá.

PSD: Transforma o rosa/magenta em vermelho/vinho. Escurece de leve deixando um tom amarronzado/amarelo na imagem. 

Se usar/baixar, não se esqueça de dar um like. :)

Olá, como prometido aí está o tutorial de background para twitter centralizado. Para quem não sabe, é aquele fundo que fica certinho na tela e aparece informações dos dos lados. A largura do conteúdo do twitter é 865px. Então só é preciso centralizar esse valor em qualquer documento com qualquer valor. Eu fiz o psd para que fique mais fácil para vocês e o vídeo tutorial que postei na conta do youtube é algo básico, só para a ideias de vocês fluírem. Espero que curtam.

Na hora de upar no twitter, lembre-se de marcar a opção center.

O psd do background já com as guides. ( xxx )

E ai, tudo bem? Ta, isso foi estranho. Bom, como somos falidas (rs) resolvi postar um theme que passei a noite inteira fazendo só para postar algo novo para vocês. Sei que faz tempo que não tem nada do tipo, né? Pois então. Vamos as informações do theme. lol

Não vou fazer rede social para ninguém. As que tem no theme basta.

O theme é dessa forma mesmo, com a imagem meio que saindo da caixa.

Se a descrição é grande e foto tem que ser pequena. Se a foto é grande a descrição tem que ser o que? Pequena. rs

A paginação esta no canto da tela.

Tamanho da imagem da sidebar é: 250px;

O menu de numeração é os links básicos do tumblr.

E não deixo usar como base. :)

É isso, pessoal.