Imagine poder deixar suas fotos mais brilhantes e nítidas editando em menos de 1 minuto. Incrível, certo? Hoje vou ensinar como fazer isso. Estou usando o Adobe Photoshop CS6, mas não se preocupe se você não tem Photoshop. Você pode baixar a versão free trial de 30 dias aqui. Além disso, você também pode se inscrever no Creative Cloud que lhe dá acesso ao Photoshop e várias outras ferramentas com preços acessíveis aqui. Abaixo está o antes e depois da foto.





Se o seu painel de camadas não estiver aberto, clique em Janela → Camadas. No painel de camadas, clique com o botão direito sobre a camada Plano de fundo e selecione Duplicar Camada. Você pode alterar o nome da camada duplicada ou deixe-o como está.


Mantenha o cursor clicado na camada duplicada recém-criada. Na parte superior, clique no menu drop-down que diz Normal. Selecione a opção Luz Indireta. E voilà! A sua foto fica brilhante e vibrante instantaneamente.


Caso você ache que sua foto ficou muito saturada ou muito clara, você pode controlar a intensidade do efeito variando a opacidade até ficar como você gosta.

Atendendo a pedidos finalmente vou mostrar como personalizar as fontes do blog através das fontes personalizadas do Google (como as que eu uso aqui no blog) . É um tutorial simples, mas requer um pouco de atenção. Ele consiste basicamente em instalar uma fonte no seu código HTML que permite que a fonte escolhida seja usada aonde você quiser. Como nos títulos da postagem, cabeçalho, títulos da sidebar, rodapé da postagem e etc.


01. Entre no site Google Web Fonts. Escolha a fonte que deseja e clique em Quick-use.
* Para visualizar melhor a imagem é só clicar sobre ela.



02. Na página que irá abrir, copie o código disponibilizado no passo 3.
* Para visualizar melhor a imagem é só clicar sobre ela.



03. Depois de copiar o código, vá em Modelo > Editar HTML e procure por:

‹head›

Cole o código ANTES de ‹head›, assim:

‹link href='http://fonts.googleapis.com/css?family=Yellowtail' rel='stylesheet' type='text/css' / › ‹head›

OBS: para o código ser aceito no template você deverá acrescentar uma barra (destacada no código) a mais antes de > .

04. Feito isso, copie o código do passo 4 :
* Para visualizar melhor a imagem é só clicar sobre ela.




Agora que a fonte já está instalada, você vai utilizar o código que você copiou no passo 4 para personalizar a fonte que você quer, seja do título do post ou do blog. Você deverá adicionar o código nas seguintes áreas:

Título do blog (código do modelo Minima)

#header h1 {

  margin:5px 5px 0;

  padding:15px 20px;

  text-transform:uppercase;

  letter-spacing:.1em;

  font: $pagetitlefont; /* substitua essa parte pelo código do passo 4 */

}

Título das postagens (código do modelo Minima)

.post h3 {

  margin:.20em 0 0;

  padding:0 0 5px;

  font-size:38px;

  font-weight:normal;

  color:$titlecolor;

  font-family: 'Yellowtail', cursive; /* adicione o código antes do fechamento das chaves */

}

Isto foi só um exemplo. Você pode adicionar fonte personalizada em outros locais também, como no título dos gadgets e no rodapé da postagem, é só procurar o trecho correspondente. Qualquer dúvida ou pedido em relação ao tutorial é só deixar um comentário ou entrar em contato.

Vários leitores do blog já tinham me pedido este tutorial, então finalmente consegui fazer um tutorial de um jeito "fácil" de entender. Bom, hoje eu vou ensinar a fazer o antigo footer do blog (exemplo abaixo). Esse tutorial é simples, mas tem que entender um pouquinho sobre HTML.

Para fazer o tutorial eu usei como modelo o Template Simples do Blogger (esse daqui). O código também é aplicável para aqueles que possuem mais de um autor.


