tag:blogger.com,1999:blog-61520329819307052042024-03-21T16:09:43.078-03:00Eu Amo HTMLIsa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.comBlogger119125tag:blogger.com,1999:blog-6152032981930705204.post-11165702683464772542015-12-03T17:54:00.001-02:002015-12-03T17:54:07.445-02:00Menu Borders<div style="text-align: justify;">
Novamente, a pedido de um leitor, resolvi postar um menu que deixei "guardado" no blog de testes já faz um tempo. Na verdade, são três menus. Espero que gostem de todos eles <3 (<a href="http://testes-eah.tumblr.com/post/128423523965/menu-borders">#1</a> - <a href="http://testes-eah.tumblr.com/post/128423915795/menu-borders-2">#2</a> - <a href="http://testes-eah.tumblr.com/post/128423932265/menu-borders-3">#3</a>)</div>
<div style="text-align: justify;">
</div>
<a name='more'></a><b>1.</b> Modelo - ]]><<br />
<br />
<blockquote class="tr_bq">
#1</blockquote>
#cima-isa {<br />
<br />
<div style="text-align: justify;">
margin-top:0px; /* Move para cima ou baixo */</div>
<div style="text-align: justify;">
margin-left: 0px; /* Move para os lado */</div>
<div style="text-align: justify;">
position:absolute;</div>
<div style="text-align: justify;">
}</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
.menu1-isa {</div>
<div style="text-align: justify;">
width: 87px; /* Tamanho do menu */</div>
<div style="text-align: justify;">
background: none;</div>
<div style="text-align: justify;">
padding: 8px;</div>
<div style="text-align: justify;">
padding-top: 30px;</div>
<div style="text-align: justify;">
padding-bottom: 30px;</div>
<div style="text-align: justify;">
text-transform: uppercase;</div>
<div style="text-align: justify;">
text-align: center;</div>
<div style="text-align: justify;">
display: inline-block;</div>
<div style="text-align: justify;">
margin:1px;</div>
<div style="text-align: justify;">
border-top: transparent 2px solid;</div>
<div style="text-align: justify;">
border-bottom: transparent 2px solid;</div>
<div style="text-align: justify;">
-webkit-transition-duration: .30s;</div>
<div style="text-align: justify;">
-moz-transition-duration: .30s;</div>
<div style="text-align: justify;">
-o-transition-duration: .30s;}</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
.menu1-isa a {</div>
<div style="text-align: justify;">
color: black; /* Cor da fonte */</div>
<div style="text-align: justify;">
font-size: 20px; /* Tamanho da fonte */</div>
<div style="text-align: justify;">
font-family: lora; /* Nome da fonte */</div>
<div style="text-align: justify;">
text-decoration: none;}</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
.menu1-isa:hover {</div>
<div style="text-align: justify;">
border-top: black 2px solid; /* Cor, tamanho e tipo de linha */</div>
<div style="text-align: justify;">
border-bottom: black 2px solid; /* Cor, tamanho e tipo de linha */</div>
<div style="text-align: justify;">
padding-top: 10px;</div>
<div style="text-align: justify;">
padding-bottom: 10px;</div>
<div style="text-align: justify;">
-webkit-transition-duration: .30s;</div>
<div style="text-align: justify;">
-moz-transition-duration: .30s;</div>
<div style="text-align: justify;">
-o-transition-duration: .30s;}</div>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
#2</blockquote>
<div style="text-align: justify;">
#cimaa-isa {</div>
<div style="text-align: justify;">
margin-top:0px; /* Move para cima ou baixo */</div>
<div style="text-align: justify;">
margin-left: 0px; /* Move para os lado */</div>
<div style="text-align: justify;">
position:absolute;</div>
<div style="text-align: justify;">
}</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
.menu2-isa {</div>
<div style="text-align: justify;">
width: 87px; /* Tamanho do menu */</div>
<div style="text-align: justify;">
background: none;</div>
<div style="text-align: justify;">
padding: 8px;</div>
<div style="text-align: justify;">
padding-top: 30px;</div>
<div style="text-align: justify;">
padding-bottom: 30px;</div>
<div style="text-align: justify;">
text-transform: uppercase;</div>
<div style="text-align: justify;">
text-align: center;</div>
<div style="text-align: justify;">
display: inline-block;</div>
<div style="text-align: justify;">
margin:1px;</div>
<div style="text-align: justify;">
border-bottom: transparent 2px solid;</div>
<div style="text-align: justify;">
-webkit-transition-duration: .30s;</div>
<div style="text-align: justify;">
-moz-transition-duration: .30s;</div>
<div style="text-align: justify;">
-o-transition-duration: .30s;}</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
.menu2-isa a {</div>
<div style="text-align: justify;">
color: black; /* Cor da fonte */</div>
<div style="text-align: justify;">
font-size: 20px; /* Tamanho da fonte */</div>
<div style="text-align: justify;">
font-family: lora; /* Nome da fonte */</div>
<div style="text-align: justify;">
text-decoration: none;}</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
.menu2-isa:hover {</div>
<div style="text-align: justify;">
border-bottom: black 2px solid; /* Cor, tamanho e tipo de linha */</div>
<div style="text-align: justify;">
padding-top: 10px;</div>
<div style="text-align: justify;">
padding-bottom: 10px;</div>
<div style="text-align: justify;">
-webkit-transition-duration: .30s;</div>
<div style="text-align: justify;">
-moz-transition-duration: .30s;</div>
<div style="text-align: justify;">
-o-transition-duration: .30s;}</div>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
#3</blockquote>
<div style="text-align: justify;">
#cimaa-isaa {</div>
<div style="text-align: justify;">
margin-top:0px; /* Move para cima ou baixo */</div>
<div style="text-align: justify;">
margin-left: 0px; /* Move para os lado */</div>
<div style="text-align: justify;">
position:absolute;</div>
<div style="text-align: justify;">
}</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
.menu3-isa {</div>
<div style="text-align: justify;">
width: 87px; /* Tamanho do menu */</div>
<div style="text-align: justify;">
background: none;</div>
<div style="text-align: justify;">
padding: 8px;</div>
<div style="text-align: justify;">
padding-top: 30px;</div>
<div style="text-align: justify;">
padding-bottom: 30px;</div>
<div style="text-align: justify;">
text-transform: uppercase;</div>
<div style="text-align: justify;">
text-align: center;</div>
<div style="text-align: justify;">
display: inline-block;</div>
<div style="text-align: justify;">
margin:1px;</div>
<div style="text-align: justify;">
border-bottom: transparent 2px solid;</div>
<div style="text-align: justify;">
-webkit-transition-duration: .30s;</div>
<div style="text-align: justify;">
-moz-transition-duration: .30s;</div>
<div style="text-align: justify;">
-o-transition-duration: .30s;}</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
.menu3-isa a {</div>
<div style="text-align: justify;">
color: black; /* Cor da fonte */</div>
<div style="text-align: justify;">
font-size: 20px; /* Tamanho da fonte */</div>
<div style="text-align: justify;">
font-family: lora; /* Nome da fonte */</div>
<div style="text-align: justify;">
text-decoration: none;}</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
.menu3-isa:hover {</div>
<div style="text-align: justify;">
border-top: black 2px solid; /* Cor, tamanho e tipo de linha */</div>
<div style="text-align: justify;">
padding-top: 10px;</div>
<div style="text-align: justify;">
padding-bottom: 10px;</div>
<div style="text-align: justify;">
-webkit-transition-duration: .30s;</div>
<div style="text-align: justify;">
-moz-transition-duration: .30s;</div>
<div style="text-align: justify;">
-o-transition-duration: .30s;}</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
<b>2. </b>Layout - Add Gadgets - HTMl/JavaScript</div>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
#1</blockquote>
<div style="text-align: justify;">
<center><div id="cima-isa"></div>
<div style="text-align: justify;">
<div class="menu1-isa"><a href="">feito</a></div></div>
<div style="text-align: justify;">
<div class="menu1-isa"><a href="">por</a></div></div>
<div style="text-align: justify;">
<div class="menu1-isa"><a href="">isa</a></div></div>
<div style="text-align: justify;">
<div class="menu1-isa"><a href="">souza.</a></div></div>
<div style="text-align: justify;">
<div class="menu1-isa"><a href="">credite!</a></div></div>
<div style="text-align: justify;">
</div></center</div>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
#2</blockquote>
<div style="text-align: justify;">
<div id="cimaa-isa"></div>
<div style="text-align: justify;">
<div class="menu2-isa"><a href="">feito</a></div></div>
<div style="text-align: justify;">
<div class="menu2-isa"><a href="">por</a></div></div>
<div style="text-align: justify;">
<div class="menu2-isa"><a href="">isa</a></div></div>
<div style="text-align: justify;">
<div class="menu2-isa"><a href="">souza.</a></div></div>
<div style="text-align: justify;">
<div class="menu2-isa"><a href="">credite!</a></div></div>
<div style="text-align: justify;">
</div></center></div>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
#3</blockquote>
<div style="text-align: justify;">
<div id="cimaa-isaa"></div>
<div style="text-align: justify;">
<div class="menu3-isa"><a href="">feito</a></div></div>
<div style="text-align: justify;">
<div class="menu3-isa"><a href="">por</a></div></div>
<div style="text-align: justify;">
<div class="menu3-isa"><a href="">isa</a></div></div>
<div style="text-align: justify;">
<div class="menu3-isa"><a href="">souza.</a></div></div>
<div style="text-align: justify;">
<div class="menu3-isa"><a href="">credite!</a></div></div>
<div style="text-align: justify;">
</div></center></div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com3tag:blogger.com,1999:blog-6152032981930705204.post-41169600052729439582015-12-01T20:54:00.004-02:002015-12-01T20:54:36.127-02:00Menu afiliados<div style="text-align: justify;">
Olá! Há algum tempo atrás alguém pediu na <a href="https://ask.fm/L0V3LY_">minha ask</a> um menu para afiliados e hoje, finalmente, decidi posta-lo. (<a href="http://testes-eah.tumblr.com/post/134357404765/menu-afiliados">x</a>) - Espero que gostem.</div>
<div style="text-align: justify;">
</div>
<a name='more'></a><br />
<div style="text-align: justify;">
<b>1:</b> 'Modelo' > ']]><'</div>
<blockquote class="tr_bq" style="text-align: justify;">
.menu-af-isa {<br /><blockquote style="text-align: justify;">
background: pink;<br />margin-bottom: 4px;<br />padding: 4px;<br />display:inline-block;<br />-webkit-transition: .5s;<br />-moz-transition: .5s;<br />-ie-transition: .5s;<br />-o-transition: .5s;}<br />.menu-af-isa a {<br />color: white;<br />text-decoration: none;<br />text-transform: uppercase;<br />font-size:17px;<br />font-family: 'Slabo 27px'}<br />.menu-af-isa:hover {<br />-webkit-transform:scale(0.8);<br />-moz-transform:scale(0.8);<br />-ie-transform:scale(0.8);<br />-o-transform:scale(0.8);<br />-webkit-transition: .5s;<br />-moz-transition: .5s;<br />-ie-transition: .5s;<br />-o-transition: .5s;}</blockquote>
</blockquote>
<div style="text-align: justify;">
<b>2:</b> 'Layout' > 'Add gadget' > 'HTML/JavaScript'</div>
<blockquote class="tr_bq" style="text-align: justify;">
<p><center><br /><div class="menu-af-isa"><a href="LINK">EAH</a></div><br /><div class="menu-af-isa"><a href="LINK">EAH</a></div><br /><div class="menu-af-isa"><a href="LINK">EAH</a></div><br /><div class="menu-af-isa"><a href="LINK">EAH</a></div><br /><div class="menu-af-isa"><a href="LINK">EAH</a></div><br><div class="menu-af-isa"><a href="LINK">EAH</a></div><br /><div class="menu-af-isa"><a href="LINK">EAH</a></div><br /><div class="menu-af-isa"><a href="LINK">EAH</a></div><br /><div class="menu-af-isa"><a href="LINK">EAH</a></div><br /><div class="menu-af-isa"><a href="LINK">EAH</a></div><br><div class="menu-af-isa"><a href="LINK">EAH</a></div><br /><div class="menu-af-isa"><a href="LINK">EAH</a></div><br /><div class="menu-af-isa"><a href="LINK">EAH</a></div><br /><div class="menu-af-isa"><a href="LINK">EAH</a></div><br /><div class="menu-af-isa"><a href="LINK">EAH</a></div><br /></center></p></blockquote>
<div style="text-align: justify;">
<br /></div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com1tag:blogger.com,1999:blog-6152032981930705204.post-27004542272229839722015-11-29T11:01:00.003-02:002015-11-29T11:01:50.069-02:00Menu 142Olá. Esses dias eu decidi brincar com o HTMLedit e acabou saindo algo que eu gostei. Fiz um menu bem simples. Planejava usa-lo para um template futuro, mas não tenho mais a mesma paciência que eu tinha há alguns anos atrás, então decidi posta-lo aqui. Anyway... <a href="http://porquetaperguntando.blogspot.com.br/">exemplo</a>. Espero que gostem.<br />
<br />
<a name='more'></a><br />
<b>1. </b>Vá em 'Modelo' e procure por ']]><'. Acima desse trecho cole:<br />
<br />
<blockquote class="tr_bq">
.menu-eah {<br /><blockquote>
font-family: 'slabo 27px'; /* Fonte */<br />font-size: 19px; /* Tamanho do texto */<br />padding: 25px;<br />background-color: #ee8fa9; /* Cor do fundo */<br />text-align: center;<br />width: 940px; /* Tamanho */<br />border-bottom: solid #efefef 1px; /* Borda abaixo do menu */<br />text-transform: uppercase;<br />-webkit-transition-duration: .40s;<br />-moz-transition-duration: .40s;<br />-ie-transition-duration: .40s;<br />-o-transition-duration: .40s;}<br />.menu-eah a {<br />color: #fff; /* Cor do texto */<br />margin:5px;<br />text-align: center;<br />padding-top: 2px;<br />padding-bottom: 2px;<br />padding-left: 7px;<br />padding-right: 8px;<br />-webkit-transition-duration: .40s;<br />-moz-transition-duration: .40s;<br />-ie-transition-duration: .40s;<br />-o-transition-duration: .40s;}<br />.menu-eah a:hover {<br />color: #f0a2b1; /* Cor do texto hover */<br />text-align: center;<br />padding-top: 20px;<br />padding-bottom:20px;<br />padding-left: 7px;<br />padding-right: 8px;<br />background-color: #fff; /* Cor do menu hover */<br />opacity: .3; /* Opacidade do menu hover */<br />-webkit-transition-duration: .40s;<br />-moz-transition-duration: .40s;<br />-ie-transition-duration: .40s;<br />-o-transition-duration: .40s;}</blockquote>
</blockquote>
<br />
<b>2.</b> Se quiser coloca-lo acima do blog, procure por </header> e cole:<br />
<br />
<blockquote class="tr_bq">
<div style='position: absolute; margin-top: -42px; margin-left: 0px;'><br /><div class='menu-eah'><br /><a href=''>Página Inicial</a><br /><a href=''>tutoriais</a><br /><a href=''>downloads</a><br /><a href=''>templates</a><br /><a href=''>contato</a><br /><a href=''>créditos</a><br /> </div></div></blockquote>
Se quiser coloca-lo em outro local, vá em 'Layout' > 'Adicionar Gadget' > 'HTML/JavaScrip' e cole o código que eu passei acima.Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com3tag:blogger.com,1999:blog-6152032981930705204.post-12906930879213205742015-10-17T09:28:00.000-03:002015-10-17T09:28:02.974-03:00Coluna fixa<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhThSg4ToOE389RWzo0y3xMm59tfi2qsE_bei6fNMbfaIzDDv2OIaWqaHAIWIfkxrclD77bXGHDkAY_XnNvD2HhV15lF6rcGMBpbo-GsXDXdMKYQygzxLX8D_U9RE5f6ocwt-K0NWZt9Dk/s1600/5.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhThSg4ToOE389RWzo0y3xMm59tfi2qsE_bei6fNMbfaIzDDv2OIaWqaHAIWIfkxrclD77bXGHDkAY_XnNvD2HhV15lF6rcGMBpbo-GsXDXdMKYQygzxLX8D_U9RE5f6ocwt-K0NWZt9Dk/s1600/5.png" /></a></div>
<div style="text-align: justify;">
Olá! Uma linda alma (obrigada) fez um pedido na minha <a href="http://ask.fm/L0V3LY_">ask </a>(lembrando que não precisa ser registrado para pedir) e aqui estou eu. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Esse é um tutorial bem simples e, ao mesmo tempo, um pouco difícil de achar. Digo isto por experiência própria.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Vamos ao tutorial <3</div>
<div style="text-align: justify;">
<br />
<br />
<br />
<br />
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<a name='more'></a>Se a sua coluna for do lado esquerdo, procure por .main-inner .column-left-inner { e substitua o código inteiro por:<br />
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
.main-inner .column-left-inner {<br />
margin-right: $(content.padding);<br />
margin-left: 10px; /* Mova para a esquerda ou para direita */<br />
margin-top: -5px; /* Move para cima ou para baixo */<br />
background: white; /* Cor do background */<br />
text-align: justify; /* Justificado */<br />
z-index: 9999999999; /* N altere */<br />
position: fixed; /* N altere */<br />
height: 100%; /* N altere */<br />
}</blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Se a sua coluna for na direita, substitua o <b>left</b> por <b>right</b>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
...</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
E... é isso. Espero que tenham gostado. Qualquer dúvida, vá na minha <a href="http://ask.fm/L0V3LY_">ask</a>.</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com6tag:blogger.com,1999:blog-6152032981930705204.post-58794369728059609912015-10-15T09:12:00.001-03:002015-10-15T09:12:45.289-03:00Redes Sociais / Social Icons<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia0MakBifp2sYDcfhJhRwpfjuuQygpTDzmmYHfNiEH6hdJWZi90L0ELwdDH44CQy0hu1bMmvoaxjPRHsZujaw324TZHzMUdrusYv4CLt8fn7xkwV9AFIGwVonjXjGlS1B-_rYOPgwLZbo/s1600/4.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia0MakBifp2sYDcfhJhRwpfjuuQygpTDzmmYHfNiEH6hdJWZi90L0ELwdDH44CQy0hu1bMmvoaxjPRHsZujaw324TZHzMUdrusYv4CLt8fn7xkwV9AFIGwVonjXjGlS1B-_rYOPgwLZbo/s1600/4.png" /></a></div>
<div style="text-align: justify;">
Olá! Como devem ter percebido, eu tenho andado um pouco sumida. Meu leitores mais antigos já sabem o motivo: escassez de ideias. Graças a Deus, uma alma foi fazer um pedido que eu achei bem lá na ask. Obrigada ;-;</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hoje eu vou ensinar a encontrar e "enfeitar" ícones de redes sociais e também vou disponibilizar três menus bem discretos para SN.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Novamente, eu sei que é muito chato ter que fazer isto, mas se puderem, poderiam passar lá na ask e pedir algo? Não precisa ter conta para deixar uma pergunta.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Anyway, clique no coração para continuar lendo.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<a name='more'></a>O primeiro passo é achar os ícones. Antigamente, isto era uma tarefa bem difícil para mim, mas hoje acredito que essa seja a parte mais fácil e divertida. É só visitar <a href="http://www.freepik.com/free-icons/social">este site</a> e escolher os ícones que mais gosta. Há uma variedade muito grande, então você provavelmente vai achar um que goste.<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Após achar o ícone que mais gosta, clique nele e faça o download. Você pode baixa-lo em PNG, JPG ou PSD, o que torna tudo mais fácil. Geralmente, eu baixo o PNG, mas escolha o que acha melhor para você. Você também pode escolher a cor que quiser.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Eu escolhi a cor preta, pois prefiro mudar a cor depois, assim, se algo der errado, é fácil de consertar. Para colorir o ícone preto, aperte Shift+Ctrl+N. Uma camada transparente aparecerá. Selecione o pincel e, em seguida, escolha uma cor e pinte esta nova camada.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Clique com o botão direito nesta camada colorida e selecione 'Create Clipping Mask'. Depois disso, clique novamente com o botão direito na camada colorida e selecione 'Merge Down'.<br />
<br />
Para dar um pouco mais de vida, aperte duas vezes na camada para abrir o 'Layer Style'. Mude o que achar melhor e depois salve.<br />
<br />
Depois que terminar tudo, não se esqueça de salvar em PNG.<br />
<br />
...<br />
<br />
Menus (<a href="http://testes-eah.tumblr.com/post/129711769640/menu-social-1">1</a>, <a href="http://testes-eah.tumblr.com/post/129711950715/menu-social-2">2</a>, <a href="http://testes-eah.tumblr.com/post/129712618880/menu-social-3">3</a>)<br />
<br />
<blockquote>
/* Menu Social #1 */<br />.socialicons-isa {<br />height: 100px;<br />width: 35px;<br />border-radius: 5px;<br />padding: 10px;}<br />.rotate-icons-isa {<br />opacity:1;<br />-webkit-transition-duration: .80s;<br />-moz-transition-duration: .80s;<br />-o-transition-duration: .80s;}<br />.rotate-icons-isa:hover {<br />-webkit-transform:translatex(15px) rotate(360deg);<br />-webkit-transition-duration: .80s;<br />-moz-transition-duration: .80s;<br />-o-transition-duration: .80s;<br />}<br />/* Menu Social #2 */<br />.social-icons-isa {<br />height: 100px;<br />width: 35px;<br />border-radius: 5px;<br />padding: 10px;}<br />.icons-isa {<br />opacity:1;<br />-webkit-transition-duration: .80s;<br />-moz-transition-duration: .80s;<br />-o-transition-duration: .80s;}<br />.icons-isa:hover {<br />-webkit-transform:translatex(20px);<br />-webkit-transition-duration: .80s;<br />-moz-transition-duration: .80s;<br />-o-transition-duration: .80s;<br />}<br />/* Menu Social #3 */<br />.social-iconss-isa {<br />height: 100px;<br />width: 35px;<br />border-radius: 5px;<br />padding: 10px;}<br />.iconss-isa {<br />opacity:1;<br />-webkit-transition-duration: .80s;<br />-moz-transition-duration: .80s;<br />-o-transition-duration: .80s;}<br />.iconss-isa:hover {<br />-webkit-transform:rotatey(360deg);<br />-webkit-transition-duration: .80s;<br />-moz-transition-duration: .80s;<br />-o-transition-duration: .80s;<br />}</blockquote>
<div>
<br /></div>
<div>
Após escolher o que mais gostou, abra a estrutura HTML do seu blog e procure por </header> e acima cole:</div>
<div>
<br /></div>
<blockquote class="tr_bq">
#1<br /><div style='position: fixed; margin-top: 40px; margin-left: -80px;'><br /><div class="socialicons-isa"><br /><a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="rotate-icons-isa"></a><br /><a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="rotate-icons-isa"></a><br /><a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="rotate-icons-isa"></a><br /><a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="rotate-icons-isa"></a><br /></div></div></blockquote>
<div>
<br /></div>
<blockquote class="tr_bq">
#2<br /><div style='position: fixed; margin-top: 40px; margin-left: -80px;'><br /><div id="icons-isa"><br /><div class="social-icons-isa"><br /><a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="icons-isa"></a><br /><a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="icons-isa"></a><br /><a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="icons-isa"></a><br /><a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="icons-isa"></a><br /></div> </div></div></blockquote>
<div>
<br /></div>
<blockquote class="tr_bq">
#3<br /><div style='position: fixed; margin-top: 40px; margin-left: -80px;'><br /><div class="social-iconss-isa"><br /><a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="iconss-isa"></a><br /><a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="iconss-isa"></a><br /><a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="iconss-isa"></a><br /><a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="iconss-isa"></a><br /></div><br /></div></blockquote>
<div>
<br /></div>
<div>
Não copie o #1,2,3, é só uma maneira que encontrei para indicar qual é o código que deveriam copiar, ok?</div>
<div>
<br /></div>
<div>
O <div style="position: fixed..." faz o menu se fixar no topo do blog. Mude os margins para ajusta-lo de maneira que deixe-o visível.</div>
<div>
<br /></div>
<div>
Bem, é só isso. Espero que tenham gostado.</div>
<div>
<br /></div>
<blockquote class="tr_bq">
Este post foi escrito há décadas, mas por causa de alguns imprevistos acabei não postando.</blockquote>
</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com3tag:blogger.com,1999:blog-6152032981930705204.post-25091900116556356942015-09-14T19:00:00.000-03:002015-09-14T19:00:24.064-03:00Então...<div style="text-align: justify;">
Eu sei que é muito chato ficar pedindo, mas será que poderiam fazer alguns pedidos ou enviar sugestões na <a href="http://ask.fm/L0V3LY_">ask</a>. Não quero deixar o blog parado novamente...</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com2tag:blogger.com,1999:blog-6152032981930705204.post-25500169353774407892015-09-07T08:16:00.000-03:002015-09-07T08:16:21.759-03:00Menu Fast<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoazLGnXyJF3UeIhEHrq_jvI1Gnwtw9NNSyZeIBgPMSU27bQNh0g4QAzpzElkJg2q5u_I8DlxAXlMsBPpeqOeclQcM1jOlbt738Fgezs4gjjmzc1sXHtLlTyPY9TYnw1ppQBM_vytpazI/s1600/3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoazLGnXyJF3UeIhEHrq_jvI1Gnwtw9NNSyZeIBgPMSU27bQNh0g4QAzpzElkJg2q5u_I8DlxAXlMsBPpeqOeclQcM1jOlbt738Fgezs4gjjmzc1sXHtLlTyPY9TYnw1ppQBM_vytpazI/s1600/3.png" /></a></div>
<div style="text-align: justify;">
Olá! Dessa vez eu não demorei para postar, graças a Deus. Pretendo deixar o blog mais ativo. Já estou preparando alguns posts para deixar esse lugar menos abandonado.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Vamos falar sobre o menu. Ele é o meu tipo favorito: menu com imagens. Quem já segue o blog há algum tempo, já sabe que o blog tem um monte desses menus. <a href="http://testes-eah.tumblr.com/post/128364014455/menu-fast">Exemplo.</a> Esse é, até agora, o meu menu favorito <3</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Espero que gostem. Comentem se acharem algum erro no exemplo ou código. Beijos ;*</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<a name='more'></a><b>1. </b>Procure por ]]>< e acima deste trecho cole:<br />
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
#ola-isaa:hover #menu-fast-isa{<br />
opacity: 0.7;<br />
}<br />
#menu-fast-isa{<br />
opacity: 0.7; /* Opacidade do menu */<br />
position:absolute;<br />
-webkit-transition: all .60s ease-in-out;-0-transition: all .60s ease-in-out;<br />
-moz-transition: all 1s ease-in-out;-ms-transition: all .60s ease-in-out;transition: all .60s ease-in-out;<br />
margin-left: 3px; /* Move o menu para os lados */<br />
margin-top: -232px; /* Move o menu para cima ou para baixo */<br />
}<br />
#menu-fast-isa a {<br />
color: white; /* Cor do texto */<br />
text-align: center;<br />
margin: 1px;<br />
float:left; /* Posição */<br />
font-family: trebuchet ms; /* Nome da fonte */<br />
font-size: 10px; /* Tamanho da fonte */<br />
overflow:hidden;<br />
height: 10px; /* Altura - Não mude se for manter a fonte 10 */<br />
padding-top: 3px;<br />
padding-bottom: 6px;<br />
padding-left: 3px;<br />
padding-right: 3px;<br />
background: pink; /* Cor do fundo */<br />
border-radius: 4px; /* Bordas arredondadas */<br />
width: 50px; /* Tamanho do menu antes do hover */<br />
text-decoration:none;<br />
-webkit-transition-duration: .6s;<br />
-moz-transition-duration: .6s;<br />
transition-duration: .6s;}<br />
#menu-fast-isa a:hover {<br />
width: 226px; /* Tamanho do menu no hover */<br />
-webkit-transition-duration: .6s;<br />
-moz-transition-duration: .6s;<br />
transition-duration: .6s;}</blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>2. </b>Vá em 'Layout' > 'Adicionar Gadget' > 'HTML/JavaScript' e cole:</div>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
<div id="ola-isaa"><br />
<img src="https://38.media.tumblr.com/294889dbd8da8eac27125c3af3222961/tumblr_inline_mtvrsorND41s0xdjj.png" alt="image"><div id="menu-fast-isa"><br />
<a href="/">FEITO</a><br><p><br />
<a href="/">POR</a><br></p><p><br />
<a href="/">ISA</a><br></p><p><br />
<a href="/">SOUZA</a><br></p><p><br />
<a href="/">CREDITE</a><br></p><p><br />
<a href="/">SE</a><br></p><p><br />
<a href="/">USAR</a><br></p><p><br />
</p></div><br />
</div></blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com7tag:blogger.com,1999:blog-6152032981930705204.post-9423964542745310062015-09-03T21:18:00.000-03:002015-09-04T20:45:52.747-03:00Picbox #2<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-86LHkPHCc9xTtijk_LczTLrzTUCSZSrCbYwznc5A-zu4FLRBP432UDmVjToY8thtcdzcFEhVO54GnwBj-qgG9y6jbduBXrpwiSC5DVd4kfssChoGBlh4s5XmMmnXbppjMQLuk9eRIXU/s1600/2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-86LHkPHCc9xTtijk_LczTLrzTUCSZSrCbYwznc5A-zu4FLRBP432UDmVjToY8thtcdzcFEhVO54GnwBj-qgG9y6jbduBXrpwiSC5DVd4kfssChoGBlh4s5XmMmnXbppjMQLuk9eRIXU/s1600/2.png" /></a></div>
<div style="text-align: justify;">
Olá! Queria me desculpar pela demora para postar alguma coisa. Eu estou um <strike>muito</strike> pouco estressada por causa da escola, então me afastei um pouco do blog. Quero entrar em uma escola militar, por isso preciso estudar muito nesse semestre.<br />
<br />
Bem, vamos parar com esse papo depressivo e vamos falar de coisas boas \o/ Aqui estou eu, trazendo outro modelo de picbox que eu fiz séculos atrás, mas acabei não postando por preguiça. (<a href="http://testes-eah.tumblr.com/post/122961613315/picbox-2">x</a>)<br />
<br />
Antes de ir direto ao assunto, gostaria de avisar que eu estou preparando alguns templates que em breve estarão disponíveis no <a href="http://eah-templates.tumblr.com/">EAH T&T</a>. Estão ficando legais, então estou ansiosa para disponibiliza-los ;-;<br />
<br />
<br />
<br />
<a name='more'></a><b>1. </b>Procure por ]]>< . Acima do trecho que achou, cole este código:<br />
<br />
<blockquote>
.nomee-isa {<br />
height: 100px; /* Coloque o tamanho da imagem */<br />
width: 100px; /* Coloque o tamanho da imagem */<br />
font: 13px trebuchet ms; /* Tamanho e tipo de fonte */<br />
text-transform: uppercase;<br />
background: transparent;<br />
-webkit-transition: all 0.8s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}<br />
.nomee-isa b {<br />
margin-right: -1px; /* Muda o título de posição */<br />
color: #a7d7e9; /* Cor do negrito */<br />
text-shadow: 1px 1px 1px #; /* sombra do negrito, se quiser */}<br />
.nomee-isa a {<br />
background: transparent;<br />
margin-right: -1px; /* Muda link de posição */<br />
color: #b3d6e9; /* Cor do link */<br />
text-decoration: none;<br />
font-size: 11px; /* Tamanho da fonte do link */<br />
-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}<br />
#caixa-isa .boxx-isa {<br />
-webkit-border-radius:7px;<br />
-moz-border-radius:7px;<br />
-o-border-radius:7px;<br />
-ie-border-radius:7px;<br />
-border-radius:7px;<br />
text-align: center;<br />
width: 100px; /* Largura da imagem*/<br />
height: 100px; /* Altura da imagem */<br />
margin-top: -103px; /* Posicao do quadrado - Mude até estar no centro */<br />
-webkit-transform: scale(0.9);<br />
-mox-transform: scale(0.9);<br />
-o-transform: scale(0.9);<br />
-ie-transform: scale(0.9);<br />
opacity: 0;<br />
-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;<br />
}<br />
#caixa-isa .boxx-isa:hover {<br />
-webkit-transform: scale(0.9);<br />
-mox-transform: scale(0.9);<br />
-o-transform: scale(0.9);<br />
-ie-transform: scale(0.9);<br />
-webkit-border-radius:7px;<br />
-moz-border-radius:7px;<br />
-o-border-radius:7px;<br />
-ie-border-radius:7px;<br />
-border-radius:7px;<br />
text-align: center;<br />
width: 100px; /* Largura da imagem*/<br />
height: 100px; /* Altura da imagem */<br />
margin-top: -103px; /* Posicao do quadrado - Mesma de cima */<br />
opacity: 0.9;<br />
background: #efefef; /* Cor do fundo hover */<br />
-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;<br />
}</blockquote>
<div>
<br /></div>
<div>
<b>2. </b>Após modificar tudo que está destacado no código acima, vá em 'Layout' > 'Adicionar um Gadget' > 'HTML/JavaScript' e cole:</div>
<div>
<br /></div>
<div>
<blockquote class="tr_bq">
<div id="caixa-isa"><br />
<img src="http://40.media.tumblr.com/c364e7944d3a82d1380ae9554ad234c9/tumblr_inline_npnlkb0jdD1t0yr27_540.png" style="-webkit-border-radius: 7px; -moz-border-radius: BORDApx; -o-border-radius: BORDApx; -ie-border-radius: 7px;"><div class="boxx-isa"><br><center><div class="nomee-isa"><b>Isa Souza</b><br><a href="http://link">euamohtml</a></div></blockquote>
</div>
<div style="text-align: center;">
<b>$ $ $</b></div>
<div style="text-align: center;">
<b><br /></b></div>
<div>
Espero que tenham gostado do tutorial. Se encontrarem algum problema com o código ou o exemplo, peço que vá até a minha ask e me avise. Obrigada <3</div>
</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com5tag:blogger.com,1999:blog-6152032981930705204.post-16049073998378751532015-08-16T00:21:00.000-03:002015-08-16T00:21:35.853-03:00YouTube Gif<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAzQ8Zhfw3EukNmLET1AGvKpw0HqIdEyG4q_SRVBYAl2HaKYRMEk_TSQRg2_-ZuuNanOv8VDjfZaih9f_iYv9eI6cenJlqRE6kXkN4IxpBrheclVo_4I33V2GTqORngpVAzy0IEenXKSg/s1600/1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAzQ8Zhfw3EukNmLET1AGvKpw0HqIdEyG4q_SRVBYAl2HaKYRMEk_TSQRg2_-ZuuNanOv8VDjfZaih9f_iYv9eI6cenJlqRE6kXkN4IxpBrheclVo_4I33V2GTqORngpVAzy0IEenXKSg/s1600/1.png" /></a></div>
<div style="text-align: justify;">
Oi! Primeiramente, eu gostaria de pedir desculpas por deixar o blog tão parado. Eu estava fazendo este template, pois eu já estava enjoada do outro. Mas acabei tendo problemas com os códigos e demorei dias para consertar. E aí, gostaram dele?</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pra voltar da maneira certa, estou trazendo um dos meus graphics favoritos de todos os tempos. É bem simples de fazer.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Para visualiza-lo, clique no coração ali do lado <3</div>
<div style="text-align: justify;">
Espero que gostem do tutorial.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0BEhXbE5z-esHxzyttGItWrOriNE8gFKqIsvImCzq7Mbpqt9vkrTmUatFENax_EnDVgFU7Wh1NsNL_EydAlah4LWO3D9Yq5zZImYF1NyKOQHoLla2ypylEl3itqZoA3sQu_n0ZsR3MKs/s1600/1---eah.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0BEhXbE5z-esHxzyttGItWrOriNE8gFKqIsvImCzq7Mbpqt9vkrTmUatFENax_EnDVgFU7Wh1NsNL_EydAlah4LWO3D9Yq5zZImYF1NyKOQHoLla2ypylEl3itqZoA3sQu_n0ZsR3MKs/s1600/1---eah.gif" /></a></div>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
Esse tutorial é pra quem já tem um certo conhecimento das ferramentas do PS. Se você não sabe nada sobre o PS, é melhor voltar quando você tiver um pouco mais de conhecimento.</blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>1. </b>Faça um gif (<a href="http://euamohtml.blogspot.com.br/2014/01/gifs-1-como-fazer.html">x</a>, <a href="http://euamohtml.blogspot.com.br/2014/06/fazer-e-deixar-um-gif-nitido.html">x</a>) de seu vídeo favorito. O tamanho do gif deve ser 216x121. Selecione todas as suas camadas e quadros. Use o 'Crop Tool' (PS CS4: atalho C) para corta-las (<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc35dTBN9arUxhU0-OfjbKZTyJqYSIlEBs8gfy472sGw18LEQ2plW5zwpR5axV-DmaO_aDjyHf5VnaEMqwoavQpNPgPJmQ8w1nbD3kmGWzw2Cdw2O9bmtsBzGB1fHQ1dc23rIXW-TTlDY/s1600/Untitled-4.png">x</a>).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>2. </b>Adicione PSDs, nitídez, etc agora.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>3.</b> Abra o YT e procure pelo vídeo que escolheu. Tire um print da tela e abra-o no PS. Corte as informações do vídeo (nome, visualizações, data, etc) e cole em outro documento.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>4. </b>Volte à aba do gif. Aperte Ctrl+Alt+C e mude a largura para 550 e altura para 150.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>5. </b>Selecione todas as camadas e quadros e mova-os para a parte esquerda.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>6. </b>Se lembra daquelas informações que você havia cortado? Copie e cole a imagem no gif. Ela deve estar acima do PSD, pois ela não pode ser modificada pelos efeitos. Para mover esta camada, TODOS OS QUADROS DEVEM ESTAR <b>SELECIONADOS</b> senão vai dar errado.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>7. </b>Depois de ajustar o gif e os dados, vá em 'Layers'/'Camadas' > 'New Fill Layer'/'Nova Camada de Preenchimento' > 'Solid Color'/'Cor Sólida' > Branco.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>8. </b>Coloque a camada abaixo de todas as outras, deixando o fundo branco.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>9.</b> File > Save for web and devices. E fim.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com5tag:blogger.com,1999:blog-6152032981930705204.post-27238550133329788082015-07-27T01:08:00.004-03:002015-07-27T12:21:55.744-03:00Menu Up<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv7ydglj3uPgbSUf1eiPZeXAusdiyrpuYyLEcCMB4z4SGehy-gvBOxo8eq-otFGEXNc8lX8xgquoTlmHJhc92U0c_w8dCl7IN8KFpcy80fy5OxvR6HkiqnTAZbQPSyg5Ngnp5OjgTa1q8/s1600/8.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv7ydglj3uPgbSUf1eiPZeXAusdiyrpuYyLEcCMB4z4SGehy-gvBOxo8eq-otFGEXNc8lX8xgquoTlmHJhc92U0c_w8dCl7IN8KFpcy80fy5OxvR6HkiqnTAZbQPSyg5Ngnp5OjgTa1q8/s1600/8.png" /></a></div>
<div style="text-align: justify;">
Olá! Quem já segue um blog faz um tempo já deve ter percebido que eu estou com uma crise. Já faz um tempo que eu estou sem diversidade aqui. Isso me deixa muito frustrada. argh.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bem, indo direto ao assunto. Trago um menu que fiz há algum tempo. Pra ser honesta, eu já tinha me esquecido da existência dele. É um menu de imagem que eu geralmente uso. <a href="http://testes-eah.tumblr.com/post/123071949550/menu-rotate">Exemplo</a>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Espero que gostem.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<a name='more'></a><b>1. </b>Abram o Editor e procure por ]]>< . Acima desse trecho, cole:<br />
<br />
<blockquote class="tr_bq">
#isa-hi:hover #menu-up-isa {<br />
opacity: 1;<br />
}<br />
#menu-up-isa {<br />
opacity: 0;<br />
position:absolute;<br />
-webkit-transition: all .60s ease-in-out;<br />
-moz-transition: all 1s ease-in-out;-ms-transition: all .60s ease-in-out;transition: all .60s ease-in-out;<br />
margin-left: 4px; /* Move o menu para os lados */<br />
margin-top: -39px; /* Move o menu para cima ou para baixo */<br />
}<br />
#menu-up-isa a {<br />
-webkit-border-radius: 3px; /* Borda Arredondada */<br />
-moz-border-radius: 3px; /* Borda Arredondada */<br />
-o-border-radius: 3px; /* Borda Arredondada */<br />
border-radius: 3px; /* Borda Arredondada */<br />
padding: 3px;<br />
width: 50px; /* Tamanho das caixinhas do menu */<br />
float: left;<br />
background-color: #B5B5B5; /* Cor do fundo */<br />
margin-left: 2px;<br />
font-family: 'font-family: 'Ubuntu Mono';<br />
font-style: normal;<br />
font-size: 11px; /* Tamanho da fonte */<br />
text-align: center;<br />
margin-top: 2px;<br />
color: white; /* Cor da fonte */<br />
text-transform: uppercase;<br />
-webkit-transition: all 0.5s ease-out;<br />
-moz-transition: all 0.5s ease-out;<br />
-ie-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out; }<br />
#menu-up-isa a:hover {<br />
color: white; /* Cor da fonte ao passar o mouse */<br />
background-color: #B5B5B5; /* Cor do fundo ao passar o mouse */<br />
-webkit-transform: translatey(-12px);<br />
-moz-transform: translatey(-12px);<br />
-o-transform: translatey(-12px);<br />
-ie-transform: translatey(-12px);<br />
-webkit-transition: all 0.5s ease-out;<br />
-moz-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ie-transition: all 0.5s ease-out;}</blockquote>
<div>
<br /></div>
<div>
<b>2. </b>Vá em Layout - Adicionar Gadget - HTML/Java e cole:</div>
<div>
<br /></div>
<div>
<blockquote class="tr_bq">
<div id="isa-hi"><br />
<img src="http://31.media.tumblr.com/09b79b5e9a0045ea6800606109a9e15e/tumblr_inline_n0olleNAGJ1rcn02m.png"><br><div id="menu-up-isa"><br />
<a href="http://SEU%20LINK">#1</a><br />
<a href="http://SEU%20LINK">#2</a><br />
<a href="http://SEU%20LINK">#3</a><br />
<a href="http://SEU%20LINK">#4</a><br />
</div><br />
</div></blockquote>
</div>
<div>
<br /></div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com3tag:blogger.com,1999:blog-6152032981930705204.post-61417633975709056662015-07-19T19:10:00.002-03:002015-07-19T19:10:33.844-03:00#2 Template<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcqDP3oA_tqLzYSdbGxtl5Cc5AZrQB8YAQCu82Rw83PxW5O6-rjgPy4AQfUSeaNTjl_AoaLkR-gPUuJwKKVd3g146BtAATkWfccMtPzzbSCgT8b169oM7cOJJvRjiLqAvvfHeN5jRRXCY/s1600/5.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcqDP3oA_tqLzYSdbGxtl5Cc5AZrQB8YAQCu82Rw83PxW5O6-rjgPy4AQfUSeaNTjl_AoaLkR-gPUuJwKKVd3g146BtAATkWfccMtPzzbSCgT8b169oM7cOJJvRjiLqAvvfHeN5jRRXCY/s1600/5.png" /></a></div>
<div style="text-align: justify;">
Olá. Esses últimos dias foram bem tediosos, então resolvi sentar aqui e fazer alguma coisa pra afastar esse tédio para longe de mim. Acabei fazendo um template no PS com a intenção de disponibilizar, mas acabei ficando com preguiça de codificar e deixei isso de lado. No fim, eu fiz outro template pra compensar isso.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Ao contrário de todos os outros template que eu já fiz, ele é bem simples. Meu objetivo era fazer algo para um blog de textos e acho que eu consegui. Ele já está disponível no <a href="http://eah-templates.tumblr.com/">EAH T&T</a>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Clique no coração para vê-lo. Prometo disponibilizar mais no futuro. <3</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<a name='more'></a><div style="text-align: center;">
<a href="http://template-eah-3.blogspot.com.br/">(###)</a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Comentem e me digam o que acharam dele. Qualquer crítica construtiva será aceita.</div>
<div style="text-align: center;">
Aqui no meu PC ele está direitinho. Se acharem algum problema, me avisem pela <a href="http://ask.fm/L0V3LY_">ask</a>.</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com8tag:blogger.com,1999:blog-6152032981930705204.post-59689074576058893062015-07-14T15:10:00.001-03:002015-07-14T15:10:06.891-03:00Aprenda a brincar com as animações em gifs<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9lrPSGsXMJzhZi34SDj89aPp2AZKvrTD28KlU4PjUaTjZLK4ulps-QMX_Bq9uQUubgwQ857nLfb10x-TT04oGRsvEA8AX42ZbpgIfsZu5cLmX4LtNeeGFkOhEI_0woXKfFQPWbsIoeU/s1600/2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9lrPSGsXMJzhZi34SDj89aPp2AZKvrTD28KlU4PjUaTjZLK4ulps-QMX_Bq9uQUubgwQ857nLfb10x-TT04oGRsvEA8AX42ZbpgIfsZu5cLmX4LtNeeGFkOhEI_0woXKfFQPWbsIoeU/s1600/2.png" /></a></div>
<div style="text-align: justify;">
Olá! Indo direto ao ponto, eu vim trazer um tutorial bem típico do EAH. Quem segue o blog há um tempo sabe que eu sou louca por gifs e estou sempre atrás de coisas novas relacionadas a este assunto.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Trouxe para vocês um tutorial do tipo <i>graphic</i> para ensinar a mexer com algumas ferramentas do PS.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Clique no <i>coração</i> para ver os exemplos.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br />
<br />
<span style="text-align: center;"><br /></span>
<span style="text-align: center;"></span><br />
<a name='more'></a><blockquote class="tr_bq">
<span style="text-align: center;">Lembrete: Camadas ficam na lateral; frames (também conhecidas como quadros) ficam na parte inferior</span></blockquote>
<blockquote class="tr_bq">
Ctrl+Z desfaz ações, mas só funciona uma vez </blockquote>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQAWDyfYU0CGkDzdSjWKJ5JjA5q4TlSqnDzbowrGAQpyIUoZnC03UXP6CAV0HjaECMu3ZlYpaUOmy7X3x2Uh_wBfejZ2uhwwopyif3gYvnQaJGBAoeADaL5NfW-wIIbPrCujz_Zf5UUEc/s1600/1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQAWDyfYU0CGkDzdSjWKJ5JjA5q4TlSqnDzbowrGAQpyIUoZnC03UXP6CAV0HjaECMu3ZlYpaUOmy7X3x2Uh_wBfejZ2uhwwopyif3gYvnQaJGBAoeADaL5NfW-wIIbPrCujz_Zf5UUEc/s1600/1.gif" /></a></div>
<br />
<div style="text-align: justify;">
<b>1:</b> Crie uma camada e pinte-a com uma cor clara. Duplique esta camada, pinte-a com uma cor mais escura e deixe-a invisível.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>2:</b> Escreva algo e deixe o texto entre as duas camadas. Se quiser colocar algum style neste texto ou ajusta-lo, faça isto agora.<br />
<br />
<b>3:</b> Se lembra daquela camada invisível? Deixe esta camada visível. A ordem das camadas deve ser Camada duplicada - texto - camada original.<br />
<br />
<b>4: </b>Certifique-se que a janela de animação está aberta. Esta janela fica na parte inferior do PS. Selecione a primeira frame e duplique-a duas/três vezes (<a href="http://static.tumblr.com/nk6gzfe/NE6nr6w1j/1.png">x</a>).<br />
<br />
<b>5: </b>Selecione a camada (não é <i>frame</i>) duplicada e mova-a para o lado direito. Você pode usar o mouse ou as setas do seu teclado. Quero lembrar que se sua mão tremer pode acabar estragando tudo. Você pode usar Ctrl+Z, mas essa ferramenta só desfaz um erro. Se não for confiante, use as setas.<br />
<br />
<b>6: </b>Ao chegar ao ponto que você deseja clique neste botão (<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXiDJJsyeetV1yURfOrVBE5yKiBj59r9Nfe_0Vrq_4MN2g-8Walt5Ka5tTc7g9QqUfXO-l_bffyVrmWMktOOC-jHsQUEjdSwB7ZJLLeDpVVA3RDlnIUbrqbQY9xAb1Hl-9si0x2JVNhI8/s1600/9.png">x</a>) e ajuste da maneira que desejar. Quanto menor for o número que colocar na caixinha, mais "robótica" a animação fica, então indico colocar entre dez e dezesseis.<br />
<br />
<b>7: </b>Duplique a última frame quantas vezes você quiser.<br />
<br />
<b>8: </b>Arraste a camada de volta para o início, cobrindo o texto. Repita o 6º passo novamente.<br />
<br />
<b>9:</b> Você pode aumentar ou diminuir o tempo se quiser.<br />
<br />
<b>10:</b> Vá em 'File' > 'Save for Web and Devices' > 'Save'<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-_LU4OpQRnTI/Te4zHWGHyRI/AAAAAAAABUI/n0IEF9Y8004/title-bg_thumb%25255B3%25255D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://2.bp.blogspot.com/-_LU4OpQRnTI/Te4zHWGHyRI/AAAAAAAABUI/n0IEF9Y8004/title-bg_thumb%25255B3%25255D.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP2zTmthM0Ajk6d48-9dneQ_2yePhMXHHt27QBWeTnaF7a4XZhg_Q0qSA46Rb5wpbty0cggxXcvJvWq-Mew2cHJNGIS50mlviMyKPMfp0DeYi3QKlbIxUn5uj6-FDThXHwv_CJCGhKpBM/s1600/2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP2zTmthM0Ajk6d48-9dneQ_2yePhMXHHt27QBWeTnaF7a4XZhg_Q0qSA46Rb5wpbty0cggxXcvJvWq-Mew2cHJNGIS50mlviMyKPMfp0DeYi3QKlbIxUn5uj6-FDThXHwv_CJCGhKpBM/s1600/2.gif" /></a></div>
<br />
<br />
<b>1:</b> Abra um documento e pinte o background da cor que desejar. Crie uma camada de texto.e, se quiser, aplique um style.<br />
<br />
<b>2:</b> Após aplicar o style, clique na camada de texto para editar (para se certificar que está fazendo tudo certo, o texto deve estar rodeado por linha tracejadas). Na superior do PS, ao lado das fontes e etc, procure por <a href="http://static.tumblr.com/nk6gzfe/j05nr6w9v/2.png">este</a> botão. Clique nele e ajuste <a href="http://static.tumblr.com/nk6gzfe/VDInr6wcy/3.png">desta</a> maneira.<br />
<br />
<b>3:</b> Na janela de animação, selecione a única frame e clique no botão de animação (<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXiDJJsyeetV1yURfOrVBE5yKiBj59r9Nfe_0Vrq_4MN2g-8Walt5Ka5tTc7g9QqUfXO-l_bffyVrmWMktOOC-jHsQUEjdSwB7ZJLLeDpVVA3RDlnIUbrqbQY9xAb1Hl-9si0x2JVNhI8/s1600/9.png">x</a>). Ajuste da maneira que quiser.<br />
<br />
<b>4: </b>Duplique a última frame (<a href="http://static.tumblr.com/nk6gzfe/NE6nr6w1j/1.png">x</a>) que tiver e repita o 2º passo, mas desta vez coloque -40.<br />
<br />
<b>5:</b> Repita o 3º passo e vá em 'File' > 'Save for Web and Devices' > 'Save'<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-_LU4OpQRnTI/Te4zHWGHyRI/AAAAAAAABUI/n0IEF9Y8004/title-bg_thumb%25255B3%25255D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://2.bp.blogspot.com/-_LU4OpQRnTI/Te4zHWGHyRI/AAAAAAAABUI/n0IEF9Y8004/title-bg_thumb%25255B3%25255D.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPhzpNEO_s_xZitmsf5K-mnb59d6JQY08hsUzQudNgw4OpwRZlzQlzacrol7UPkD1J_Dg1aHIBq-HWmlJ0wXxjpC67QgDbtxnc4zS7Ivla6CJ1IGlWjEsSX9czPa-jMXkzaCvL3f_Sl5k/s1600/4.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPhzpNEO_s_xZitmsf5K-mnb59d6JQY08hsUzQudNgw4OpwRZlzQlzacrol7UPkD1J_Dg1aHIBq-HWmlJ0wXxjpC67QgDbtxnc4zS7Ivla6CJ1IGlWjEsSX9czPa-jMXkzaCvL3f_Sl5k/s1600/4.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>1:</b> Crie o documento e pinte o background.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>2:</b> Crie três camadas de texto. Escreva o que quiser, salve e aplique algum style/efeito que quiser.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>3:</b> Mude a opacidade das três camadas de texto para 0</div>
<br />
<b>4:</b> Na janela de animação, duplique (<a href="http://static.tumblr.com/nk6gzfe/NE6nr6w1j/1.png">x</a>) a primeira frame. Selecione uma das camadas e mude a opacidade para 100.<br />
<br />
<b>5:</b> Clique no botão de animação (<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXiDJJsyeetV1yURfOrVBE5yKiBj59r9Nfe_0Vrq_4MN2g-8Walt5Ka5tTc7g9QqUfXO-l_bffyVrmWMktOOC-jHsQUEjdSwB7ZJLLeDpVVA3RDlnIUbrqbQY9xAb1Hl-9si0x2JVNhI8/s1600/9.png">x</a>) e ajuste da maneira que quiser.<br />
<br />
<b>6:</b> Verá que várias frames apareceram. Clique na última e duplique-a.<br />
<br />
<b>7:</b> Selecione outra camada e repita o mesmo processo.<br />
<br />
<b>8:</b> 'File' > 'Save for Web and Devices' > 'Save'</div>
<!-- Blogger automated replacement: "https://2.bp.blogspot.com/-_LU4OpQRnTI/Te4zHWGHyRI/AAAAAAAABUI/n0IEF9Y8004/title-bg_thumb%25255B3%25255D.png" with "https://2.bp.blogspot.com/-_LU4OpQRnTI/Te4zHWGHyRI/AAAAAAAABUI/n0IEF9Y8004/title-bg_thumb%25255B3%25255D.png" --><!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F2.bp.blogspot.com%2F-_LU4OpQRnTI%2FTe4zHWGHyRI%2FAAAAAAAABUI%2Fn0IEF9Y8004%2Ftitle-bg_thumb%2525255B3%2525255D.png&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://2.bp.blogspot.com/-_LU4OpQRnTI/Te4zHWGHyRI/AAAAAAAABUI/n0IEF9Y8004/title-bg_thumb%25255B3%25255D.png" -->Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com5tag:blogger.com,1999:blog-6152032981930705204.post-28678286583330245512015-07-07T21:02:00.002-03:002015-07-07T21:02:43.658-03:00Menu Rotate<div class="separator tr_bq" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCdfEHVWxGla4cFUmAhBZBzjgCgerUbFycC_UCXj8nxWkfNhuds8oWXzfJennQVpV0UuRpINwbskcL5YxmIbY1zb05-CBMwIzxt7zjnDXvzBj44QRpbzTpdovkzEuLJccfho2mZe1Fcos/s1600/3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCdfEHVWxGla4cFUmAhBZBzjgCgerUbFycC_UCXj8nxWkfNhuds8oWXzfJennQVpV0UuRpINwbskcL5YxmIbY1zb05-CBMwIzxt7zjnDXvzBj44QRpbzTpdovkzEuLJccfho2mZe1Fcos/s1600/3.png" /></a></div>
<div style="text-align: justify;">
Oi! Quero pedir desculpa pela falta de diversidade do blog. O meu último post foi sobre o menu stretch e agora eu estou aqui com outro tutorial sobre menus. Eu planejava postar algo relacionado a gifs, mas o tutorial é bem grande, então deixei de lado. Prometo que minha próxima postagem será diferente.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<a href="http://testes-eah.tumblr.com/post/123071949550/menu-rotate">(Exemplo)</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<a name='more'></a>1 - Abra a estrutura do seu blog. Aperte F3 e procure por ]]>< . Acima desse trecho, cole:<br />
<div style="text-align: justify;">
<br /></div>
<blockquote style="text-align: justify;">
#isa-hello:hover #menu-rotate-isa {<br />opacity: 1;<br />}<br />#menu-rotate-isa {<br />opacity: 0;<br />display:inline-block;<br />position:absolute;<br />-webkit-transition: all .60s ease-in-out;<br />-moz-transition: all 1s ease-in-out;<br />-ms-transition: all .60s ease-in-out;<br />transition: all .60s ease-in-out;<br />margin-left: 5px; /* Move o menu para os lados */<br />margin-top: -240px; /* Move o menu para cima ou para baixo */<br />}<br />#menu-rotate-isa a {<br />-webkit-border-radius: 3px; /* Borda Arredondada */<br />-moz-border-radius: 3px; /* Borda Arredondada */<br />-o-border-radius: 3px; /* Borda Arredondada */<br />border-radius: 3px; /* Borda Arredondada */<br />padding: 3px;<br />width: 49px; /* Tamanho das caixinhas do menu */<br />float: left;<br />background-color: #B5B5B5; /* Cor do fundo */<br />margin-left: 2px;<br />font-family: 'font-family: 'Ubuntu Mono';<br />font-style: normal;<br />font-size: 11px; /* Tamanho da fonte */<br />text-align: center;<br />margin-top: 2px;<br />color: white; /* Cor da fonte */<br />text-transform: uppercase;<br />-webkit-transition: all 1.5s ease-out;<br />-moz-transition: all 1.5s ease-out;<br />-ie-transition: all 1.5s ease-out;<br />-o-transition: all 1.5s ease-out; }<br />#menu-rotate-isa a:hover {<br />color: white; /* Cor da fonte ao passar o mouse */<br />background-color: #B5B5B5; /* Cor do fundo ao passar o mouse */<br />-webkit-transform: rotatex(360deg);<br />-moz-transform: rotatex(360deg);<br />-ie-transform: rotatex(360deg);<br />-o-transform: rotatex(360deg);<br />-webkit-transition: all 1.5s ease-out;<br />-moz-transition: all 1.5s ease-out;<br />-o-transition: all 1.5s ease-out;<br />-ie-transition: all 1.5s ease-out;}</blockquote>
<br />
<div style="text-align: justify;">
2 - Após visualizar e salvar, vá em Layout - Adicionar Gadget - HTML/JavaScript e cole isto.</div>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq">
<div id="isa-hello"><br /><img src="<b>IMAGEM</b>" alt="image" /><br /><br /><br /><div id="menu-rotate-isa"><br /><a href="SEU LINK">#1</a><br /><a href="SEU LINK">#2</a><br /><a href="SEU LINK">#3</a><br /><a href="SEU LINK">#4</a><br /></div><br /></div></blockquote>
<br />
<div style="text-align: center;">
_____</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Espero que tenham gostado. Se tiver dúvidas, visite a minha ask e tire suas dúvidas.</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com6tag:blogger.com,1999:blog-6152032981930705204.post-81584951843138302272015-07-03T13:00:00.003-03:002015-07-03T13:00:46.627-03:00Menu Stretch<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIL9R_fplqP_QdiDFvp9GIq8otOJ7pF_aDCj2FGsxa9bDCS72bYjXlKON2WBEB8Yci4-lPzSTLOjjKyC3yoOmpvKTcl1O0uv-EiYnxcJf8of2C0vMDti3D3mX2KvCa9TwsmuzCz3J_Zt4/s1600/1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIL9R_fplqP_QdiDFvp9GIq8otOJ7pF_aDCj2FGsxa9bDCS72bYjXlKON2WBEB8Yci4-lPzSTLOjjKyC3yoOmpvKTcl1O0uv-EiYnxcJf8of2C0vMDti3D3mX2KvCa9TwsmuzCz3J_Zt4/s1600/1.png" /></a></div>
<div style="text-align: justify;">
Olá! Já faz um tempo, né? Não vou irritar vocês com as minhas desculpas, pois acredito que todos você já estão cansados disso.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Eu preciso avisar que o blog de testes está enfrentando problemas que eu, mesmo depois de horas, não consegui consertar. Se encontrarem algum problema em algum post, me avisem, assim posso passa-lo para outro blog.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Indo direto ao ponto... eu fiz alguns menus nesses últimos dias. Alguns ficaram horríveis, outros até ficaram decentes. Resolvi postar o meu favorito para "estrear" esse template da maneira certa.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: right;">
<a href="http://testes-eah.tumblr.com/post/122958908195/menu-stretch">(Preview)</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<a name='more'></a><b>1 -</b> Aperte F3 e procure por ]]>< . Acima cole o código abaixo:<br />
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
#ola-isa:hover #menu-stretch-isa{<br />opacity: 1;<br />}<br />#menu-stretch-isa{<br />opacity: 1; /* Opacidade do menu */<br />position:absolute;<br />-webkit-transition: all .60s ease-in-out;-0-transition: all .60s ease-in-out;<br />-moz-transition: all 1s ease-in-out;-ms-transition: all .60s ease-in-out;transition: all .60s ease-in-out;<br />margin-left: 7px; /* Move o menu para os lados */<br />margin-top: -232px; /* Move o menu para cima ou para baixo */<br />}<br />#menu-stretch-isa a {<br />color: white; /* Cor do texto */<br />margin: 1px;<br />float:left; /* Posição */<br />font-family: trebuchet ms; /* Nome da fonte */<br />font-size: 10px; /* Tamanho da fonte */<br />overflow:hidden;<br />height: 10px; /* Altura - Não mude ser for manter a fonte 10 */<br />padding-top: 3px;<br />padding-bottom: 6px;<br />padding-left: 3px;<br />padding-right: 3px;<br />background: pink; /* Cor do fundo */<br />border-radius: 3px; /* Bordas arredondadas */<br />width: 9px; /* Deixa apenas o coração a mostra */<br />text-decoration:none;<br />-webkit-transition-duration: 1s;<br />-moz-transition-duration: 1s;<br />transition-duration: 1s;}<br />#menu-stretch-isa a:hover {<br />width: 100px; /* Deixa o resto do título a mostra */<br />-webkit-transition-duration: 1s;<br />-moz-transition-duration: 1s;<br />transition-duration: 1s;}</blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>2 -</b> Após visualizar e salvar, vá em 'Layout' - 'Adicionar Gadget' - 'HTML/JavaScript' e cole este código:</div>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
<div id="ola-isa"><br /><img src="IMAGEM" alt="image" /><br /><div id="menu-stretch-isa"><br /><a href="/">♥ FEITO</a><br /><p><br /><a href="/">♥ POR</a><br /></p><p><br /><a href="/">♥ ISA</a><br /></p><p><br /><a href="/">♥ SOUZA</a><br /></p><p><br /><a href="/">♥ CREDITE</a><br /></p><p><br /><a href="/">♥ SE</a><br /></p><p><br /><a href="/">♥ USAR</a><br /></p><p><br /></p></div><br /></div></blockquote>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<b>+ + +</b></div>
<div style="text-align: center;">
Se tiverem dúvidas ou pedidos, vá a minha ask.</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com5tag:blogger.com,1999:blog-6152032981930705204.post-11098683255986601372015-05-05T21:21:00.000-03:002015-05-05T21:21:26.468-03:00Template no PS<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUGUYQFaZrUhK-IHHJn3JD4cdSjwM3QxRqMzlr0SyNT7oVHsilzg72-Xp9ariyCBIkgdMHhhSYV79EleJ6iPpSGsdO8jw54BCps5pEjvbfOTEYC7Lr2mRF1kumINxI_c0F9rv5gkw5x9U/s1600/3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUGUYQFaZrUhK-IHHJn3JD4cdSjwM3QxRqMzlr0SyNT7oVHsilzg72-Xp9ariyCBIkgdMHhhSYV79EleJ6iPpSGsdO8jw54BCps5pEjvbfOTEYC7Lr2mRF1kumINxI_c0F9rv5gkw5x9U/s1600/3.png" /></a></div>
<div style="text-align: justify;">
Hoje eu trago um dos tutoriais mais pedidos da história desse blog. Eu vou ensinar a fazer um template no PS e passa-lo para o HTML. Eu já usei vários aqui no blog, mas agora eu decidi mudar um pouco porque, honestamente, fazer layout no PS é meio complicadinho e eu queria algo mais simples. Caso você não faça a miníma ideia do que é um template/theme feito no PS, aqui vai alguns exemplos (<a href="http://htmluv.tumblr.com/">x</a>, <a href="http://htmlparty4ever.tumblr.com/">x</a>, <a href="http://making-themes.tumblr.com/">x</a>)</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<a name='more'></a><ul>
<li><a href="http://static.tumblr.com/h7lhpxe/iw9mr8n44/tema_html__html-e-css.blogspot.com_.zip">Download da base HTML</a> (Zé Pedro Silva)</li>
<li><a href="http://static.tumblr.com/h7lhpxe/iw9mr8n44/tema_html__html-e-css.blogspot.com_.zip">Pixels</a> (<a href="http://ilovebanner.tumblr.com/post/28200525124">Como carregar</a>)</li>
<li><a href="http://things-to-help-you.tumblr.com/tagged/styles">Styles</a> (<a href="http://ilovebanner.tumblr.com/post/9765825249">Como carregar</a>)</li>
<li><a href="http://euamohtml.blogspot.com.br/2013/04/photoshop-letra-fundida.html">Style Fundido</a></li>
<li><a href="http://euamohtml.blogspot.com.br/2014/04/14-gradients.html">Degradês</a></li>
<li><a href="http://www.4shared.com/rar/i-JbTVcD/PSCS4_Micro_-_DR.html?">Photoshop CS4 (Portable grátis)</a></li>
<li><a href="http://www.dafont.com/pt/">Fontes</a></li>
</ul>
<br />
<blockquote class="tr_bq" style="text-align: justify;">
Meu PS está em inglês, então eu não posso fazer nada se o seu PS está em outra língua e você não conseguir fazer. Vou fazer o máximo que posso para dizer onde cada item está :/</blockquote>
<blockquote class="tr_bq" style="text-align: justify;">
<i><u>Dica:</u></i> Use as linhas guias (<a href="http://www.printi.com.br/sites/all/themes/printi/images/montagem/janela-visualizacao-linha-externa-sangria-no-photoshop.png">exemplo achado no Google Imagens</a>) para ajustar os retângulos melhor. Para adiciona-las aperte Ctrl+R. Uma régua aparecerá. Ao arrastar a régua, verá uma linha azul. Essa é a linha guia.</blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>- Background:</b> Crie um documento <u>quadrado</u> entre 820px e 900px. Escolha uma cor e pinte o fundo. Se quiser um background com padrão (pixels), duplique o documento e clique duas vezes na camada duplicada. Uma janela com várias opções se abrirá. Clique em 'Pattern Overlay'; no CS4 é a penúltima opção. Escolha um pixel e mude a opacidade e o 'Blend Mode' (Modo de Mesclagem) para o que você acha que fica melhor.<br />
<br />
<b>- Dividindo:</b> Depois de fazer o template, esconda a equipe/slides/ribbons e salve em PSD e PNG. Feche o documento PSD e abra o PNG. Você precisa separar seu template em 4 partes: background, header, main e footer. Corte um pedaço pequeno do background e salve em formato PNG; o header (<a href="http://static.tumblr.com/zdvlqq9/BGwnnjgyl/print1.png">x</a>), main (<a href="http://static.tumblr.com/zdvlqq9/YQtnnjgyu/print2.png">x</a>) e footer (<a href="http://static.tumblr.com/zdvlqq9/ux6nnjgz6/print3.png">x</a>) e salve em PNG.</div>
<div style="text-align: justify;">
<div style="text-align: center;">
<br /></div>
<b>- Passando para o HTML:</b> Depois de ter hospedado as partes que você cortou, instale a base no seu blog.<br />
<br />
Vamos começar pelo background. Procure por body, .body-fauxcolumn-outer {<br />
<br />
<blockquote class="tr_bq">
body, .body-fauxcolumn-outer {<br />background:#bdbdbd; <b>(cor do background)</b>margin:0;<br />color:#828282; font:14px 'Corbel', sans-serif; <b>(cor/tamanho/nome da fonte)</b>text-align:justify;<br />}</blockquote>
<br />
Se quiser colocar um background com padrão, apague a segunda linha e substitua por background:url(url do background);<br />
<br />
Vamos para o header. Procure por <u><i>#header-wrapper {</i></u><br />
<br />
<blockquote class="tr_bq">
#header-wrapper {<br />
background:url(<b>URL DO HEADER</b>)no-repeat top center;<br />
width:<b>LARGURA</b>px;<br />
height:<b>ALTURA</b>px;<br />
margin:0 auto;<br />
}</blockquote>
<br />
Se for preciso "colar" o header no topo do blog, procure por <i><u>#outer-wrapper {</u></i> e mude o <i>padding</i> para <i>0</i>.<br />
<br />
<blockquote class="tr_bq">
#outer-wrapper {<br />
width:<b>LARGURA DO TEMPLATE</b>px; <u>(obrigatório)</u><br />
margin:0 auto;<br />
<i>padding:0;</i>text-align:justify;<br />
}</blockquote>
<br />
Para colocar a sidebar e a área dos posts procure por #main-wrapper { e mude o que for preciso.<br />
<br />
<blockquote class="tr_bq">
#main-wrapper {<br />
width:493px; /* Tamanho das postagens */<br />
padding:7px;<br />
margin-top:-15px; /* Move para cima ou para baixo */<br />
margin-left:6px; /* Move para a esquerda ou para a direita */<br />
float:left; /* Left coloca as postagens na esquerda e right na direita */<br />
word-wrap:break-word;<br />
overflow:visible;<br />
}</blockquote>
<br />
<div style="text-align: center;">
<b>Sidebar</b></div>
<blockquote class="tr_bq">
#sidebar-wrapper {<br />
width:260px; /* Largura da sidebar */<br />
padding:7px;<br />
margin-top:-15px; /* Move para cima ou para baixo */<br />
margin-right:7px; /* Move para a direita ou para a esquerda */<br />
float:right; /* Coloca na esquerda (left) ou direita (right) */<br />
word-wrap:break-word;<br />
overflow:visible;<br />
}</blockquote>
<br />
<div style="text-align: center;">
<b>Footer</b></div>
<blockquote class="tr_bq">
<div style="text-align: justify;">
#footer {</div>
background: url(http://static.tumblr.com/zdvlqq9/TiOnnjgy9/p3.png)no-repeat;<br />
width:900px; /* Largura */<br />
height:238px; /* Altura */<br />
clear:both;<br />
margin:0 auto;<br />
padding-top:0px; /* Distância entre o footer e a parte de baixo do blog */<br />
line-height:1.6em;<br />
text-transform:uppercase;<br />
letter-spacing:.1em;<br />
text-align:center;<br />
}</blockquote>
<br />
<div style="text-align: center;">
<b>Personalização do título dos gadgets</b></div>
<div style="text-align: center;">
<br /></div>
Se vocês fuçaram o código antes de mexer, perceberam que há duas opções para personalizar o título dos gadgets: ribbons ou título h2 (não faço a mínima ideia de como se chama tbh)<br />
<br />
Se você não que faixinha, procure por <u><i>h2 {</i></u> e, se quiser, mude o que está destacado abaixo.<br />
<br />
<blockquote class="tr_bq">
h2 {<br />margin:1.5em 0 .75em;<br />line-height:1.4em; <b>(Altura da linha)</b>text-transform:uppercase; <b>(Título maiúsculo - uppercase -; minúsculo - lowercase -; primeira letra maiúscula - capitalize -)</b>letter-spacing:0; <b>(Espaço entre as letras)</b>color:#828282; <b>(Cor)</b>}</blockquote>
<br />
Para colocar ribbons, procure por <u><i>.faixinhawelcome</i></u><br />
<br />
<blockquote class="tr_bq">
.faixawelcome {<br />background:url(<b>RIBBON</b>);<br />height:64px; <b>(altura)</b>width:290px;<b> (largura)</b>margin-left:-16px; <b>(move para os lados)</b>color:transparent; <b>(cor da letra/se sua faixinha tiver o nome do gadget nela, não mude essa parte)</b>margin-top:0px; <b>(move para cima)</b>margin-bottom:-3px; <b>(move para baixo)</b>text-shadow:none;<br />}</blockquote>
<br />
Se você tiver, por exemplo, cinco gadgets repita esse código cinco vezes, mudando o .faixawelcome { e o url do ribbon cada vez.<br />
<br />
Para colocar os ribbons nos gadgets você <u><b>tem</b></u> que adicionar um gadget HTML/JavaScript e acima do que você for escrever cole <div class='nome'></div>.<br />
<br />
<div style="text-align: center;">
<b>Título dos posts</b></div>
<br />
<blockquote class="tr_bq">
.post h3 {<br />margin:.25em 0 0;<br />padding:0 0 4px;<br />font-family:'Yanone Kaffeesatz', sans-serif; <b>(fonte)</b>font-size:22px; <b>(tamanho da fonte)</b>font-weight:normal; <b>(determina se é negrito - bold - ou normal)</b>line-height:1.4em; <b>(tamanho da linha)</b>color:#8b929e; <b>(cor sem hover)</b>}<br />.post h3 a, .post h3 a:visited, .post h3 strong {<br />display:block;<br />text-decoration:none;<br />font-weight:normal; <b>(determina se é negrito - bold - ou normal)</b>color:#89909c; <b>(cor do link visitado e negrito)</b>text-shadow:1px 1px 0 #fff; <b>(sombra)</b>}<br />.post h3 strong, .post h3 a:hover {<br />color:#89909c; <b>(cor do link hover)</b>text-shadow:1px 1px 0 #fff;<b> (sombra)</b>}</blockquote>
<br />
<div style="text-align: center;">
<b>Personalização das imagens</b></div>
<div style="text-align: center;">
<br /></div>
<blockquote class="tr_bq">
.post img {<br />padding:2px;<b> (largura da borda)</b>background:#cdcdcd; <b>(cor do fundo)</b>-webkit-border-radius:10px; <b>(bordas arredondadas)</b>-moz-border-radius:10px; <b>(bordas arredondadas)</b>border-radius:10px; <b>(bordas arredondadas)</b>}</blockquote>
<br />
Você pode apagar tudo se quiser, colocar uma opacidade hover, etc. O que quiser.<br />
<br />
<div style="text-align: center;">
<b>Imagem separando as postagens (opcional)</b></div>
<br />
Procure por <b:include data='post' name='post'/> . Abaixo desse trecho cole:<br />
<br />
<blockquote class="tr_bq">
<center><img src='URL DA IMAGEM'/></center></blockquote>
<br />
Eu indico <a href="http://2.bp.blogspot.com/-_LU4OpQRnTI/Te4zHWGHyRI/AAAAAAAABUI/n0IEF9Y8004/title-bg_thumb%25255B3%25255D.png">esta imagem</a>.<br />
<br />
<div style="text-align: center;">
<b>Outros pequenos detalhes</b></div>
<div style="text-align: center;">
<br /></div>
Como já devem ter percebido, eu não coloquei como personalizar os links, negritos, etc. O motivo é que esses códigos básicos já estão destacados no começo do código.<br />
<br />
Outras coisas como menu, efeitos, etc serão colocados acima de ]]>< normalmente.<br />
<br />
<div style="text-align: center;">
<b>...</b></div>
<br />
Eu não fiz o código, apenas expliquei de uma maneira mais fácil àqueles que não entendem muito de HTML. Se forem dar créditos a alguém, deem créditos para o Pedro.<br />
<br />
É só isso. Beijos ;3</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com5tag:blogger.com,1999:blog-6152032981930705204.post-73622213595252709652015-04-29T23:21:00.001-03:002015-04-29T23:21:38.582-03:00Como fazer Picspam Rainbow<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS1b81SgUIhGGGPyd1UudRDv3BdMYmvySdNy0VaqC03OWNnax84vkrPgNNniWbEMPpLRiJ2o587GrGkjgVEfCQM-O3kd-Uy7oaNP0w6fq0E8lH5nzKnVpMs3BMxNkw3XWG2CkO4-b2V4o/s1600/4.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS1b81SgUIhGGGPyd1UudRDv3BdMYmvySdNy0VaqC03OWNnax84vkrPgNNniWbEMPpLRiJ2o587GrGkjgVEfCQM-O3kd-Uy7oaNP0w6fq0E8lH5nzKnVpMs3BMxNkw3XWG2CkO4-b2V4o/s1600/4.png" /></a></div>
Eu sei, eu sei. Já estou há algum tempo sem postar aqui, mas eu tenho um bom motivo. Eu estou escrevendo um tutorial bem extenso que, provavelmente, será postado semana que vem.<br />
<br />
Me pediram esse tutorial na ask hoje. Como ele é bem fácil, eu decidi postar logo. Pra quem não sabe, Picspam é um conjunto de fotos que se vê bastante no tumblr. Geralmente, fãs de séries fazem isso o tempo todo.<br />
<br />
Um picspam é bem sem sal, então decidi adicionar um efeito para ficar mais legal. Espero que gostem. / Clique no coração para ver o efeito.<br />
<br />
<br />
<br />
<br />
<a name='more'></a><br /><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0whiwWo4HKa32OFwAobpAaEUo5lyZhKUQEedIx8SauSAlg5_lSgAOjoDTyU7YJDnO3eptMyYwGTc82_HkqbCfLCrNrERtIIm1fBBlCWs1GQ9UG_8VCEIYPWG5Oq9oLk2zaYsWSXPoTvw/s1600/-+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0whiwWo4HKa32OFwAobpAaEUo5lyZhKUQEedIx8SauSAlg5_lSgAOjoDTyU7YJDnO3eptMyYwGTc82_HkqbCfLCrNrERtIIm1fBBlCWs1GQ9UG_8VCEIYPWG5Oq9oLk2zaYsWSXPoTvw/s1600/-+1.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>1: </b>Depois de achar as screencaps da sua série/do seu filme favorito no <a href="http://hd-screencaps.tumblr.com/">HD-SCREENCAPS</a>, abra um documento pequeno. A largura tem que se maior que a altura. Eu usei 250x160. Ajuste a screencaps.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>2:</b> Clareie a imagem e, se quiser, adicione um leve topaz. </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>3:</b> Crie uma nova camada (Ctrl+Shift+N), escolha uma cor e pinte o fundo (<a href="http://static.tumblr.com/zdvlqq9/XdNnnll5n/print1.png">x</a>)</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>4:</b> Mude o <i>Modo de Mesclagem</i> da camada para Overlay (<a href="http://static.tumblr.com/zdvlqq9/LVynnll61/print2.png">x</a>). Se preferir, você pode duplicar a camada para deixar o efeito mais forte ou diminuir a opacidade se achar que ficou muito forte.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>5: </b>Crie um documento grande o suficiente para que caibam as imagens e cole-as nele. Fim.</div>
</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com3tag:blogger.com,1999:blog-6152032981930705204.post-20319403387861593612015-04-21T19:39:00.003-03:002015-07-01T16:16:28.404-03:00Efeito Picbox #1<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpRsdTgROOq1vNatoeoqliFb-gomN0NHuqPxTMXWFut5c6KTx36DiU2WoI5lmycUEU1_NJdp4wajKgz3R1N57OLsRiZU7vmHxiQp12-mt6Wi1ayGa_567UFEBEC7Nh66DREsSxRzxiI3Y/s1600/2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpRsdTgROOq1vNatoeoqliFb-gomN0NHuqPxTMXWFut5c6KTx36DiU2WoI5lmycUEU1_NJdp4wajKgz3R1N57OLsRiZU7vmHxiQp12-mt6Wi1ayGa_567UFEBEC7Nh66DREsSxRzxiI3Y/s1600/2.png" /></a></div>
<div style="text-align: justify;">
Olá! Nesse tempo em que o blog ficou em hiatus, eu não deixei o HTML de lado. Eu comecei a fazer a prestar mais atenção nos códigos que eu já conhecia e aprendi um pouco mais. Aprendi a fazer Picboxes \o/</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pra quem não sabe, picboxes são aqueles efeitos em imagens que geralmente usamos para mostrar o nome e o link do blog dos autores e moderadores do blog. Ainda não entendeu? <a href="http://euamohtmltestes.blogspot.com.br/2015/04/picbox-1.html">Aqui vai um exemplo</a>. Meu exemplo está sem sal, eu sei. Usei cores bem "seguras", então ficou meio... méh. Acredito que se vocês colocarem um pouco mais de cor, vai ficar bem melhor.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Espero que gostem :3</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<a name='more'></a><br />
<blockquote class="tr_bq">
<b>DICA:</b> Você pode usar o <a href="http://htmledit.squarefree.com/">HTMLedit</a> para editar, pois é bem mais fácil visualizar. O que ficará acima de ]]>< tem que ser colocado entre < style > < / style > (sem espaço, é claro) e o que será colocado em um gadget deve se colocado entre < body > < / body > (sem espaço)</blockquote>
<br />
<div style="text-align: justify;">
<b>1 -</b> Procure por ]]>< usando F3 e acima cole:<br />
<br />
<blockquote>
#box-isa {<br />
width: 120px /* Coloque o tamanho da imagem */<br />
height: 120px; /* Coloque o tamanho da imagem */<br />
-webkit-transition: all 0.8s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}<br />
.isa-box {<br />
width: 120px /* Coloque o tamanho da imagem */<br />
height: 120px /* Coloque o tamanho da imagem */<br />
background: transparent;<br />
-webkit-transition: all 0.8s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}<br />
.nome-isa {<br />
height: 120px; /* Coloque o tamanho da imagem */<br />
width: 120px; /* Coloque o tamanho da imagem */<br />
font: 13px trebuchet ms;<br />
text-transform: uppercase;<br />
background: transparent;<br />
-webkit-transition: all 0.8s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}<br />
.nome-isa b {<br />
margin-right: -1px; /* Muda o título de posição */<br />
color: #a7d7e9; /* Cor do negrito */<br />
text-shadow: 1px 1px 1px #; /* sombra do negrito, se quiser */}<br />
.nome-isa a {<br />
background: transparent;<br />
margin-right: -1px; /* Muda link de posição */<br />
color: #b3d6e9; /* Cor do link */<br />
text-decoration: none;<br />
font-size: 11px; /* Tamanho da fonte do link */<br />
-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}<br />
#box-isa .isa-box {<br />
text-align: center;<br />
width: 120px; /* Coloque o tamanho da imagem */<br />
height: 120px; /* Coloque o tamanho da imagem */<br />
margin-top: -125px; /* Coloque a altura da imagem + 5px se for colocar no blogger */<br />
-webkit-transform: scale(0.3);<br />
-moz-transform: scale(0.3);<br />
opacity: 0;<br />
-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;<br />
}<br />
#box-isa .isa-box:hover {<br />
text-align: center;<br />
width: 120px; /* Coloque o tamanho da imagem */<br />
height: 120px; /* Coloque o tamanho da imagem */<br />
margin-top: -125px; /* Coloque a altura da imagem + 5px se for colocar no blogger */</blockquote>
<blockquote>
opacity: 0.8;<br />
background: #efefef; /* Cor sólida * /<br />
-webkit-transform: scale(1);<br />
-moz-transform: scale(1);<br />
-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;<br />
}</blockquote>
<br />
<b>2 -</b> Depois de mudar o que for necessário, vá em Layout > Adicionar Gadget > HTML/JavaScript<br />
<br />
<blockquote class="tr_bq" style="text-align: start;">
<div id="box-isa"><br />
<img src="<b>IMAGEM</b>" style="-webkit-border-radius: <b>BORDA-ARREDONDA</b>px; -moz-border-radius: <b>BORDA</b><br />
<b>-ARREDONDA</b>px; -o-border-radius: <b>BORDA</b><br />
<b>-ARREDONDA</b>px; -ie-border-radius: <b>BORDA</b><br />
<b>-ARREDONDA</b>px;"><br />
<div class="isa-box"><br><center><div class="nome-isa"><b>Isa Souza</b><br><br />
<a href="http://link">euamohtml</a></center></div><br />
</div></div></blockquote>
<div style="text-align: start;">
Espero que tenham gostado. Se não der certo ou se tiver dúvidas, pergunte na <a href="http://ask.fm/L0V3LY_">minha ask</a>.</div>
</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com7tag:blogger.com,1999:blog-6152032981930705204.post-39658762177315532742015-04-19T23:13:00.001-03:002015-04-19T23:13:22.455-03:00Gadgets no header e no footer<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdTfXxTzEucyIpBwkkmV56K4jWTikFO_aa0QuwaDhAlFwO8e_SjWcmSCCFl2qiyxAtyKBy5EhITVXVvrRMvHlUzS8dXa_PVc6ZxpCSpe1PucWiYTl7OQ7vAnTsrIBFbl6DXAo7lz-WyVQ/s1600/1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdTfXxTzEucyIpBwkkmV56K4jWTikFO_aa0QuwaDhAlFwO8e_SjWcmSCCFl2qiyxAtyKBy5EhITVXVvrRMvHlUzS8dXa_PVc6ZxpCSpe1PucWiYTl7OQ7vAnTsrIBFbl6DXAo7lz-WyVQ/s1600/1.png" /></a></div>
<div style="text-align: justify;">
Sinceramente, depois de tanto tempo, nem sei o que dizer. Fiquei com tanta saudade de postar, mas ao mesmo tempo a minha preguiça me impedia de fazer o meu retorno. Bem, aqui estou eu. Prometi que esse seria o primeiro post, então decidi me apressar e postar logo. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Ah, espero que tenham gostado do novo template que, a propósito, é bem mais simples que os anteriores. Confesso que parte disso é por causa da preguiça, mas apesar disso acho que ficou bom.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Esse tutorial é bem simples. Vou ensinar como colocar gadgets (textos, imagens, música e tals) no header e no rodapé/footer do blog.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<a name='more'></a><b>1 -</b> Você tem que colocar seu cabeçalho pelo HTML. Para que fique certinho, você <u>não pode</u> colocar nenhuma imagem pelo cabeçalho do Layout, mas se preferir, exclua o cabeçalho. Procure por .tabs-inner { . Se olhar pelo código irá achar padding: 0;. Abaixo cole:<br /><br />
<blockquote class="tr_bq" style="text-align: justify;">
background: url(<b>imagem</b>) no-repeat;<br />background-position:center;<br />margin-top: -47px; /* Move o banner para cima ou para baixo */<br />padding-top: 350px; /* Coloque a altura do cabeçalho */</blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>2 -</b> Após ajeitar o que era necessário e salvar, vá em layout e adicione um gadget HTML/JavaScript logo abaixo do cabeçalho. Cole:</div>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
<div style="margin-right: 0px; margin-bottom: 0px; position: absolute;"><br /><b>Código aqui</b></div></blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
No <i>margin-right</i> números negativos vão para a direita e positivos para a esquerda. Em <i>margin-bottom</i> números negativos vão para baixo e positivos para cima. Não mude o <i>position</i>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>3 -</b> No rodapé é basicamente a mesma coisa. Se quiser pode adicionar uma imagem, mas se não tiver imagem não tem problema. É só adicionar um gadget HTML na parte de baixo do layout, colar o código acima e mudar o que for necessário.</div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
<b>Dica:</b> Se quiser colocar gadgets no cabeçalho e no footer, não coloque esse código na sidebar, pois ao subir ou descer o gadget, ele vai ficar no lugar que quiser, porém ficará "em cima" dos gadgets da sidebar, tornando impossível usar os gadgets na sidebar.</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com6tag:blogger.com,1999:blog-6152032981930705204.post-81652257245252353022014-12-17T21:11:00.002-02:002014-12-17T21:12:40.864-02:00Como fazer action de falso topaz<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvef0uwyiJKv9NGPaA8IPA_DjZL18msjX_V4qC0kJixBLg-Lx-p_ItxkMlbb24e_nS__1QuvXe2WVTiv_TBz-REfzbm4-xlYSg6Fdv0Cye6W3y0VQYZVKpZmKq3528ujBgIkBCe3ppzo/s1600/9.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvef0uwyiJKv9NGPaA8IPA_DjZL18msjX_V4qC0kJixBLg-Lx-p_ItxkMlbb24e_nS__1QuvXe2WVTiv_TBz-REfzbm4-xlYSg6Fdv0Cye6W3y0VQYZVKpZmKq3528ujBgIkBCe3ppzo/s1600/9.png" /></a></div>
<div style="text-align: justify;">
Olá, pessoas. Acabei de postar algo, explicando a falta de post, achando que ficaria sem meu computar por milhares de anos, mas ele está de volta.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bem, alguém me pediu para postar "minha configuração de topaz", mas acontece que eu uso um PhotoShop portable, onde instalar o topaz é um pouco complicado, então eu uso uma action "topaz falso". Eu decidi postar esse tutorial não apenas para atender o pedido, mas também para ajudar aqueles com um problema semelhante ao meu. Lembrando que tudo depende da foto.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<a name='more'></a><b>1:</b> Abra uma foto (de boa qualidade, de preferência) e ajuste como quiser.<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>2: </b>Vá até a janela de actions (Atalho: Alt+F9) e aperte no símbolo em forma de pasta, que está na pequena barrinha na parte debaixo da janela. Vai aparecer um pop up. Coloque o nome da action onde é necessário.</div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
<b>3:</b> Ao lado da pasta, à direita, há uma pequena 'folha'. Clique nela para criar uma action.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>4: </b>Agora vem a parte divertida! Clique no botão de gravação, que está à esquerda da pasta.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>5: </b>Duplique a sua foto e depois vá em <i>'Filter'</i> > <i>'Smart Sharpen'</i> > <i>'Advanced'</i>. Verá três abas: <i>'Sharpen'</i>, <i>'Shadow'</i> e <i>'Highlight'</i>. Mantenha <i>'Shadow'</i> e <i>'Highlight'</i> do jeito que estão; coloque essas configurações em 'Sharpen':</div>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: left;">
<b>Amount:</b> 500%<br />
<b>Radius: </b>0,4<br />
<b>Remove: </b>Gaussian Blur<br />
<b>More Accurate </b></blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>6:</b> Clique na camada original e depois na cópia e mude a opacidade dela para 61%</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>7: </b>Mescle as duas e depois duplique a camada que se formou</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>8: </b>Clique na camada que ficar por cima e vá em <i>'Filter'</i> > <i>'Blur'</i> > <i>'Gaussian Blur'</i> > 1,0</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>9:</b> Mude a opacidade para 65% (P.S.: Se prestar atenção, tudo o que você fez ficou gravado. Se a opacidade não for grava após você mudá-la, aperte <i>'Enter'</i>)</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<b><<<<>>>></b></div>
<div style="text-align: center;">
Espero que tenham gostado do tutorial. Qualquer problema, me avisem...</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com9tag:blogger.com,1999:blog-6152032981930705204.post-11773850110241597092014-12-17T16:16:00.001-02:002014-12-17T16:16:28.778-02:00Aviso<div style="text-align: justify;">
Então, devem ter percebido que já não posto há dias - 24 para ser mais exata. Isso tem uma explicação: estou sem computador, então não tenho como postar, mas ele está no conserto. Acredito que voltará logo, então, enquanto isso, sem posts... Beijos :*</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com4tag:blogger.com,1999:blog-6152032981930705204.post-29247116273765800322014-11-23T20:55:00.000-02:002014-11-24T14:33:52.974-02:00Billy Music Player em forma de lista (Atualizado)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiykJgi4ihaYiwRDlj67QTXLpkX1xDvan5D3X8CjbNWdN85B7oLkR-fZhISXgkirq7kjGU88I80Qo3DQX12WX0SDZj0IIMPDVa81mNgUFNX-Cpxo8kUCG9Gc88BRmLGe_xiBmnqODmZ9Rg/s1600/10.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiykJgi4ihaYiwRDlj67QTXLpkX1xDvan5D3X8CjbNWdN85B7oLkR-fZhISXgkirq7kjGU88I80Qo3DQX12WX0SDZj0IIMPDVa81mNgUFNX-Cpxo8kUCG9Gc88BRmLGe_xiBmnqODmZ9Rg/s1600/10.png" /></a></div>
<div style="text-align: justify;">
Oi! Esse tutorial já é bem conhecido para quem tem alguma noção de HTML, mas eu resolvi postar por causa de um pedido na ask. Além de mostrar o site e tals, vou ensinar a como deixar em forma de listinha, como a que eu estou usando no momento.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<a name='more'></a><b>1 - </b>Vá no <a href="http://www.sheepproductions.com/billy/">site do BMP</a> e cole a url de uma música (pode usar o DropBox). Vai ver que há vários espaços para preencher, ignore-os e use apenas um. Lembre-se de desmarcar 'Auto Play'. Clique em 'Generate Code'<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>2 - </b>Cole o código em um documento no bloco de notas e faça isso novamente com outras músicas. Você vai perceber que no final de cada código há algo assim /> Depois disso cole </embed> em todos eles, assim ficarão um em cima do outro.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<b>(...)</b></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Gente, lembrem-se que qualquer coisa, dúvidas, pedidos, me peçam pela minha ask.</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com8tag:blogger.com,1999:blog-6152032981930705204.post-88224065750893472082014-11-10T14:28:00.001-02:002014-11-10T14:28:49.768-02:00Como fazer um theme<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglOWdMEnThjzgmn86u7GkSpO159DneejG-zzU_45yUy3aMHvVjHUYrRnx93AtshGYsoMiU9qcA1MmrFbGq8iD0EleRlQqk-Mo1_ZF2Gy8adjuA91drxUh_MguRW86VpfJos16IopeMUOk/s1600/7.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglOWdMEnThjzgmn86u7GkSpO159DneejG-zzU_45yUy3aMHvVjHUYrRnx93AtshGYsoMiU9qcA1MmrFbGq8iD0EleRlQqk-Mo1_ZF2Gy8adjuA91drxUh_MguRW86VpfJos16IopeMUOk/s1600/7.png" /></a></div>
<div style="text-align: justify;">
OI! Eu estive meio ocupada nesses dias, então não pude postar com a mesma frequência com que eu estava postando, mas agora está tudo resolvido.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Esse é um tutorial meio... hãn... grande. É preciso paciência. No meu primeiro theme, na hora de colocar a ask, bugou tudo e eu quase tive um ataque cardíaco.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Se quiserem, para ir mais rápido, vocês podem ir usando o HTMLedit e depois é só passar pro tumblr para personalizar os último detalhes.<br />
<br />
Também vou passar uma listinha de tutoriais e dicas para ajudar vocês.<br />
<br />
<br />
<br />
<a name='more'></a><br />
<blockquote class="tr_bq">
O que precisa saber</blockquote>
<br />
O que fica acima de </style> é o CSS. Num blogger é onde fica os códigos de menus, efeitos, etc;<br />
O que fica abaixo de <body> é o que fica em HTML/JavaScript;<br />
<br />
<blockquote class="tr_bq">
O básico</blockquote>
<b>1 - </b>Primeiro vamos começar colocando as tags principais.<br />
<br />
<blockquote class="tr_bq">
<html><br />
<head><br />
</head><br />
<style><br />
</style><br />
<body><br />
</body><br />
</html></blockquote>
<br />
<b>2 -</b> Entre as tags <head> e </head>, cole:<br />
<br />
<blockquote class="tr_bq">
<title>{title}</title><br />
<link rel="shortcut icon" href="{favicon}" /></blockquote>
<br />
Agora eu vou dar um pequena explicação. O que fica entre <title></title> é o título do tumblr. Se colocar {title} entre essa tag, o título que você escolheu para o seu blog quando você o criou continuará o mesmo, mas se colocar outro, o título do tumblr mudará.<br />
{favicon} é quase igual a {title}, o que muda é que se você manter o {favicon} o que ficará no seu favicon será o icon que você usa, mas se colocar algum(a) link/url de algum favicon, ele mudará.<br />
<br />
<b>3 - </b>Agora chegou a parte em que alteramos a aparência do seu theme. Entre <style></style> cole esse código:<br />
<br />
<blockquote class="tr_bq">
body {background: #efefef url("LINK DO FUNDO");<br />
padding:4px;<br />
font-family: Georgia;<br />
font-style: normal;<br />
font-size: 11px;<br />
color: #ccc;<br />
text-align: left;<br />
line-height:14px;<br />
} </blockquote>
<br />
Se você não colocar nenhum background onde se pede, a cor que está no código (#efefef) será a cor do background. | <u>font-family</u> e <u>font-size</u> são o nome da fonte e o tamanho, respectivamente. | color é a cor da fonte (#ccc é cinza) | <u>text-align</u> é o alinhamento do texto. Pode ser <i>left</i> (esquerda), <i>right</i> (direita) e <i>justify</i> (justificado) | l<u>ine-height</u> é o tamanho da linha. Não há necessidade de mudar.<br />
<br />
<b>4 - </b>Agora vamos para a sidebar. Acima de </style> cole:<br />
<br />
<blockquote class="tr_bq">
#side {position:fixed; margin-left:125px; margin-top: 100px;}</blockquote>
<br />
O margin-left determina se irá para a direita (número positivos) ou esquerda (números negativos) | margin-top determina se irá para cima (números negativos) ou para baixo (números positivos)<br />
<br />
<b>5 -</b> Agora vamos fazer a caixas que ficam na sidebar (nós, que utilizamos o blogger, chamamos de gadgets). Ainda estamos no <style><br />
<br />
<blockquote class="tr_bq">
.boxsid {<br />
letter-spacing: 0px; /* Espaço entre as letras */ <br />
text-align: justify; /* Alinhamento do texto */ <br />
color: #ccc; /* Cor da fonte */ <br />
width: 250px; /* Largura da caixa */ <br />
font: normal 11px georgia; /* Configuração da fonte */ <br />
background: #fff; /* Cor do fundo */ <br />
padding: 5px;}<br />
<br />
.imgsid {}</blockquote>
<br />
Não apaguem o .imgsid {}<br />
<br />
<b>6 - </b>Agora vem a personalização da área dos posts. Cole acima de </style> o código abaixo:<br />
<br />
<blockquote class="tr_bq">
#post {<br />
top: 230px; /* Move os posts para para cima ou para baixo */<br />
left: 500px; /* Move os posts para para esquerda ou direira */<br />
width:562px; /* Largura */<br />
position: absolute;}<br />
.caixa {<br />
background: #FFF; /* Cor do fundo */<br />
padding: 5px;<br />
margin-bottom: 1px; /* Distância entre posts */<br />
left:110px; /* Move para esquerda ou direita */<br />
border-radius:2px; /* Bordas arredondadas */<br />
}</blockquote>
<br />
<b>7 -</b> Para personalizar negrito, itálico, tachado e sublinhado, cole esse código entre <style></style><br />
<br />
<blockquote class="tr_bq">
b, strong, bold {color: #a1a1a1;}<br />
u, span.sublinha {cursor: help; text-decoration: none; border-bottom: 1px dashed #28B5BF;}<br />
i, em{color: #ddd;}<br />
s {color: #000;}</blockquote>
<br />
<b>border-bottom: <u>1px</u></b> grossura <b><u>dashed</u></b> tipo de linha; dashed é traçado; dotted: pontilhado; solid: linha sólida <b><u>#</u></b> cor<br />
<br />
<b>8 -</b> Agora personalizaremos os links. Para fazer isso, só é preciso colar o código abaixo entre <style></style><br />
<br />
<blockquote class="tr_bq">
a:link, a:visited, a:active {color: #CDCDC1; text-shadow: 0 0px 0px #ffffff; letter-spacing: 1px; text-decoration: none;}<br />
a:hover {color: #f1f1f1; -webkit-transition-duration: .79s;}</blockquote>
<br />
<b>9 -</b> Agora, abaixo de <body>, cole:<br />
<br />
<blockquote class="tr_bq">
<div id="side"><br />
<br />
<div class="imgsid"><img src="{image:Sidebar}" style="width:180px;"></div><br />
<br />
<div class="boxsid">{description}</div><br><br />
</div></blockquote>
<br />
Em {description} é semelhante a {title}, que eu expliquei no início do post. Pode colocar outra coisa se quiser. Já em {image:Sidebar} você pode colocar alguma imagem. Também é onde coloca-se o que ficaria no HTML/JavaScript, sabe, o <div class="ghf"... bla bla bla<br />
<br />
<b>10 -</b> Acima de </body>, cole as seguintes tags.<br />
<br />
<blockquote>
<div id="post"><br />
{block:Posts}<br />
<div class="caixa"><br />
<!--textos--><br />
{block:Text}<br />
{block:Title}<br />
{Title}<br />
{/block:Title}<br />
{Body}<br />
{/block:Text}<br />
<!--foto--><br />
{block:Photo}<br />
<center><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="550px"/></center><br />
{block:Caption}<br />
{Caption}<br />
{/block:Caption}<br />
{/block:Photo}<br />
<!--photoset--><br />
{block:Photoset}<br />
<center>{Photoset-500}</center><br />
{block:Caption}<br />
{Caption}<br />
{/block:Caption}<br />
{/block:Photoset}<br />
<!--quote--><br />
{block:Quote}<br />
{Quote}<br />
{block:Source}<br />
<div style="text-align: right">— {Source}</div><<br />
{/block:Source}<br />
{/block:Quote}<br />
<!--link--><br />
{block:Link}<br />
<a href="{URL}" class="link" {Target}>{Name}</a><br />
{block:Description}<br />
{Description}<br />
{/block:Description}<br />
{/block:Link}<br />
<!--chat--><br />
{block:Lines}<br />
{block:Label}<br />
<span>{Label}</span><br />
{/block:Label}<br />
{Line}<br />
{/block:Lines}<br />
<!--video--><br />
{block:Video}<br />
{Video-500}<br />
{block:Caption}<br />
{Caption}<br />
{/block:Caption}<br />
{/block:Video}<br />
<!--audio--><br />
{block:Audio}<br />
{AudioPlayerBlack}<br />
{block:Caption}<br />
{Caption}<br />
{/block:Caption}<br />
{/block:Audio}<br />
<!--ask--><br />
{block:Answer}<br />
<img src="{AskerPortraitURL-40}"><br />
{Question}<br />
perguntou: {Asker}<br />
{Answer}<br />
{/block:Answer}<br />
<!--infomações--><br />
{block:HasTags}{block:Tags}&nbsp;#<a href="{TagURL}">{Tag}</a>,&nbsp;{/block:Tags}{/block:HasTags}</a> | postado em {DayOfMonth}/{MonthNumberWithZero}/{Year} as {12Hour}:{Minutes}{AmPm} via <a href="{Permalink}">{NoteCount}</a> notes!({block:RebloggedFrom}<a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}/{block:ContentSource}<a href="{SourceURL}" target=blank>source</a>{/block:ContentSource}) | <a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank">reblog this!</a><br />
</div><br />
<br><br />
{/block:Posts}</blockquote>
<br />
Basicamente, é isso.<br />
<br />
<div style="text-align: center;">
<b>.......</b></div>
<br />
Para achar tutoriais com mais facilidade, abra o tumblr na dashboard/painel (www.tumblr.com/dashboard) e substitua o /dashboard por /tagged/tutorial_que_você_quer. Por exemplo, eu quero personalizar a minha ask, então eu vou procurar por tumblr.com/tagged/estilo-de-ask. Você também sempre pode procurar no Google.<br />
<br />
Coisas que você não deve esquecer de personalizar são as notes, ol.notes (<a href="https://31.media.tumblr.com/5446c47d981d31a192e2480c3ee4669a/tumblr_inline_nb3hgm2YZn1rwb533.png">exemplo</a>), ask, permalink (esse é muito importante). Vou deixar alguns links aqui para vocês. Lembrem-se: se não funcionar, <i>não se desespere</i>, apenas tente outro tutorial.<br />
<br />
<blockquote class="tr_bq">
<b>+ Ol.notes:</b><br />https://www.tumblr.com/tagged/ol.notes<br />http://cssand-html.tumblr.com/post/31612572416<br />http://html-and-resources.tumblr.com/post/30620280840/notes-personalizados</blockquote>
<br />
<blockquote class="tr_bq">
<b>+ Notes:</b><br />http://html-and-materials.tumblr.com/post/38255859326/estilos-de-notes<br />http://htmluv.tumblr.com/post/64395054171<br />http://designs-gallery.tumblr.com/post/56485313159/notes-simples-02</blockquote>
<br />
<blockquote class="tr_bq">
<b>+ Ask:</b><br />https://www.tumblr.com/tagged/estilos-de-ask</blockquote>
<br />
Eu não testei os códigos, então não sei se funcionam. Se não funcionarem, é só fuçar em tumblrs que você acha.<br />
<br />
Qualquer coisa, me chamem na ask.</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com4tag:blogger.com,1999:blog-6152032981930705204.post-22995852899154665102014-11-01T09:06:00.000-02:002014-11-01T09:06:09.207-02:00Como fazer PSDs com tom pastel<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh-Wwl2oNhAkMvpiNjykE4EQvBhBxqVhLKO3y2Ic-hgNHq61jxdv7UlSMS4JH11FKhZ2E_G0lTyqndHn3qtj4mGypDHa5C4pj1LwBXS3t42mxoIFytosxCrH_hrbjplzkRnrPX57THK7A/s1600/5.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh-Wwl2oNhAkMvpiNjykE4EQvBhBxqVhLKO3y2Ic-hgNHq61jxdv7UlSMS4JH11FKhZ2E_G0lTyqndHn3qtj4mGypDHa5C4pj1LwBXS3t42mxoIFytosxCrH_hrbjplzkRnrPX57THK7A/s1600/5.png" /></a></div>
<div style="text-align: justify;">
Olá! Hoje eu trago um tutorial que eu gosto muito, mas eu raramente eu uso. Eu vou ensinar a fazer meu tipo preferido de PSD. Vocês provavelmente já viram uma edição assim, mas provavelmente não se lembram. <a href="http://static.tumblr.com/zdvlqq9/cV8ne9u1r/4.png">Aqui tem um exemplo.</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Na minha opinião, o PSD fica melhor com candids, fotos de performances e fotos de eventos, pois nestas fotos não há efeitos como nos photoshoots, onde os editores chegam a exagerar para fazer os modelos parecerem bem.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Espero que gostem...</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<a name='more'></a><b>1 -</b> Primeiro, use uma curva/curve e clareie a foto, mas não muito. Abaixo da caixa de curvas, há dois espaços para colocar números. No primeiro espaço coloque entre 135-150 e no segundo coloque 120-110<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>2 -</b> Agora vem a parte mágica! Sem essa parte nada dá certo. Selecione 'Selective Color'/'Cor Seletiva'. Para chegar a esse efeito, você sempre deve colocar números negativos, com exceção de alguns. Também, sempre mantenham o cyan/ciano nulo. Essas foram as minhas configurações, mas vocês podem fazer como quiser, contanto que os números sejam negativos. (P.S.: Não mexam no 'Cyan/Ciano')</div>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
<b><u>RED - VERMELHOS</u></b><br />
<b>Mangeta:</b> -18<br />
<b>Yellow:</b> -13<br />
<b>Black:</b> -24</blockquote>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
<b><u>YELLOWS - AMARELOS</u></b><br />
<b>Mangeta:</b> -14<br />
<b>Yellow:</b> -25<br />
<b>Black:</b> -29</blockquote>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
<b><u>GREENS - VERDES</u></b><br />
<b>Mangeta:</b> -20<br />
<b>Yellow:</b> -18<br />
<b>Black:</b> -20</blockquote>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
<b><u>CYANS - CIANOS</u></b><br />
<b>Mangeta:</b> -21<br />
<b>Yellow:</b> -17<br />
<b>Black:</b> -14</blockquote>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
<b><u>BLUES - AZUIS</u></b><br />
<b>Mangeta:</b> -17<br />
<b>Yellow:</b> -13<br />
<b>Black:</b> -17</blockquote>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
<b><u>MANGETAS</u></b><br />
<b>Mangeta:</b> -15<br />
<b>Yellow:</b> -17<br />
<b>Black:</b> -29</blockquote>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
<b><u>NEUTRALS</u></b><br />
<b>Mangeta:</b> 0<br />
<b>Yellow:</b> 0<br />
<b>Black:</b> -5</blockquote>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: justify;">
<b><u>BLACKS</u> </b><b>Cyan:</b> +2<br />
<b>Mangeta:</b> +3<br />
<b>Yellow:</b> +3<br />
<b>Black:</b> +6</blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>3 - </b>Escolha o Gradient Map/Mapa Gradiente e, se não estiver em preto e branco, coloque. No modo, coloque em Soft Light e mude a opacidade para 47%</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>4 -</b> Selecione Brightness/Contrast, e coloque o contraste entre 10-15</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>5 -</b> Se achar que ficou um pouco escuro, selecione Selective Color novamente e agora use valores positivos, mas não muito altos.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com1tag:blogger.com,1999:blog-6152032981930705204.post-34489756312526235952014-10-27T09:58:00.000-02:002014-10-27T09:58:26.044-02:00Efeito Lighten<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDFFMNDD71O2lbsBCdM3BesopkMBTZHoJtkLYWX4ndz7oA02ShPIN3KFWBP50zYXKpKa81oqTtInKl8OHWhxALhDVx8tOsOfSNvJ8Rmo27m4MDRNu-vJweRDmRyfD5P_sAGEhMOBoP7jY/s1600/2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDFFMNDD71O2lbsBCdM3BesopkMBTZHoJtkLYWX4ndz7oA02ShPIN3KFWBP50zYXKpKa81oqTtInKl8OHWhxALhDVx8tOsOfSNvJ8Rmo27m4MDRNu-vJweRDmRyfD5P_sAGEhMOBoP7jY/s1600/2.png" /></a></div>
<div style="text-align: justify;">
Oi! Como vocês sabem, eu sou completamente apaixonada por edições, logo, eu sou apaixonada pelo photoshop. E como eu tenho tumblr, eu sempre estou postando as coisas que eu faço nele.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Recentemente, eu tenho gostado mais das edições do que HTML, então vou postar mais sobre isso. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hoje eu vou ensinar um efeito muito fofinho, com vários pontinhos coloridos, que são popularmente conhecidos como pontos de luz. <a href="http://static.tumblr.com/zdvlqq9/JkMne08t5/ex1.png">Aqui está um exemplo.</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br />
<br />
<br />
<br />
<br />
<br />
<a name='more'></a></div>
<div style="text-align: justify;">
<b>1 -</b> Abra a foto que você quer editar. Você pode colocar nitidez, topaz e o que você desejar. Olha, caso sua foto seja escura, eu aconselho a colocar uma curva com brilho. A minha edição ficou bem melhor depois da curva (<a href="http://static.tumblr.com/zdvlqq9/KEFne09dk/1.png">x</a>)</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>2 -</b> Agora, crie uma nova camada transparente (atalho: Shift + Ctrl + N) para cada ponto que for criar, assim, se não gostar de algo, pode apagar sem destruir tudo. Como eu fiz oito pontos, eu criei oito camadas.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>3 -</b> Selecione o pincel (atalho: B) e escolha o Soft Round de 200px. Agora é só escolher cores que você quiser e fazer pontos nas camadas.<br />
<br />
<b>4 -</b> Selecione as camadas dos pontos, aperte com o botão direito do mouse e clique em 'Merge Layers'/'Mesclar Camadas'<br />
<br />
<b>5 -</b> Selecione a camada de pontos e mude o modo para 'Lighten'/'Clarear' (<a href="http://static.tumblr.com/zdvlqq9/Dt2ne0es0/2.png">x</a>) ou 'Screen'<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm1I6JIp4lIZZJupbWwqR9zp7V6h1OWYzZl9I3iY85uMIwdk_kmcop4ZX8teFTVyn7uMcfqPges7ddBziliic2qmmGuyNeA5Lje2fMiAROzbIhdiuaSF-VIulOcEdoDFGDaLx7tNs5R8w/s1600/EX1(2).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm1I6JIp4lIZZJupbWwqR9zp7V6h1OWYzZl9I3iY85uMIwdk_kmcop4ZX8teFTVyn7uMcfqPges7ddBziliic2qmmGuyNeA5Lje2fMiAROzbIhdiuaSF-VIulOcEdoDFGDaLx7tNs5R8w/s1600/EX1(2).png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjReCKPUJw8A-eG-73KwoQFYjRAFf9V8zBdHqKORw_8noGO7BK9nC-WiBh628gSOTJjHnpciysPn6iGcFpOZ8uvZijzwR5QqILLPTxzkgV0E8tIzmGazl8QbJtMQVQboKYuiGOMiMSkI-k/s1600/EX1(3).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjReCKPUJw8A-eG-73KwoQFYjRAFf9V8zBdHqKORw_8noGO7BK9nC-WiBh628gSOTJjHnpciysPn6iGcFpOZ8uvZijzwR5QqILLPTxzkgV0E8tIzmGazl8QbJtMQVQboKYuiGOMiMSkI-k/s1600/EX1(3).png" /></a></div>
<br />
<br /></div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com6tag:blogger.com,1999:blog-6152032981930705204.post-60007943492957315922014-10-25T11:47:00.000-02:002014-10-25T12:06:03.400-02:00Menu Sombra<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdauglet3guVq2dkXrJOENzdNv0a_eoKMZRNkwkphLJUaiUwGt4Om4_EeAgpw4vaqu-nDaXCQeT5cvSEJHPRX4H2KbyKCOSix788oeplfoY1fyyfOd0VKcUPWytVVoGkbSlR64Kh0X6jw/s1600/1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdauglet3guVq2dkXrJOENzdNv0a_eoKMZRNkwkphLJUaiUwGt4Om4_EeAgpw4vaqu-nDaXCQeT5cvSEJHPRX4H2KbyKCOSix788oeplfoY1fyyfOd0VKcUPWytVVoGkbSlR64Kh0X6jw/s1600/1.png" /></a></div>
Olá. Aqui estou eu, novamente, depois de muitos e muitos dias fora. Eu não vou falar o que eu fiquei fazendo, pois eu realmente não fiz nada, a não ser, comer, dormir, ler <i>(meio off-topic, mas Jogos Vorazes e o Pequeno Príncipe são ótimos!)</i> e assistir meus seriados e animes.<br />
<br />
Como podem ver, o blog está com um novo template e algumas novidades. (1) eu formarei uma equipe de 2-3 para postar resources, para ajudar a deixar o blog mais ativo; (2) tumblr para themes e templates, está meio desatualizado, mas isso irá mudar em breve; (3) página de downloads, com links do PS, aTube Chatcher e outros programas muito importantes.<br />
<br />
Sobre o tutorial, é um menu com imagem é bem discreto. Você pode usar no gadget de introdução. <a href="http://euamohtmltestes.blogspot.com.br/2014/07/blog-post.html">Exemplo</a>.<br />
<br />
<br />
<br />
<a name='more'></a><br />
Vá em <i>Modelo</i> - <i>Editar HTML</i> - <i>procure por <u>]]><</u> </i>- cole o código abaixo em cima da tag<br />
<br />
<blockquote class="tr_bq">
#oii-isa:hover #menu-suddenly-isa{<br />
opacity: 1;<br />
}<br />
#menu-suddenly-isa{<br />
opacity: 1;<br />
position:absolute;<br />
-webkit-transition: all .60s ease-in-out;<br />
-moz-transition: all 1s ease-in-out;-ms-transition: all .60s ease-in-out;transition: all .60s ease-in-out;<br />
margin-left: 1px; /* Move o menu para os lados */<br />
margin-top: -228px; /* Move o menu para cima ou para baixo */<br />
}<br />
#menu-suddenly-isa a {<br />
color: white; /* Cor do texto */<br />
background: transparent;<br />
margin-bottom: 0px;<br />
margin-left:-1px;<br />
float:left; /* posição */<br />
font-family: trebuchet ms; /* Nome da fonte */<br />
overflow:hidden;<br />
height: 20px;<br />
padding:2px;<br />
width: 13px; /* Deixa apenas o coração a mostra */<br />
text-decoration:none;<br />
-webkit-transition-duration: 1s;<br />
-moz-transition-duration: 1s;<br />
-o-transition-duration: 1s;}<br />
#menu-suddenly-isa a:hover {<br />
-moz-box-shadow:inset 800px 0px 0px #f1f1f1; /* Cor da sombra */<br />
-webkit-box-shadow:inset 1000px 0px 0px #f1f1f1; /* Cor da sombra */<br />
-o-box-shadow:inset 800px 0px 0px #f1f1f1; /* Cor da sombra */<br />
-ie-box-shadow:inset 800px 0px 0px #f1f1f1; /* Cor da sombra */<br />
-webkit-transition-duration: 1s;<br />
-moz-transition-duration: 1s;<br />
-o-transition-duration: 1s;<br />
border-right:solid 6px #e7196b; /* Cor da borda */<br />
width: 190px; /* Deixa o resto do título a mostra Aumente se não der */}</blockquote>
<br />
Depois de mudar o que foi pedido, vá em <i>Layout</i> - <i>Adicionar Gadgets</i> - <i>HTML/JavaScript</i><br />
<br />
<blockquote class="tr_bq">
<img src="URL DA IMAGEM" /><br />
<div id="menu-suddenly-isa"><br />
<a href="/">♥ Home</a><br><p><br />
<a href="/">♥ Home</a><br><p><br />
<a href="/">♥ Home</a><br><p><br />
<a href="/">♥ Home</a><br><p><br />
<a href="/">♥ Home</a><br><p><br />
<a href="/">♥ Home</a><br><p><br />
</div></blockquote>
<br />
Qualquer problema com o código, vá na ask ou avise pelos comentários. Aproveitem ^.^ Mas se repassar, dê créditos, hein?</div>
Isa Souzahttp://www.blogger.com/profile/15438541494945169832noreply@blogger.com5