tag:blogger.com,1999:blog-30805613080953723062024-03-05T01:02:06.572-08:00Tudo pra mim | Maratona de tutoriaisUnknownnoreply@blogger.comBlogger5125tag:blogger.com,1999:blog-3080561308095372306.post-15012313781735733442011-09-21T09:30:00.000-07:002011-09-21T09:30:37.875-07:00Colocando barra no topo do blog e nas laterais<div class="separator" style="clear: both; text-align: center;"></div><div style="margin-left: 1em; margin-right: 1em;"> <img alt="Tumblr_lrsq2nrdeg1qdgkr8o1_500_large" src="http://data.whicdn.com/images/15030225/tumblr_lrsq2nRdEg1qdgkr8o1_500_large.png" /></div><br />
<br />
Hoje é meu primeiro post aqui no Tudo pra Mim, e vou ensinar pra vocês uma dica muito útil e que fica bem fofo.<br />
<i><span class="Apple-style-span" style="font-size: large;">Colocando barra (pattern) nas laterais...</span></i><br />
<b>1-</b> Vá até Design, Editar HTML, aperte CTRL + F e procure por:<br />
<blockquote><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></blockquote>Caso você não ache, procure apenas por <b><body</b> e ache algum código parecido com o citado acima.<br />
<b>2- </b>Logo abaixo dele cole, se você quiser que a barre fique do lado <b>DIREITO</b>:<br />
<blockquote><div style=" background-image: url('<b>LINK DO PATTERN</b>'); top: 0px; right: 0px; width: <span class="Apple-style-span" style="color: red;">20</span>px; height: 100%; z-index: 100; position: fixed;"></div></blockquote><b>3- </b>Se você quiser que fique do lado <b>ESQUERDO</b> cole o seguinte código, fazendo as alterações:<br />
<br />
<blockquote><div style=" background-image: url('<b>LINK DO PATTERN</b>'); top: 0px; left: 0px; width: <span class="Apple-style-span" style="color: red;">20</span>px; height: 100%; z-index: 100; position: fixed;"></div></blockquote><div style=" background-image: url('LINKDOPATTERN'); top: 0px; left: 0px; width: 100%; height: 50px; z-index: 100; position: fixed;"></div><br />
<div><b>* Se você quiser colocar um pattern nos dois lados, cole um código abaixo do outro.</b></div><div><b>** Altere o que está em negrito pelo link do seu pattern, e o que está em vermelho para a largura que você quer a sua barra.</b></div><div><b><span class="Apple-style-span" style="font-weight: normal;"><i><span class="Apple-style-span" style="font-size: large;">Colocando a barra (pattern) no topo...</span></i></span></b><br />
<br />
<b>1-</b> Vá até Design, Editar HTML, aperte CTRL + F e procure por:<br />
<blockquote><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></blockquote><b>2-</b> Cole o código abaixo acima do que você havia procurado, fazendo as devidas alterações:<br />
<blockquote><div style=" background-image: url('<b>LINK DO PATTERN</b>'); top: 0px; left: 0px; width: 100%; height: <span class="Apple-style-span" style="color: red;">20</span>px; z-index: 100; position: fixed;"></div> </blockquote> <b>* Altere o que está em negrito pelo link do seu pattern, e o que está em vermelho para a largura que você quer a sua barra.</b><br />
Alguma dúvida? É bem simples e deixa um toque especial ao seu blog. Espero que tenham gostado, beijos.</div>Unknownnoreply@blogger.com23tag:blogger.com,1999:blog-3080561308095372306.post-24322743519418841732011-09-18T05:47:00.000-07:002011-09-18T10:25:42.559-07:00Como personalizar o header do postOii amores, tudo bom? Aqui é a Juu e esse é o primeiro post que eu to fazendo aqui no Tudo pra mim, eu vou ensinar hoje como personalizar o <i>header</i> do post como o daqui, é bem fácil basta seguir os passos que eu vou dar... <span class="Apple-style-span" style="color: #8e7cc3; font-family: Georgia, 'Times New Roman', serif;"><b><i>Exemplo:</i></b></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN-RqSub6QFtACJijKDNfcT8YRcKCc0-5fMXaBd2jMQY8201cnyj_2OmS6CGCbwY33lB7V2MS-wTTh6UXOjQc1qZ5sjwd50QVQ_Fi0bKPOt-MJ6RzkkiTrDyAnGiInFNjR_mUQeTcIzJk/s1600/header-post.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN-RqSub6QFtACJijKDNfcT8YRcKCc0-5fMXaBd2jMQY8201cnyj_2OmS6CGCbwY33lB7V2MS-wTTh6UXOjQc1qZ5sjwd50QVQ_Fi0bKPOt-MJ6RzkkiTrDyAnGiInFNjR_mUQeTcIzJk/s1600/header-post.png" /></a></div><br />
<br />
<a name='more'></a><br />
Ta vendo os links "comentários, postado por..." em baixo do titulo do post? É isso que vou ensinar a fazer, pra isso você só tem que ter essas informações em baixo do titulo como mostra a imagem abaixo:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5kOSryUWcYzGVLwLMldlvh418-dRtcw3F5pckf-7HfnlV9f6EpBIySyWHUHUNE799mBtO3OhRttCpYLcOitAzDbPa_qh41Xz2IBdjaYPnTULdOQBLxbxsomE3tEsYM1r1bjTHJlD0Ko/s1600/post-org.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5kOSryUWcYzGVLwLMldlvh418-dRtcw3F5pckf-7HfnlV9f6EpBIySyWHUHUNE799mBtO3OhRttCpYLcOitAzDbPa_qh41Xz2IBdjaYPnTULdOQBLxbxsomE3tEsYM1r1bjTHJlD0Ko/s1600/post-org.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: justify;">E pra isso basta clicar e arrastar ok? Mas Juu como faz pra personalizar? Simples...</div><div class="separator" style="clear: both; text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: justify;">Procure(Ctrl + F) por: ]]></b:skin> e acima dele cole o código a seguir:</div><blockquote>.post-header-line-1{<br />
border-bottom: 1px dashed #BBB; /* Estilo da borda */<br />
font-size:11px; /* Tamanho da fonte de letra */<br />
}<br />
.post-header-line-2{<br />
border-bottom: 1px dashed #BBB; /* Estilo da borda */<br />
font-size:11px; /* Tamanho da fonte de letra */<br />
}<br />
.post-header-line-3{<br />
border-bottom: 1px dashed #BBB; /* Estilo da borda */<br />
font-size:11px; /* Tamanho da fonte de letra */<br />
}</blockquote><div style="text-align: center;">Comentem, beijos, Juu. </div>Unknownnoreply@blogger.com15tag:blogger.com,1999:blog-3080561308095372306.post-24867639016157566862011-09-15T10:04:00.000-07:002011-09-15T10:04:46.182-07:00Footer personalizada<div style="text-align: center;"><img alt="Tumblr_l5vu6xzs1b1qzjtuzo1_500_large" src="http://data.whicdn.com/images/3088464/tumblr_l5vu6xZs1B1qzjtuzo1_500_large.jpg" /></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"> Cadê os comentários pessoal? Pelo jeito a maratona não vai continuar depois dos tutoriais postados... Bom, vou postar um tutorial super-hiper-mega útil! Todos sabem o que é footer, certo? Vou ensinar a fazer uma igual a nossa daqui, uma com imagem e outra com texto. Quer aprender? Clique no link abaixo!</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"></div><a name='more'></a><b><i><span class="Apple-style-span" style="font-size: large;">Com imagem:</span></i></b><br />
<div style="text-align: justify;">Procure pela tag <i>]]></b:skin></i> e acima dela cole o código:</div><blockquote>#footer-wrapper {<br />
background:url(<b>LINK_DA_IMAGEM</b>);<br />
background-repeat:no-repeat;<br />
z-index:1000;<br />
width:<b>LARGURA_DA_IMAGEMpx</b>;<br />
height:<b>ALTURA_DA_IMAGEMpx</b>;<br />
clear:both;<br />
}</blockquote><div style="text-align: left;">Feito isso, faça as devidas alterações (o link, a largura e a altura da imagem) e procure pela tag <i></body></i>, acima dela cole:</div><blockquote><div id='footer-wrapper'/></blockquote><div style="border-top: 1px dashed #ccc;"></div><br />
<b><i><span class="Apple-style-span" style="font-size: large;">Com texto: </span></i></b><br />
Como anteriormente, procure pelo código <i>]]></b:skin></i> e acima dele, cole:<br />
<blockquote>#footer-wrapper {<br />
background: #000; /*** cor do fundo ***/<br />
background-repeat: no-repeat;<br />
z-index: 1000;<br />
height: 20px;<br />
clear: both;<br />
font-size: 90%; /*** tamanho da fonte ***/<br />
color: #fff; /*** cor da fonte ***/<br />
text-align: center; /*** alinhamento da fonte ***/<br />
padding: 5px;<br />
}</blockquote>O processo é o mesmo... cole o código abaixo, <b>ACIMA</b> da tag <i></body></i>.<br />
<blockquote><div id='footer-wrapper'>Designer por SEU_NOME | Tecnologia do <a href="http://blogger.com">Blogger</a> | Todos os direitos reservados © 2011</div></blockquote><div style="border-top: 1px dashed #ccc;"></div><br />
Se você ainda possui o código do <i>Attribution</i> ([...] Tecnologia do Blogger.) procure pelo código abaixo para retirá-lo:<br />
<blockquote> <!-- outside of the include in order to lock Attribution widget --><br />
<b:section class='foot' id='footer-3' showaddelement='no'><br />
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/><br />
</b:section></blockquote>Após encontrar, apague o totalmente.<br />
<br />
<div style="text-align: right;">Bom pessoal, por hoje é isso. Eu aconselho vocês a usarem o de texto, eu prefiro ele, mas cada um tem o direito de escolher o que bem entender ok? Ah e um aviso: sem comentários, sem maratona! Beijos, Emily.</div>Emily Carolinehttp://www.blogger.com/profile/05525921631677661181noreply@blogger.com18tag:blogger.com,1999:blog-3080561308095372306.post-81296632990425806892011-09-10T15:33:00.000-07:002011-09-10T15:33:10.409-07:00Personalizando a área dos comentários - Entenda!<div style="text-align: justify;"><div style="text-align: center;"><img alt="Tumblr_lqkn9a65ea1qb4hv5o1_500_large" src="http://data.whicdn.com/images/14335263/tumblr_lqkn9a65Ea1qb4hv5o1_500_large.jpg" /> </div><div style="text-align: justify;"> Este tutorial não é exclusivo, mais é que houveram muitos pedidos. Vocês todos já devem terem suas áreas de comentários personalizadas, mais nem todos devem ter entendido o lugar certo. Então, hoje vamos fazer um tutorial bem explicado para vocês! <i>Let's Go</i>?</div></div><div><div style="text-align: justify;"><b><br />
</b></div><div style="text-align: justify;"><b>>>> </b>Vá até Design, Editar HTML, aperte CTRL+F e procure por:</div></div><blockquote><div style="text-align: justify;">#comments {</div></blockquote><span class="Apple-style-span" style="font-size: x-small;">Caso não achar, procure por <b>#comments h4 {</b>.</span><br />
<div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Logo abaixo você encontrará algo parecido com isso:</div><blockquote><div style="text-align: justify;">#comments {</div><div style="text-align: justify;"> background: $(comments.background);</div><div style="text-align: justify;"> padding: 15px;</div><div style="text-align: justify;">}</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">#comments .comment-author {</div><div style="text-align: justify;"> padding-top: 1.5em;</div><div style="text-align: justify;">}</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">#comments h4,</div><div style="text-align: justify;">#comments .comment-author a,</div><div style="text-align: justify;">#comments .comment-timestamp a {</div><div style="text-align: justify;"> color: $(post.title.text.color);</div><div style="text-align: justify;">}</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">#comments .comment-author:first-child {</div><div style="text-align: justify;"> padding-top: 0;</div><div style="text-align: justify;"> border-top: none;</div><div style="text-align: justify;">}</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">.avatar-image-container {</div><div style="text-align: justify;"> margin: .2em 0 0;</div><div style="text-align: justify;">}</div></blockquote>Substitua todo o código acima pelo de baixo.<br />
<blockquote><div style="text-align: justify;"></div><div style="text-align: justify;">#comments h4 {</div><div style="text-align: justify;"> margin: 1em 0;</div><div style="text-align: justify;"> font-weight: bold; </div><div style="text-align: justify;"> font-size: 90%;</div><div style="text-align: justify;"> line-height: 1.4em;</div><div style="text-align: justify;"> letter-spacing:.1em; </div> <b> color: #33CCCC; /*** cor do "Postar um comentário" e "x comentários:" ***/</b><br />
<div style="text-align: justify;"> }</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">#comments-block {</div><div style="text-align: justify;"> margin:1em 0 1.5em;</div><div style="text-align: justify;"> line-height: 1.6em;</div><div style="text-align: justify;"> }</div><br />
<div style="text-align: justify;">#comments-block .comment-author {</div><div style="text-align: justify;"> <b>background: #DADADA; /*** fundo do autor ***/</b></div><b> font-size: 15px; /*** tamanho da fonte do nome do autor ***/</b><br />
<div style="text-align: justify;"> margin:.5em 0;</div><div style="text-align: justify;"> }</div><br />
<div style="text-align: justify;">#comments-block .comment-body {</div><div style="text-align: justify;"> margin:.25em 0 0;</div> <b> line-height: 1.4em; /*** espaço entre as linhas ***/</b><br />
<div style="text-align: justify;"><b> padding: 8px; /*** margem interno da área do comentário ***/</b></div><div style="text-align: justify;"> <b>background: #F9F9F9; /*** fundo da área do comentário ***/</b></div><div style="text-align: justify;"><b>-webkit-border-radius: 10px; /*** bordas arredondadas na área do comentário ***/</b></div><div style="text-align: justify;"><b>-moz-border-radius: 10px;</b></div><div style="text-align: justify;"><b>border-radius: 10px;</b></div><div style="text-align: justify;"> }</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">#comments-block .comment-footer {</div><div style="text-align: justify;"> margin:7px 0 2em;</div><div style="text-align: justify;"> line-height: 1.4em; </div><div style="text-align: justify;"> <b> font-size: 90%; /*** tamanho da fonte da data do comentário ***/</b></div><div style="text-align: justify;"><b> text-align: right; /*** alinhamento da data do comentário ***/</b></div><div style="text-align: justify;"> <b> letter-spacing:.1em; /*** espaçamos entre as fontes da data ***/</b></div><div style="text-align: justify;"> }</div><br />
<div style="text-align: justify;">#comments-block .comment-body p {</div><div style="text-align: justify;"> margin:0 0 .75em;</div><div style="text-align: justify;"> }</div><br />
<div style="text-align: justify;">.deleted-comment {</div><div style="text-align: justify;"> margin: 10px 0 2em;</div><div style="text-align: justify;"> font-style: italic;</div><div style="text-align: justify;"> <b>color: #ERTGKL; /*** cor do recado de 'comentário deletado' ***/</b></div><div style="text-align: justify;"> }</div></blockquote><div style="text-align: justify;"> Então pessoal, vou dar umas explicações aqui para vocês entenderem algumas coisas melhor ok?</div><div style="text-align: justify;"><b><br />
</b></div><div style="text-align: justify;"><b> Padding/Margin</b>: É a margem interna, o espaço interior, para dentro da caixa. Já<b> margin</b> é a margem exterior, para fora. Entenda mais sobre <i>padding</i> e <i>margin</i> <a href="http://blog.pinkskulldesign.com/2011/08/conceito-modelo-de-caixa-box-model.html">aqui</a>.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><b> line-height/letter-spacing: </b>line-height é a distância entre as linhas do texto, e letter-spacing é o espaço entre as letras da palavra. Ou seja, a palavra fica mais "solta".</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><b> .deleted-comment {:</b> É o conjunto que customiza quando você deleta algum comentário. Por exemplo, você deletou algum comentário do seu blog aparece essa frase né:<span class="Apple-style-span" style="font-family: inherit;"> "<span class="Apple-style-span" style="background-color: #f9f9f9; color: #666666; font-style: italic; line-height: 20px;">Esta postagem foi removida pelo autor.</span><span class="Apple-style-span" style="background-color: #f9f9f9; line-height: 20px;">" Então, a frase ficará em itálico e cinza, se você não mudar nada no código, mais você pode modificar, claro.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: inherit;"><span class="Apple-style-span" style="background-color: #f9f9f9; line-height: 20px;"><br />
</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: inherit;"><span class="Apple-style-span" style="background-color: #f9f9f9; line-height: 20px;">Enfim pessoal, acho que foi uma explicação clara né? Espero que tenha ajudado vocês. Não é exclusivo (vou falar novamente) este tutorial, mais os outros serão ok? <b><span class="Apple-style-span" style="font-size: x-small;">QUALQUER DÚVIDA NOS AVISE. </span></b>Beijos, Emily.</span></span></div>Emily Carolinehttp://www.blogger.com/profile/05525921631677661181noreply@blogger.com12tag:blogger.com,1999:blog-3080561308095372306.post-30683170342097384642011-09-06T11:33:00.000-07:002011-09-06T15:03:23.187-07:00Surpreendendo novamente...<div class="separator" style="clear: both; text-align: center;"></div><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></div><div style="text-align: justify;"> Sejam todos super bem-vindos a <b>Maratona de Tutoriais Tudo pra Mim</b>! Os blogs <a href="http://theattitudeincluded.blogspot.com/">Attitude Included</a>, <a href="http://trasshygirl.blogspot.com/">Trashy Girl</a> e <a href="http://placefame.blogspot.com/">Place Fame</a>, se reuniram e montaram este blog, em que disponibilizaremos os<i> tutoriais </i>e além disso, um <b>Template Free</b>.</div><div style="text-align: center;"><div style="text-align: justify;"><i> </i>Iremos colocaremo uma enquete aqui no blog, e você terá a oportunidade de decidir se quer um layout free no estilo delicado, ou se pretende que disponibilizamos este atual layout para vocês! O template será disponibilizado aqui no blog, mais para isso é necessário você:</div></div><blockquote><div style="text-align: justify;">Estar nos seguindo;</div><div style="text-align: justify;">Estar seguindo os blogs <a href="http://theattitudeincluded.blogspot.com/">Attitude Included</a>, <a href="http://trasshygirl.blogspot.com/">Trashy Girl</a> e <a href="http://placefame.blogspot.com/">Place Fame</a>;</div><div style="text-align: justify;">Não retirar os créditos de maneira alguma.</div></blockquote><div style="text-align: center;"><div style="text-align: justify;"><i> Depois o blog <b>Tudo Pra Mim</b> vai continuar ativo e atualizado?</i></div></div><div style="text-align: left;"><div style="text-align: justify;"> O blog continuará ativo depois de termos feito mais ou menos os dez tutoriais, e continuaremos fazendo o possível para continuar atualizando aqui, mais para isso precisamos da colaboração de todos. Para isso, quem quiser divulgar, basta copiar um dos banners abaixo:</div><div style="text-align: justify;"><br />
</div><div style="text-align: center;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Yb7seER-5H9wVy73jlh3Ah7YdB-4nwOXXc6HgeFZBd92OK7nlQkX05cbQk1DCi-s_3urYT2ynzi23tbq13Dhqu7ygFOhOBtzfZ-PF6tCQBXJpYMPqJktX4wwY2n0tc5v0oQ60qI3Ph8/" /></div><div style="text-align: center;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWCHguovi5dH35_mSHcO7P8mSSIIpxT3S8N3F6SpeVUsH109AikAc5POs97YEyGjs9rZcovzyP49Vx9ANf6dVUOLRACOpKgVBt4K1UQQ9ZgJxVJFWyLQKODMWhwCLIgud_iGa7bze3rLw/" /></div></div><div style="text-align: center;"><div style="text-align: justify;"> Esperamos que tenham gostado daqui, e já está no blog o tutorial de como personalizar os comentários do seu blog. Beijos, Emily, Anna e Julia.</div></div>Unknownnoreply@blogger.com9