Marque a opção Expandir modelos de widgets, e procure por:

<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span> <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span> 

Apague até o < /span> e depois cole o seguinte código:

<div class='post-footer'>
<div class='fotoautor'> </div>
    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span><br/> <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <br/>
<div style='float: left; margin: 1px;display: inline;'><a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px'/></div>

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span> 
<div id='clear'> </div>

Procure por .post-footer no CSS apague-o e cole o código seguinte:

.post-footer {
border-top: 1px solid #ccc;
padding-top:10px;
margin: 2px 10px 2px 10px;
font: normal 10px "arial";
text-transform: uppercase;
line-height: 20px;
}
.fotoautor {
background:url('URL DA FOTO'); 
width:65px;
height:65px;
float:left;
margin: 2px 5px 2px 2px;
}
.comment-link {
float: right;
font: italic 15px 'georgia';
margin- top: -15px;
text-transform:none;
}
.post-labels {
display:block;
 border-top: 1px dotted #ccc;
 padding:2px;
margin-top: -10px;font-size: 10px;
}
.post-timestamp {
margin-left:1px;
}
#clear {clear:both;}

A foto precisa ter 65x65 de tamanho! Vá ajustando conforme as suas necessidades.


Repita o primeiro passo, o de procurar e apagar o código. Mas ao em vez de colar o código acima cole o código seguinte:

  <div class='post-footer'>
<b:if cond='data:post.author == &quot;NOME DO AUTOR 1&quot;'>
<div class='fotoautor'> </div>
</b:if>
<b:if cond='data:post.author == &quot;NOME DO AUTOR 2&quot;'>
<div class='fotoautor2'> </div>
</b:if>
    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span><br/> <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <br/>
<div style='float: left; margin: 1px;display: inline;'><a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px'/></div>

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span> 
<div id='clear'> </div>

Você deve ir aumentando de acordo com a quantidade de autores que o seu blog possui, tanto no código como no CSS (repetindo o código em negrito). No css, procure por .post-footer apague e cole o código:

.post-footer {
border-top: 1px solid #ccc;
padding-top:10px;
margin: 2px 10px 2px 10px;
font: normal 10px "arial";
text-transform: uppercase;
line-height: 20px;
}
.fotoautor {
background:url('URL DA FOTO'); 
width:65px;
height:65px;
float:left;
margin: 2px 5px 2px 2px;
}
.fotoautor2 {
background:url('URL DA FOTO'); 
width:65px;
height:65px;
float:left;
margin: 2px 5px 2px 2px;
}
.comment-link {
float: right;
font: italic 15px 'georgia';
margin- top: -15px;
text-transform:none;
}
.post-labels {
display:block;
 border-top: 1px dotted #ccc;
 padding:2px;
margin-top: -10px;font-size: 10px;
}
.post-timestamp {
margin-left:1px;
}
#clear {clear:both;} 

A foto deve ter o tamanho de 65x65!


Esse passo não é obrigatório! Ele serve para deixar a data com o dia da semana, mês, dia e horário - como o da foto. Se não quiser alterá-lo ele ficara apenas com a hora da postagem.

Vá em Layout > Postagens do blog > Editar

Irá abrir uma nova janela. Você irá no 3º item de 'Opções da página de postagem' como na foto abaixo e marcar a opção que contém o dia da semana, mês, dia e hora. Depois altere a palavra 'às' que fica em frente para 'em'.


Altere o código do jeito que preferir.Em caso de dúvidas ou erros é só deixar no comentário!

01. Vá em Design > Editar HTML. Aperte CTRL+F e procure por ]]> </ b: skin>

02. Copie o código abaixo e cole ACIMA da tag encontrada.

#Label1 ul li{ 
float: left;
width: 45%; 
}

OBS: A largura (width) vai depender de quantas colunas você deseja incluir. Neste caso, 45% é ideal para duas colunas. Para 3 colunas o ideal seria entre 30 a 33%.

