html por suffixyou

No tutorial de hoje eu vou ensinar a vocês como fazer mini skins. Caso vocês não saibam o que é isso, é esse tipo de skin aqui (xx). 

Pra poder colocar a ask e faq juntas vocês vão precisar desse código aqui (xx), guardem esse link.

Entrem no costumize de vocês e criem uma nova página. Se você não sabe como cria, vai descendo, logo abaixo de onde coloca os links vai ter uma coisa escrito "+ Adicionar uma página" ai vocês clicam e façam uma página nova, lá tem todas as intruções. Depois de criarem a página escrevam tudo o que tem pra escrever e depois de escreverem clique em "html", assim (xx), dêem um enter depois da útlima coisa que aparecer e colem o código do começo do tutorial, substituam "SUAURL" pela sua url e pronto, apertem Atualizar Vizualiação e sua ask+faq vai estar pronta!

No tutorial de hoje vou ensinar a vocês como que coloca aquela “sombrinha” quando passa o mouse em cima dos links. É um efeito hover que tem o nome de “text-shadow”. Então vamos lá.

#menu {font-size: 12px; font-family: calibri;margin-left:1px;;margin-top:24px;background-color:#fff;width:171px;}

É um menu simples, vamos entender os códigos que estão nele. - font-size: é o tamanho da fonte, mantenha o px - font-family: é a fonte, pode ser calibri, arial, tahoma e blablabla - margin-left: é a distância da lateral esquerda até onde os links se encontram, ajustem de acordo com a necessidade de vcs - margin-top: é a distância do topo até onde os links se encontram, ajustem de acordo com a necessidade de vcs - background-color: é a cor do background, a que está nesse menu é branco, se quiserem mais corem tem aqui (xx), lembrem-se de utilizar o Código HTML. - width: é a largura do menu.

Depois de ajustar de acordo com a necessidade de vocês vamos colocar a o shadow no hover. Colem depois de #menu: #menu a:hover {color:{color:hover};font-size: 12px; font-family: calibri;font-style:normal;margin-top:47px; text-shadow: 1px 1px 1px}

Os códigos são praticamente os mesmos, o que muda é o shadow, então vamos entende-lo.  - O primeiro valor: significa o deslocamento da sombra para a direita ou para a esquerda (quando é colocado valor negativo) e quanto maior o número maior o deslocamento. - O segundo valor: é o deslocamento da sombra pra baixo ou pra cima (quando é colocado valor negativo) e quanto maior o número maior o deslocamento. - O terceiro valor: é um efeito pra sombra.

A cor da sua sombra será definida de acordo com o “color”, a cor que está ali é preta, mas se quiserem outras cores entrem no site que passei lá em cima. 

No tutorial de hoje vou ensinar a vocês como fazer a imagem da sidebar girar e depois sumir. Aqui tem um exemplo (xx). Vamos lá?

O nome do efeito que faz a imagem “sumir” é a #sidebar:hover que fiz um tuto mais explicativo aqui (xx) e o que faz a imagem “girar” é o transform. Vou usar uma imagem normal do tutorial que eu fiz só pra mostrar pra vocês.

 #aloha1 img {margin-top:38px;margin-left:75px; width:30px;height:20px;position:fixed;background-color:#fff;}

#sidebar:hover #aloha1 img {-webkit-transition: all 0.9s ease-out;-moz-transition: all  0.9s ease-out; -webkit-transform: rotate(360deg);-moz-transform: rotate(360deg) opacity:0;}

 Toda a “mágica” acontece no #sidebar:hover por isso não retirem a div da frente e nenhum código que está nele.

No tutorial de hoje vou ensinar a vocês como fazer a imagem sumir quando passa o mouse na side porque muitas pessoas já me pergutaram isso. Pra quem ainda não entendeu o propósito desse tutorial tenho um exemplo aqui (xx). O efeito que vou ensinar hoje é esse que a imagem “some” e aparece outra coisa embaixo. Para aprender a colocar a imagem girando como no exemplo siga esse tutorial (xx). Vamos lá?