Este código pode ser aplicado para qualquer widget, por exemplo, a lista de links /wink
Caso queira pedir algum tutorial é só deixar seu comentário.

Faz tempo que não coloco tutoriais aqui né? Vou tentar atualizar esta tag mais vezes. Tenho recebido várias queixas(?) em relação a ausência da opção de responder comentários no Layout Free que disponibilizei a algum tempo. A opção de responder comentários foi disponibilizada depois que eu disponibilizei o layout, então é claro que ele não tinha essa opção ainda. Tentei arrumar o código várias vezes, até que finalmente achei um código que desse certo. O código original pertence ao Mundo Blogger, porém ele foi modificado por mim exclusivamente para o layout free. Então se você possuiu outro layout pode ser que não dê certo.

01. Vá em Design > Editar HTML > e clique em Expandir Modelos de Widgets

02. Aperte CRTL+F e procure pelo seguinte código:

<b:if cond="data:blog.pageType == "static_page"">
          <b:if cond="data:post.showThreadedComments">
            <b:include data="post" name="threaded_comments">
          <b:else>
            <b:include data="post" name="comments">
          </b:include></b:else></b:include></b:if>
        </b:if>

OBS: Se não achar todo o código, procure apenas pela primeira linha e depois localize o resto.

03. Agora substitua o código encontrado pelo código abaixo:

<b:include data="post" name="post"> <b:if cond="data:blog.pageType == "static_page""> <b:if cond="data:post.showThreadedComments"> <b:include data="post" name="threaded_comments"> <b:else> <b:include data="post" name="comments"> </b:include></b:else></b:include></b:if> </b:if> <b:if cond="data:blog.pageType == "item""> <b:if cond="data:post.showThreadedComments"> <b:include data="post" name="threaded_comments"> <b:else> <b:include data="post" name="comments"> </b:include></b:else></b:include></b:if> </b:if>
</b:include>

04. Salve e visualize!

Lembre-se: após ter feito tudo vá em Configurações > Comentários. Aonde está escrito Posição do formulário de comentários selecione a opção Postagem abaixo incorporada, salve e pronto.

Mais um tutorial para vocês!!! Hoje vou ensinar como fazer um perfil igual o meu, para felicidade de vocês. E o mais importante: esse tutorial é bem simples.


Vá em Design > Editar HTML > Aperte CTRL + F e procure por: ]]></b:skin>

Cole antes dele o código abaixo:

#sidebar #perfil { display: block; padding: 10px 10px 10px 10px; --/*espaçamento/margem da 'caixa'*/ background-color: #fff0f3; --/*cor do fundo*/ border-radius: 6px; --/*borda arredondada, quanto maior o px mais redonda*/ box-shadow: 0 0 1em #ff93aa; --/*sombra da 'caixa' do perfil*/ } Salve e ainda na aba Design vá em Elementos da página.

Clique em adicionar um Gadget > Html/JavaScript e cole:

<div id="perfil"> Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </div>
Substitua a palavra 'texto' pelo o que você quer que apareça no seu pefil. Diga seu nome, personalidade, o que gosta e o que não gosta.

Caso queira adicionar uma imagem sua adicione o código depois de <div id="perfil">

<img src="LINKDASUAFOTO" class="alignright"/>
Substitua o LINKDASUAFOTO. Troque alignright por alignleft caso queira que sua imagem se posicione no canto esquerdo, e vice versa. NÃO retire as aspas!

Obs: Para adicionar os ícones das redes sociais, veja este tutorial. Se não sabe como hospedar imagens, clique aqui.

01. Crie um novo arquivo: CRTL + N ou Arquivo → Novo. Em outra "aba/guia" abra a imagem que deseja redimensionar.


02. Na aba da imagem que você quer redimensionar aperte CTRL + A (para selecionar tudo), vai aparecer uma borda pontilhada em volta da imagem. A seguir aperte CTRL + C (para copiar a imagem). Volte para a imagem que você criou no primeiro passo e aperte CTRL + V (para colar), ou simplesmente clique e arraste a imagem para a outra aba.