Primeiro você tem que colocar uma imagem na side, tenho um tutorial aqui (xx)

Depois de colocar a imagem (vou utilizar a do tutorial que dei pra vocês) vamos colocar o efeito, vamos utilizar a tag #sidebar:hover. #aloha1 img {margin-top:38px;margin-left:75px; width:30px;height:20px;position:fixed;background-color:#fff;}

#sidebar:hover #aloha1 img {-webkit-transition: all 0.9s ease-out;-moz-transition: all  0.9s ease-out;opacity:0;}

Percebam que logo depois de #sidebar:hover eu coloquei o nome da div da minha imagem portanto NÃO RETIREM se não nada vai dar certo. Agora vamos entender esse código. - -webkit-transition: all 0.9s ease-out;-moz-transition: all  0.9s ease-out: é o tempo que vai durar pra sua imagem sumir. - opacity: isso significa que depois que o determinado tempo passar a sua imagem vai sumir, não retirem o 0 se não a imagem não some. .

Muita gente pega minha base e vê os links lá mas não consegue colocar uma descrição por isso resolvi ajudar todos de uma vez só. Primeiro vamos criar uma div para a descrição, cole isso depois de “#menu”: #descricao {font-size: 11px; font-family: calibri;margin-left:25px; margin-top:26px;color:#000;width:150px;text-transform:lowercase; text-align:left;font-style:italic;}

Vamos entender o que esse código quer dizer: - font-size: significa o tamanho da sua fonte, pode ser 11, 12, 10, você quem decide, mas não é permitido retirar o “px” se não o código não funciona. - font-family: é a fonte, pode ser calibri, cambria, tahoma, verdana e etc. - margin-left: é a distância que tem da lateral esquerda do theme, você deve ajustar de acordo com sua preferência, mantenha o “px”. - margin-top: é a distância que tem do topo até onde você quer que fique, também ajuste de acordo com sua necessidade. - color: é a cor do texto, #000 é preto, aqui [xx] tem mais cores (copiem o Código HTML e não o Código Java) - width: é a largura da sua descrição, se você achar que assim está pequeno aumente. - text-transform: é a forma do texto, lowercase significa que todas as letras serão minúsculas, uppercase são todas as letras maiúsculas e capitalize apenas a primeira letra é maiúscula.  - text-align: é o alinhamento do texto, left é pra esquerda, right pra direita, center é no centro. - font-style: é um estilo pra fonte, italic é itálico, normal é normal e oblique é obliqua.

Agora vamos fazer a descrição aparecer. Cole depois de <body>, de preferência depois de <div id=”sidebar”> <div id=”descricao”>sua descrição aqui</div> NUNCA se esqueça de fechar a sua div se não o código não vai funcionar e pronto, está colocada sua descrição.

Bom, pra começar, primeiro, você tem que ter a foto que você quer usar. Geralmente eu utilizo os emoctions do whatsapp ou pngs. Se quiserem tem disponível emoctions aqui (xx) e pngs nesse tumblr aqui (xx) Antes de tudo, se a sua imagem ainda não estiver hospedada, hospede ela nesse site aqui (xx), carregue o arquivo, clique em “Upload File” e copie o link que vai ser gerado 

Depois de hospedar a imagem vamos colocar ela no theme.

Pra imagem poder aparecer não podemos criar uma div normal e sim uma div img, você cria uma tag normal e coloca as siglas “img” na frente, desse jeito: #suatagaqui img  Agora você configura a tag, coloca o posicionamento, tamanho e etc, as minhas geralmente possuem; width, height, margin-left e margin-top. Então, depois de configurar, minha imagem ficou assim: #aloha1 img {margin-top:38px;margin-left:75px; width:30px;height:20px;position:fixed;background-color:#fff;} Depois de fazer toda a configuração vamos fazer essa imagem aparecer no theme. Procure por <body> e cole isso: <div id=”suatagaqui”><img src=”link da imagem q vc hospedou aqui”></div>