03. Para poder "transformar" a imagem maior vá em Editar → Transformação Livre ou aperte CTRL + T.


Após ter "transformado" a imagem você vai ver que irá aparecer uma forma de seleção ao redor da imagem, como na imagem abaixo.


06. Nas pontas aparecem uns quadradinhos, eu os chamo de 'alça de seleção' (não sei qual o nome certo). Com eles você pode ajustar sua imagem. Clique e arraste pressionando a tecla Shift.


Veja que quando o ponteiro está sob esses quadradinhos ele se modifica para uma dessas setinhas:
O resultado final:


É uma coisa bobinha mas muda tudo! Espero que o tutorial tenha ajudado, não deixe de comentar.
Quer algum tutorial específico? Deixe sua sugestão nos comentários ou entre em contato.

<script type="text/javascript">
//<![CDATA[
function killLightbox() {
var images = document.getElementsByTagName('img');
for (var i = 0 ; i < images.length ; ++i) {
images[i].onmousemove=function() {
var html = this.parentNode.innerHTML;
this.parentNode.innerHTML = html;
};
}
}
if (window.addEventListener) {
window.addEventListener('load',killLightbox,false);
} else {
window.attachEvent('onload',killLightbox);
}
//]]>
</script>

Salve e faça um teste, clicando nas imagens dos seus posts.

Hoje trago um tutorial de como adicionar Fan Box do Twitter no seu blog! A Fan Box do Twitter foi criada com bases da Fan Box do Facebook. Veja abaixo um exemplo de como sua Fan Box ficará depois que você seguir esse tutorial:
E para a felicidade de todos, esse é um tutorial super simples /happy
Ok, vamos ao que interessa...

Para adicioná-la ao seu blog só precisa entrar em Design > Layout > Adicionar um gadget HTML/JavaScript e copiar o código abaixo:

<div class="textwidget">
<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox">
<script type="text/javascript">fanbox_init("SEUTWITTER");</script></div>
</div>
<style>
.FB_SERVER_IFRAME {
width: 290px !important; /* Largura do gadget */
height: 250px !important; /* Altura do gadget */ }
</style>

♥ Aonde esta escrito "SEUTWITTER" você deve substituir pelo seu nome de usuário do Twitter (sem o @ - arroba)

♥ Lembrando que este  Gadget foi criado por Moopz e nos permite ter uma Fan Box de Twitter usando um script.

Se você tem conta no Flickr e gosta de colocar as imagens no blog, tem um Widget em Flash muito legal…

Hoje teremos o nosso primeiro tutorial sobre como colocar fotos do Flickr no blog igual as que aparecem de baixo dos tweets. O procedimento é fácil, caso haja dúvida deixe a nos comentários ou entre em contato.

01. Adicione o código a seguir onde você quer que as imagens apareçam:

<div class="flickr"><script type="text/javascript"
src="http://www.flickr.com/badge_code_v2.gne?count=5&display=latest&size=s&layout=
h&source=user&user=0000000000000"></script></div>


count=5 determina o número de fotos a serem mostradas.
display=latest determina que as últimas fotos serão mostradas. se quiser pode alterar para "random" e mostrar as fotos aleatórias
size=s determina o tamanho, você também pode usar t ou m
layout=h posição das fotos h para horizontal, v para vertical e x para nenhuma posição
user=0000000000000 altere o "0000000000000" pela sua ID do flickr

02. Para configurar o CSS use:

.flickr a img{
margin: 5px;
padding: 7px;
background-color: #fff;
border: 1px solid #000;
}
Modifique como quiser.
Obs. Para saber qual a sua ID do Flickr, acesse: http://idgettr.com, adicione o endereço do seu flickr e clique em "find".

Tutorial por Tamara