Ju Duarte

Category: Blogosfera

  • Comofaz: comentários no blog usando o Facebook

    Uma das coisas que mais facilitou minha vida aqui no blog foi a opção de comentar usando o Facebook. Além de ser super fácil, acaba servindo de incentivo para deixar uma marquinha no post. Afinal, quase todo mundo tem uma conta na rede social, né? Isso sem contar que evita a necessidade de fazer login em outra conta, digitar as palavras de confirmação e tudo o mais que o Blogspot exige. 
    Achei vários links ensinando a colocar o código no blog. Porém, a maioria deixava a caixa de comentários logo na página inicial. E como eu queria que aparecesse só no post, tive que fazer uns ajustes.
    E como sempre me pedem um tutorial para ensinar a colocar a opção no blog, resolvi trazer para o JDB do jeito que eu fiz e reajustei. Vale lembrar que o código vem do Entenda Web, site que usei para colocar os comentários pelo Facebook aqui no Julie de Batom.
    1. Antes de tudo, vá neste link e clique em “+ Criar novo aplicativo”. Coloque um nome para o aplicativo em “app name” e clique em continuar.
    Salve no final da página que vai abrir. Como você vai precisar do “App ID/API Key”, é bom salvá-lo no bloco de notas ou em qualquer lugar que você tenha acesso depois. Por último, coloque o link do seu blog em “Website with Facebook login”.
    2. Abra uma nova guia ou janela no seu navegador e entre no Blogspot. Antes de qualquer coisa, faça um backup para ter seu layout salvo por segurança.
    Nessa mesma página, vá em Personalizar e, depois, em Editar HTML. Clique em “Expandir modelos de widgets” e localize a tag </head>. Logo abaixo dela você vai ver o começo da tag “<body>”. Cole o código abaixo dela:

    <div id=”fb-root”></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : ‘YOUR_APP_ID‘, // App ID
          channelUrl : ‘//WWW.YOUR_DOMAIN.COM/channel.html’, // Channel File
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          xfbml      : true  // parse XFBML
        });
        // Additional initialization code here
      };
      // Load the SDK Asynchronously
      (function(d){
         var js, id = ‘facebook-jssdk’, ref = d.getElementsByTagName(‘script’)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(‘script’); js.id = id; js.async = true;
         js.src = “//connect.facebook.net/pt_BR/all.js”;
         ref.parentNode.insertBefore(js, ref);
       }(document));
    </script>
    Agora vamos às modificações:
    Substitua YOUR_APP_ID pelo número do App ID/API Key (que pedi para salvar mais acima). Troque o WWW.YOUR_DOMAIN.COM pelo endereço do seu blog. 
    3. Esta parte em diante é onde começo a personalizar do meu jeito. Por isso, vale lembrar que a caixa de comentários pelo Facebook vai ficar exatamente no mesmo lugar que a do Julie de Batom!
    Localize a tag  <div class=’comments’ id=’comments’>. Logo abaixo dela, cole os dois códigos a seguir:

    <div id=’fb-root’/>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = &quot;//connect.facebook.net/pt_BR/all.js#xfbml=1&quot;;
      fjs.parentNode.insertBefore(js, fjs);
    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
    <div class=’fb-comments’ data-colorscheme=’light’ data-num-posts=’3′ data-width=’580′ expr:href=’data:post.url’/>
    Vamos às modificações:
    data-colorscheme=’light’: como o layout do JDB é claro, deixei esta opção. Se o seu for escuro, vale trocar light por dark.
    data-num-posts=”3″: troque o número 3 pelo número de comentários que você quer que apareça.
    data-width=’580′: troque o 580 pelo valor da largura que você quer. Tente deixar a mesma que a do post e área de comentários, assim fica mais proporcional.
    expr:href=’data:post.url’: Esta expressão indica que cada post do seu blog terá comentários exclusivos. Caso deseje que os comentários sejam iguais para todos os posts, e eu não sugiro, substitua por: data-href=”http://WWW.SEUSITEOUBLOG.COM”
    Visualize se está tudo OK e salve. Agora é só avisar aos leitores que seu blog possui um jeito mais fácil de comentar! 
    Ah, uma coisa que eu percebi: às vezes, quando o post não tem nenhum comentário (pelo próprio Blogspot), a caixinha do Facebook não aparece. Ela só dá as caras depois que alguém já comenta pelo sistema normal do Blogger. Então, caso você não encontre a opção, não se assuste.
    E vocês? Curtiram o tutorial? Vão colocar essa opção no blog de vocês? Conta pra gente!

  • #Comofaz: menu de categorias

    Depois que fiz aquela série de posts ensinando a fazer um layout (confira!), muitos leitores me pediram para continuar falando sobre algumas coisinhas de design e HTML aqui no blog. Recebi várias sugestões lá no meu Ask e adorei saber que vocês curtem aprender novidades para colocar em seus blogs. Afinal, amo mexer com códigos e edições de imagens… E compartilhar tudo o que aprendi nesse tempo sabendo que vocês vão gostar é super gratificante <3
    No primeiro tutorial, ensinei vocês a fazer a data ao lado do título. Agora, após me pedirem bastante, resolvi ensiná-los a fazer o menu de categorias, aquele na sidebar com os links de cabelos, comportamento e etc. Bora aprender?
    1- Antes de qualquer alteração, aconselho a salvar seu modelo anterior. Então, vá até Modelo > Fazer backup/Restaurar e clique em baixar modelo completo e, só depois de tê-lo em seu computador, continue com o tutorial. Assim, se der qualquer erro, você poderá voltar ao seu design antigo.
    2. Ainda na página Modelo, clique em Editar HTML. Em seu CSS (estilo da página que fica entre <b:skin> e </b:skin>) você vai adicionar esse código:
    * Categorias */
    #categoriaslateral {
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 12px;
    font-family: Tahoma;
    text-transform: uppercase;
    }
    #categoriaslateral ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #categoriaslateral li {
    border-bottom: 1px solid #000000;
    margin: 0;
    }
    #categoriaslateral li a {
    display: block;
    padding: 5px 5px 5px 0.5em;
    background-color: transparent;
    color: #000000;
    text-decoration: none;
    }
    #categoriaslateral li a:hover {
    background-color: #000000;
    color: #ffffff;
    }
    Você deve colá-lo abaixo de um código com essa estrutura. Ou seja: abaixo do ;} de alguma tag. Por exemplo:
    #post {
    bla bla bla;
    }

    Agora vamos às alterações:
    #categoriaslateral {
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 12px; (Tamanho da fonte. Para modificá-lo, troque o 12 pelo tamanho que você quer)
    font-family: Tahoma; (Fonte. Para modificá-la, troque Tahoma pelo nome da fonte que você quer)
    text-transform: uppercase; (Esta linha vai deixar as palavras em maiúsculo, assim como no JDB. Para tirar, basta excluir esta parte)
    }
    #categoriaslateral ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #categoriaslateral li {
    border-bottom: 1px solid #000000; (Cor da borda. Para trocar, modifique o 000000 pelo código da cor que você quer)
    margin: 0;
    }
    #categoriaslateral li a {
    display: block;
    padding: 5px 5px 5px 0.5em;
    background-color: transparent; (Cor de fundo do link. Ele está transparente para ficar da cor do fundo da sua sidebar. Se quiser trocar, basta apagar o transparent pelo código da cor que você quer. Exemplo: #000000)
    color: #000000; (Cor da fonte do link. Para modificá-la, troque o 000000 pelo código da cor que você quer)
    text-decoration: none;
    }
    #categoriaslateral li a:hover {
    background-color: #000000; (Cor de fundo do link quando o mouse passa em cima. Se quiser modificá-la, basta trocar o 000000 pelo código da cor que você quer)
    color: #ffffff; (Cor da fonte do link quando o mouse passa em cima. Para modificá-la, troque o 000000 pelo código da cor que você quer)
    }
    3. O último passo é colocar os links na sidebar. Para isso, vá na página Layout e adicione um gadget de HTML/Javascript.
    No corpo desse gadget, cole o seguinte código:
    <div id=”categoriaslateral”>
    <ul>
    <li><a href=”LINKAQUI”>Nome da categoria</a></li>
    <li><a href=”LINKAQUI”>
    Nome da categoria</a></li>
    <li><a href=”LINKAQUI”>
    Nome da categoria</a></li>
    <li><a href=”LINKAQUI”>
    Nome da categoria</a></li>
    <li><a href=”LINKAQUI”>
    Nome da categoria</a></li>
    </ul>
    </div>
    Para adicionar mais linhas de links, é só copiar esta linha <li><a href=”LINKAQUI”> Nome da categoria 5</a></li> e colar antes do </ul>.
    Agora é só modificar o LINKAQUI pelo endereço da tag e colocar o nome da categoria no lugar indicado. Vai ficar assim:
    <li><a href=”http://juliedebatom.blogspot.com/search/label/Cabelos“>Cabelos</a></li>
    OBS: Para ter o link da tag, vá até a parte de marcadores da sua sidebar, clique em cima da tag que quer pegar o endereço e vá em Copiar endereço do link. Depois é só colar no código.
    Como o Blogger não tem o sistema de categorias (assim como no WordPress), o jeito é usar os marcadores para esta função. Por isso, crio as tags com os nomes das categorias (exemplo: Cabelos, Comportamento, Design, etc), copio o link delas (assim como expliquei acima) e colo no código. 
    Para que as categorias não se misturem às tags (que ficam na sidebar também), vá até o gadget de marcadores, clique em editar e faça o seguinte:
    Em mostrar, clique em marcadores selecionados. Vá em editar e marque somente aqueles que não fazem parte das categorias, assim como fiz na imagem. Desse jeito, os links não ficam nos marcadores e sim no gadget que acabamos de criar.
    Esta última parte não é obrigatória, pois ela só serve para não deixar os links repetidos na sidebar. É mais uma questão de organizar, viu? É desse jeito que faço para que tudo fique certinho no JDB.
    E vocês? Curtiram o tutorial? Conta pra gente! E não deixem de passar lá no meu Ask para deixar outras sugestões e tirar suas dúvidas.

  • Layout grátis: So girlie

    Se você não tem conta no 4shared, faça o download por este link.
    Não sei se vocês viram, mas cheguei a postar no Twitter e no Facebook que eu tinha preparado uma surpresa para vocês. Bom… Aqui está ela!
    Depois de postar dois layouts grátis aqui (confira), resolvi tirar o dia e criar um terceiro. Tentei fazer algo para blogs femininos que não sejam só de moda nem só de textos, mas sim de tudo um pouco (como o JDB). E o resultado foi esse… O que acharam?
    Espero que vocês gostem do layout tanto quanto eu. Mudei muitas coisas no código e adicionei algumas que me pediram, como sidebar e posts iguais ao do JDB, redes sociais e footer do post. Confiram lá!

    Instalando no Blogspot:

    Depois de fazer o download (na imagem abaixo do preview do layout), vá até a guia Modelo do Blogger, depois em Fazer backup/Restaurar. 
    Antes de fazer o upload, clique em Fazer download do modelo completo. Assim, se der algum erro, você terá o código do layout antigo.
    Clique em Escolher arquivo e, na pasta onde você baixou o lay, selecione-o. Depois, clique no botão Fazer upload e espere carregar.
    Pronto! Seu lay já está em seu blog. 
    Dica: Se o título do seu blog for muito grande, o menu tende a ir para baixo. Para arrumar, vá até Modelo > Editar HTML e procure por este trecho:


    #menu {
    width: 690px;
    height: 40px;
    background-image: transparent;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 206px;
    float: left;
    margin-left: 15px; 

    }

    Em margin-top:206; troque o 206 por um número menor, assim ele sobe de novo. 
    Adicionando suas páginas ao menu do layout:
    Dessa vez, criei uma área especial para vocês adicionarem suas páginas ao lay. Para arrumar os links, faça o seguinte:
    1- Procure pelo código abaixo (ele está bem no final do layout, depois de <div id=’menu’>):
    <li><a class=’link’ href=’http://LINKDASUAPAGINADEPERFILAQUI’>Perfil</a></li>
    <li><a class=’link’ href=’http://LINKDASUAPAGINADEESQUIPEAQUI’>Equipe</a></li>
    <li><a class=’link’ href=’http://LINKDASUAPAGINASOBREOBLOGAQUI’>O blog</a></li>
    <li><a class=’link’ href=’http://LINKDASUAPAGINADEBLOGSAMIGOSAQUI’>Blogroll</a></li>
    <li><a class=’link’ href=’http://LINKDASUAPAGINADECONTATOAQUI’>Contato</a></li>
    Agora é só ir adicionando os links que se pede. Nada impede de trocar algum por outro de sua preferência.
    Arrumando o “quem sou eu”:
    Já deixei o gadget do “quem sou eu” todo certinho, com os ícones de redes sociais e foto. Quando fizer upload do layout, não exclua os gadgets, assim ele já estará lá para você trocar as informações, colocar os links das redes e o link da imagem.

    Vale lembrar que quem usar o layout não deve tirar os créditos e, caso aconteça algum erro no código ou dê problema para baixar, me avisem. Ah, e se puder, comenta aqui se colocar o lay no blog. Vou adorar vê-lo “funcionando” haha.

    E vocês? Curtiram o terceiro lay free do blog? Conta pra gente!

  • #Comofaz: data ao lado do título

    Depois que fiz aquela série de posts ensinando a fazer um layout (confira!), muitos leitores me pediram para continuar falando sobre algumas coisinhas de design e HTML aqui no blog. Recebi várias sugestões lá no meu Ask e adorei saber que vocês curtem aprender novidades para colocar em seus blogs. Afinal, amo mexer com códigos e edições de imagens… E compartilhar tudo o que aprendi nesse tempo sabendo que vocês vão gostar é super gratificante <3
    Um dos tutoriais mais pedidos lá no Ask foi o da data ao lado do post com o coração de fundo. Admito que esse foi um recurso que demorei bastante para entender, fazer e usar. Procurava por tutoriais em todos os lados e nunca encontrava. Tive que adaptar algumas coisinhas para ficar do jeito que queria. Mas deu certo e cá estou eu para ensinar a vocês. Bora?
    1- Antes de qualquer alteração, aconselho a salvar seu modelo anterior. Então, clique em baixar modelo completo e, só depois de tê-lo em seu computador, continue com o tutorial. Assim, se der qualquer erro, você poderá voltar ao seu design antigo.
    Em seu CSS (estilo da página que fica entre <b:skin> e </b:skin>) você vai adicionar esse código:
    /* Data */
    #fecha {
    display: block;
    margin: 28px -33px 0 0px;
    float:right;
    padding-left: 20px;
    padding-top: 10px;
    color: #ffffff;
    background: url(‘http://img268.imageshack.us/img268/6903/bgdataw.png’);
    width: 46px;
    height: 57px;
    border: #DCDCDC 0px solid;
    font-family: Verdana;
    text-transform: uppercase;
    }
    .fecha_dia {
    display: block;
    font-size: 16px;
    }
    .fecha_mes {
    display: block;
    font-size: 11px;
    }
    .fecha_anio {
    display: block;
    font-size: 9px;
    }
    Você deve colá-lo abaixo de um código com essa estrutura. Ou seja: abaixo do ;} de alguma tag. Por exemplo:
    #post {
    bla bla bla;
    }

    Agora vamos às alterações:

    #fecha {
    display: block;
    margin: 28px -33px 0 0px; (margem da data nesta ordem: superior, direita, inferior, esquerda)
    float:right; (lado em que a data vai ficar. Se quiser à direita, deixe como está. Se não, troque o right por left)
    padding-left: 20px; (margem interna esquerda)
    padding-top: 10px; (margem interna superior)
    color: #ffffff; (cor da fonte)
    background: url(‘linkdasuaimagem’); (imagem de fundo)
    width: 46px; (largura)
    height: 57px; (altura)
    border: #DCDCDC 0px solid; (borda. Aconselho a deixar como está. Caso queira uma borda, troque o 0 pelo número da espessura que deseja)
    font-family: Verdana; (fonte da data)
    text-transform: uppercase; (esta linha deixa a fonte em maiúsculo sempre. Se não quiser, basta removê-la)
    }

    .fecha_dia {
    display: block;
    font-size: 16px; (tamanho da fonte do número que corresponde ao dia)
    }

    .fecha_mes {
    display: block;
    font-size: 11px; (tamanho da fonte do número que corresponde ao mês)
    }

    .fecha_anio {
    display: block;
    font-size: 9px; (tamanho da fonte no número que corresponde ao ano)
    }

    2- Depois, marque a caixinha “Expandir modelos de widgets” e procure por esta linha:

    <h2 class=’date-header’>

    Abaixo dela, cole este código:

    <span><div id=’fecha’>

    <script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>

    </div></span>

    3- Depois disso, você deve hospedar sua imagem na internet. Eu uso (e recomendo) o Imageshack. Você precisa ter uma conta lá para fazer o upload.

    Vale lembrar que, caso escolha um coração, você deverá salvá-lo em PNG para que o fundo fique transparente. Comofaz: no Photoshop, abra um novo documento do tamanho desejado (o meu tem 66×67 pixels), lembrando-se que você deve deixar o fundo transparente (não esqueça de selecionar a opção transparent no Background Contents). Assim:

    Com o documento criado, use a forma/shape escolhida (coração, círculo, estrela, etc) e desenhe-a proporcionalmente ao espaço criado, de preferência o mais próximo possível das bordas. Deste jeito:

    Após isso, vá em File > Save for Web ou Save for Web & Devices (atalho: Alt+Shift+Ctrl+S). Em preset selecione a opção PNG-24 e deixe marcada a opção Transparency. Como no print:

    Agora é só clicar em Save, dar o nome ao arquivo e fazer o upload. Então adicione o link da imagem no local indicado.

    4- Para finalizar, vamos adicionar o script ao código. Você deve colar isso após a tag </head> do HTML do seu layout.

    <script>
    function remplaza_fecha(d){
    var da = d.split(&#39; &#39;);
    dia = &quot;<div class=’fecha_dia’>&quot;+da[0]+&quot;</div>&quot;;
    mes = &quot;<div class=’fecha_mes’>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;
    anio = &quot;<div class=’fecha_anio’>&quot;+da[2]+&quot;</div>&quot;;
    document.write(dia+mes+anio);
    }
    </script>

    Clique em Visualizar para conferir se está tudo correto. Depois é só salvar e pronto! Sua data está personalizada.

    E vocês? Curtiram o tutorial? Conta pra gente! E não deixem de passar lá no meu Ask para deixar outras sugestões e tirar suas dúvidas.

  • DIY: Layout para blog (parte 3)

    Recebo muitos comentários no blog, Twitter (@juduartt) e e-mail perguntando como faço meus layous, se faço encomendas e quanto cobro… Como a rotina da faculdade é bem pesada, fica impossível atender todos os pedidos, então não faço para não deixar ninguém de fora. Foi pensando nisso que criei a tag design no blog, assim disponibilizo alguns de meus trabalhos (gratuitamente) para vocês.
    Porém, sei que muitos curtem ter o blog com sua cara, mais personalizado. Então, aqui vou eu (tentar) ajudá-los novamente: a partir deste post, vou fazer um tutorial passo-a-passo de como eu crio meus layouts. Além de guiar vocês, ainda vai ajudar (ou assim espero) quem está louco para aprender. 
    A primeira e a segunda partes já estão no ar e fiquei super feliz de saber que vocês gostaram da ideia e ficaram ansiosos pelos próximas aulas. Quem está perdido e só está vendo esse post, vale dar uma olhada nos dois anteriores. Dei muitas dicas legais por lá. Mas agora, vamos ao que interessa: a continuação.
    Na segunda parte nós terminamos o design. Ele ficou mais ou menos assim:
    Agora, na terceira, nós vamos começar a parte mais chata, porém a principal: o código HTML.

    Para o post não ficar gigante e vocês não perderem tanto tempo, fiz um modelo de código onde nós vamos mexer no estilo (CSS) para modificar nosso layout. Assim como no design, HTML também precisa de prática. Quem quer aprender algo específico (ex: título do post de cor diferente), vale procurar no Google. Lá tem vários links ensinando a fazer coisas bem legais no Blogspot. E qualquer dúvida, vocês podem perguntar no meu Ask ou deixar um comentário no post.
    Então, vamos lá! Neste post nós vamos precisar:
    Adobe Photoshop (ou outro editor de imagens que você usou).
    Modelo do código (download aqui ou aqui)
    Um site para hospedar as imagens (vou usar o Imageshack)
    Dica: deixe o Photoshop aberto. A gente pode precisar dele!
    1. Feito o download do código, abra-o no bloco de notas ou, caso fique tudo misturado, no Word Pad. O código já está certinho e a gente só vai ajustar a posição de tudo na página e as cores. Depois, caso queiram colocar algo (foto do autor, redes sociais, etc), faço post só ensinando isso. Certo?
    2. Vamos começar na ordem que o código está no documento. Quem não entende de HTML, peço que só mexa no que eu for explicando, assim corre menos risco de cometer algum erro. Bom, vamos lá:
    3. Background da página
    O primeiro item que vem no código é o body, ou seja, o corpo da página. Lá nós vamos configurar a cor ou imagem de fundo, a fonte e a cor dela. Sigam:

    body {

    background-image:url(http://LINKDASUAIMAGEMAQUI);
    color:#333333;
    font-family:Arial,Helvetica,sans-serif, Verdana, Tahoma;
    font-size:11px;
    margin:0px 0 0;
    text-align:center;}

    Explicando:
    Em vermelho: Aqui nós vamos mudar a imagem de fundo do blog. Se você usou textura no fundo do layout, hospede-a e cole o link direto aí. Exemplo: http://img193.imageshack.us/img193/1908/24594794.jpg.
    Quem quiser colocar uma cor ao invés de usar uma imagem, o código ficará assim: 
    background-color: #ffffff.;
    Troque o ffffff pela cor desejada. Você pode consegui-la no Photoshop, assim:
    Abra o layout que nós criamos. Então, clique na paleta de cor primária: 

    Vai abrir uma janelinha assim:

    Depois leve o mouse para a cor que deseja “pegar” (no caso, a do background) e copie o código que está após o #. Cole no código.
    Em laranja: Aqui é a cor do texto da página. Eu aconselho a deixar o #333333 ou o preto #000000. Mas vai do gosto de cada um.
    Em verde: Aqui é o nome da fonte que você vai usar na página. Coloque o nome da sua favorita.
    Em roxo: Aqui você troca o tamanho da fonte.
    O resto deixem como está.
    4. Cor dos textos
    O segundo item do código nos permite trocar a cor do texto da página.

    p {
    color:#333333;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    }

    Em vermelho: Troque a cor do texto. Assim como no caso anterior, aconselho a deixar como está ou trocar por #000000 (preto).
    Em laranja: Aqui você troca a fonte dos textos.
    Em dourado: Tamanho da fonte.

    5. Cor dos links

    Agora nós vamos começar a mudar a cor dos links da página, lembrando que esses links são somente os que ficam fora da sidebar e da área de posts.

    a {
    background-color: transparent;
    border-bottom: 0;
    color: #ce937a;
    text-decoration: none;}

    Em vermelho: Neste item você pode mudar a cor do fundo do link. Aconselho a deixar como está, mas vai do gosto de cada um.
    Em laranja: Aqui você pode colocar uma borda abaixo do link. Basta trocar o 0 por um número. Exemplo: 1 px.
    Em azul: Você muda a cor do link aqui. Basta trocar o que está após o # pelo código da cor desejada.

    a:visited {
    background-color: transparent;
    color: #ce937a;
    text-decoration: none;
    border-bottom: 0px dotted #FFFFFF;
    }

    Em vermelho: Neste item você pode mudar a cor do fundo do link quando já foi visitado. Aconselho a deixar como está.
    Em laranja: Você pode mudar a cor do link (visitado) aqui. Basta trocar o que está após # pelo código da cor desejada.
    Em azul: Aqui você configura a borda inferior do link visitado. Aconselho a deixar como está.

    a:hover {
    background-color: transparent;
    color: #333333;
    text-decoration: none;
    border-bottom: 0px dotted #FFFFFF;
    font-style: normal;
    }

    Em vermelho: Neste item você pode mudar a cor do fundo do link quando o mouse está em cima dele. Se deixar como está, não vai mudar a cor.
    Em laranja: Você pode mudar a cor do link (quando o mouse está em cima dele) aqui. Basta trocar o que está após # pelo código da cor desejada.
    Em azul: Aqui você configura a borda inferior do link quando o mouse está em cima dele. Você pode trocar o dotted por solid. 
    6. Topo da página
    Agora nós vamos colocar o topo que criamos no código. Hospede a sua imagem (indico o Imageshack, mas precisa de cadastro) e copie o link direto. (Exemplo:http://img822.imageshack.us/img822/9202/topojf.jpg)

    #header-wrapper {
    background-image:url(http://LINKDASUAIMAGEMAQUI);
    margin:0;
    background-repeat: no repeat;
    width:1080px;
    height: 500px;
    }

    Em vermelho: Onde está indicando, coloque o link da imagem que você criou. Lembrando que você deve hospedar o arquivo que salvamos em .JPG.
    Em laranja: Troque o 1080 pela largura que a sua imagem tem.
    Em azul: Troque o 500 pela altura que sua imagem tem.

    7. Meio da página
    Nesta parte nós vamos fazer com que a área dos posts, sidebar e background se “repitam” na página. Para isso, abra a imagem do seu layout no Photoshop e siga as dicas a seguir:

    Com a ferramenta de seleção (atalho: M), selecione a parte indicada da imagem:

    Não importa a altura da seleção, desde que você selecione a largura inteira, assim como na imagem.
    Depois disso, copie (ctrl + c) e abra um novo documento (Archive/Arquivo > New / Novo). Cole neste novo documento (geralmente ele já vem com o tamanho certo da imagem copiada). Salve essa imagem e hospede. Agora vamos para o código:

    #outer-wrapper {
    background-image:url(http://LINKDASUAIMAGEMAQUI);
    background-repeat:repeat-y;
    width: 1080px;
    margin:0 auto;
    padding:0;
    text-align:justify;
    }

    Em vermelho: Cole o link da sua imagem aqui.
    Em laranja: Altere a largura do fundo aqui. Lembrando que ela deve ser a mesma largura da imagem do topo.

    8. Sidebar

    Antes de continuar com a sidebar, veja no Photoshop qual é a largura do espaço que você utilizou para criá-la. Você pode selecionar o retângulo (lembrando que a seleção tem que ficar certinha ou quase certinha na largura), ir em Edit/Editar > Copy Merged/Cópia mesclada (ou Shift + Ctrl + C), criar um novo documento e ver o número que está na largura. Este número (ou um próximo, caso a seleção não tenha sido perfeita) é o que você vai usar na largura da sua sidebar.

    #sidebar-wrapper {
    width:275px;
    height: auto;
    background-color:transparent;
    float: left;
    padding-bottom: 10px;
    margin-left: 53px;
    margin-top: -130px;
    padding-right: 10px;
    padding-left: 10px;
    }

    Em vermelho: Troque o 275 pelo número que você viu no Photoshop. Caso o texto da sua sidebar ultrapasse ou fique muito pequena, altere o valor.
    Em laranja: Se a sua sidebar estiver no lado direito, troque o left por right. Se estiver no esquerdo, deixe como está.
    Em dourado: Aqui é o valor da margem interna. Pode deixar assim.
    Em azul: O valor da margem esquerda. Caso tenha trocado o left por right, troque aqui também. Vá trocando o número até o conteúdo da sua sidebar ficar posicionada corretamente ao espaço que criamos para ela.
    Em roxo: Aqui é o espaço que sua sidebar terá do topo. Altere o número para posicioná-la da melhor maneira. Caso precise, tire o sinal de menos (-).
    Em rosa: Margem interna do lado direito.
    Em verde: Margem interna do lado esquerdo.

    #sidebar-wrapper p {
    color:#333333;
    font-family:Arial,Helvetica,sans-serif, Verdana, Tahoma;
    font-size:12px;
    }

    Em vermelho: Cor dos textos na sidebar.

    Em laranja: Fonte dos textos na sidebar.

    Em azul: Tamanho dos textos na sidebar.

    #sidebar-wrapper a {
    color: #7b5342;
    text-decoration:none;
      }

    Em vermelho: Cor do link na sidebar.

    #sidebar-wrapper a:hover {
    color:#333333;
     text-decoration:none;
    }

    Em vermelho: Cor do link quando o mouse encostar nele.

    #sidebar-wrapper h2 {
    background: url(“http://LINKDAIMAGEMAQUI”) repeat scroll 0 0 transparent;
    color: #deaa94;
    font-family: “Terminal Dosis”, “sans-serif”;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: normal;
    height: 25px;
    margin-bottom: 5px;
    margin-left: 0%;
    margin-right: 5%;
    margin-top: 10px;
    padding-top: 3px;
    text-align: center;
    width: 275px;
    }

    Em vermelho: Aqui você troca a imagem de fundo dos títulos do gadgets. Você pode criar uma no Photoshop, fazendo um retângulo ou personalizando com uma textura.
    Em laranja: Cor do texto do título da sidebar.
    Em azul: Fonte usada no título da sidebar.
    Em roxo: Tamanho do título na sidebar.
    Em rosa: Se você quiser que o título fique todo em maiúsculo, deixe como está. Se não, apague essa linha.
    Em dourado: Pode deixar como está.
    Em verde: Altura do título da sidebar. 
    Em azul: Margem inferior do título.
    Em roxo: Margem esquerda do título.
    Em vinho: Margem direita do título.
    Em laranja: Margem superior do título. 
    Em verde: Margem interna superior do título.
    Em azul: Alinhamento do texto. Caso queira deixar centralizado, deixe assim. Para colocá-lo na esquerda, troque o center por left. E para posicioná-lo na direita, troque por right.
    Em verde: Tamanho do título na sidebar.
    9. Post
    Vamos arrumar a área de posts agora. Essa parte tem bastante coisa pra configurar, então redobrem a atenção aqui. Beleza?

    #main-wrapper {
    width:600px;
    height: auto;
    background-color:transparent;
    float: right;
    padding-bottom: 10px;
    margin-top: -170px;
    margin-right: 85px;
    color:#333333;
    font-family:Arial,Helvetica,sans-serif, Verdana, Tahoma;
    font-size:12px;
    }

    Em vermelho: Este é o tamanho da sua área de post. Assim como fizemos para descobrir a da sidebar, faça aqui para descobrir a do post. O tamanho que der você coloca aí. Lembrando que você pode alterar caso fique maior ou menor.

    Em laranja: Caso seu post esteja ao lado direito da página, deixe como está. Se estiver no esquerdo, troque o right por left.

    Em azul: Aqui é a margem interna inferior. Coloque o número que achar melhor.

    Em roxo: Neste item você vai configurar a posição superior do post. Vá mexendo nos números até ele ficar certinho na “altura” da página, em cima da área que marcamos para ser a das postagens.

    Em rosa: Esta é a margem direita da área dos posts. Se sua área de postagem está à direita, só troque o número. Se estiver na esquerda, altere o número e o right por left.

    Em dourado: Aqui você vai modificar a cor dos textos no post. Aconselho a deixar como está ou trocar por #000000 (preto).

    Em verde: Este é o item onde você escolhe a fonte do post. Indico Verdana, Arial ou Tahoma que são as mais “comuns”.

    Em azul: Aqui você configura o tamanho da fonte. Indico deixar entre 10 e 12, assim não fica tão pequena nem tão grande.

    .post {
    margin:.5em 0 .5em;
    padding-bottom:.5em;
    }

    Em vermelho: Aqui você vai mudar as margens do post. Indico deixar como está.

    Em laranja: Neste item você altera a margem inferior interna do post.

    .post p, .post-body {
    line-height:1.7em;
    font-family: Arial,Helvetica,sans-serif;
    text-align: justify;
    font-size: 12px;
    }

    Em vermelho: Neste item você muda o espaçamento entre as linhas do post. Pode deixar como está, se quiser.

    Em laranja: Trocar a fonte do texto do post.

    Em azul: Aqui você troca o alinhamento do post. Você tem quatro opções: justify (justificado), right (à direita), left (à esquerda) e center (centralizado).

    Em roxo: Tamanho da fonte no post.

    #main-wrapper .post-body a {
    color:#7b5342;
    text-decoration:none;font-weight: bold;
    }

    Em vermelho: Cor do link nos posts.

    Em azul: Se deixar essa opção, o link ficará em negrito. Se quiser tirar, basta apagar essa linha.

    #main-wrapper .post-body a:visited {
    color:#7b5342;
    text-decoration:none;
    font-weight: bold;
    }

    Em vermelho: Cor do link no post quando já foi visitado.

    Em azul: Se deixar essa opção, o link ficará em negrito. Se quiser tirar, basta apagar essa linha.

    #main-wrapper .post-body a:hover {
    color:#333333;
    text-decoration:none;
    font-weight: bold;
    }

    Em vermelho: Cor do link quando o mouse passa por cima.

    Em laranja: Se deixar essa opção, o link ficará em negrito. Se quiser tirar, basta apagar essa linha.

    #main .post h3 {
    color:#c3937e;
    font-family:’Cookie’, cursive;
    font-size:40px;
    margin-top: 50px;
    text-align:left;
    text-decoration:none;
    width:600px;
    }

    Em vermelho: Cor do título do post quando está na página da postagem e não na principal do blog.

    Em laranja: Fonte do título do post quando está na página da postagem e não na principal do blog.

    Em azul: Tamanho do título do post quando está na página da postagem e não na principal do blog.

    Em roxo: Margem superior do título do post quando está na página da postagem e não na principal do blog.

    Em rosa: Alinhamento do título do post quando está na página da postagem e não na principal do blog. Pode ser trocado por right (direita), center (centralizado), justify (justificado) ou deixar como está, left (esquerda).

    Em dourado: Tamanho do espaço do título do post quando está na página da postagem e não na principal do blog.

    #main .post h3 a, .post h3 a:visited, .post h3 strong {
    color:#c3937e;
    display:block;
    font-family:’Cookie’, cursive;
    font-size:40px;
    border-bottom: 1px dotted #cecece;
    margin-top:50px;
    text-align:left;text-decoration:none;
    width:600px;}

    Aqui nós vamos mudar o estilo do título do post quando está na principal, ou seja, quando está “linkado”. Conselho a deixar os mesmos valores/cores do item anterior para os itens que já estão aqui. Ou seja, se colocou tamanho 40px na fonte de lá, coloque aqui também. Por isso só vou explicar aqueles que não estão no anterior e que vocês “podem” mudar, ok?

    Em vermelho: Cor do título do post linkado.

    Em roxo: Borda inferior do título do post linkado. Podem trocar o dotted por solid, se quiserem.

    Em rosa: Margem superior do título do post na inicial.

    #main .post h3 strong, #main .post h3 a:hover {
    color:#deaa94;
    text-decoration:none;
    }

    Em vermelho: Cor do título do post quando o mouse passa em cima.
    10. Rodapé do post
    Chegou a hora de personalizar o rodapé do post. Lembrando que vamos ter os seguintes itens no rodapé do post: autor do post e tags.
    .post-footer {
    background:url(“http://i56.tinypic.com/nef3h5.png”) no-repeat scroll 0 0 transparent;
    color:#313131;
    font-family:Trebuchet MS;
    font-size:13px;
    height:5px;
    line-height:1.4em;
    margin:0.75em 0;
    padding-left:1px;
    padding-top:5px;
    width:600px;
    }
    Em vermelho: Vocês podem deixar como está, pois uso essa imagem para separar o post do rodapé. Se quiserem, podem fazer outro. Fiquem a vontade!
    Em laranja: Cor do texto no rodapé do post.
    Em azul: Fonte no rodapé do post.
    Em roxo: Tamanho do texto no rodapé do post.
    Em rosa: Tamanho do rodapé do post.
    Em dourado: Espaçamento de linhas. Aconselho a deixar assim.
    Em verde: Margens do rodapé do post.
    Em azul: Margem interna esquerda.
    Em vinho: Margem interna superior.
    Em roxo: Largura do rodapé do post. Aqui você deve deixar o mesmo valor da largura do post, ok?
    .post-footer a{
    color:#c3937e;
    }
    Em vermelho: Cor do link no rodapé do post.
    .post-footer a:hover{
    color:#333333;
    }
    Em vermelho: Cor do link no rodapé do post quando o mouse passar em cima.
    p.post-footer-line-3 {
    border-bottom:1px solid #c0c0c0;
    margin:0 auto;
    padding:0;
    }
    Em vermelho: Borda inferior do rodapé do post.
    11. Menu de navegação
    Quem fez o espaço para o menu (inicio, sobre, etc) continua. Quem não fez, pode passar para o próximo item.
    #menu {
    width: 470px;
    height: 30px;
    background-image:transparent;
    background-position:center;
    background-repeat:no-repeat;
    margin-top: 115px;
    float: right;
    margin-right: 200px;
    }
    Em vermelho: Largura da área de menu. Para descobrir, faça o mesmo que fizemos com a sidebar e o post. Lembrando que você pode alterar se precisar.
    Em laranja: Altura da área de menu. 
    Em azul: Margem superior da área do menu. Altere o número até ele ficar posicionado na mesma altura que o espaço que você criou.
    Em roxo: Se o menu estiver à direita, deixe como está. Se estiver à esquerda, troque por left. Se estiver centralizado, pode deixar assim, somente altere no próximo item.
    Em rosa: Margem direita do menu. Se você trocou o right por left, altere aqui também.
    #menu a {
    color: #C3937E;
    }
    Em vermelho: Cor do link do menu.
    #menu a:hover {
    color: #deaa94;
    }
    Em vermelho: Cor do link do menu quando o mouse passa por cima.
    #menu ul {
    width: 740px; 
    margin: 0px auto 0; 
    padding: 0 0 0;
    }
    Em vermelho: Largura do menu. Aconselho a deixar assim, porém pode modificar caso precise.
    #menu li {
    float:left;
    list-style-type:none;
    margin-top:-3px;
    }
    Em vermelho: Posicionamento dos links. Se quiser que fique à direita, troque left por right.
    Em azul: Margem superior dos links do menu.
    .link {
    width: 60px;
    height: 25px;
    font-family: georgia;
    font-size:18px;
    color:#94b2b2;
    margin-left:10px;
    margin-right: 5px;
    }
    Aqui vamos personalizar o estilo dos links do menu (como vai ficar o início, sobre, equipe, etc).
    Em vermelho: Altura (aproximada) do espaço dos links.
    Em laranja: Fonte usada para os links.
    Em azul: Tamanho da fonte.
    Em roxo: Cor da fonte.
    Em rosa: Margem esquerda.
    Em dourado: Margem direita.
    11. Comentários
    Vamos personalizar o item de comentários que fica abaixo do post, onde o leitor clica para comentar.
    #comentslink {
    text-align: right;
    font-size: 25px;
    font-family: ‘Cookie’, cursive;
    width: 100%;
    }
    Em vermelho: Alinhamento do link do comentário. Se deixar como está, ficará à direita. Caso queira deixar à esquerda, troque right por left.
    Em laranja: Tamanho da fonte.
    Em azul: Fonte.
    #comentslink a:link, #comentslink a:visited, #comentslink a:active {
    color: #ffffff;
    border: 0px solid #c7ecf1;
    padding: 0 4px;
    background-color: #deaa94;
    TEXT-DECORATION: none;
    }
    Em vermelho: Cor do link do comentário.
    Em laranja: Cor do fundo do link. Eu gosto de deixar uma cor mais forte aqui e uma mais clara no item anterior, pois chama atenção. Porém, se quiser deixar sem nenhuma cor aqui, apague essa linha.
    #comentslink a:hover {
    border:0px solid #9ec9cf;
    color:#ffffff;
    padding: 0 4px;
    background-color: #c3937e;
    TEXT-DECORATION: none;
    }
    Em vermelho: Cor do link do comentário quando o mouse encosta em cima.
    Em laranja: Cor do fundo do link quando o mouse encosta em cima. Eu gosto de deixar uma cor mais forte aqui e uma mais clara no item anterior, pois chama atenção. Porém, se quiser deixar sem nenhuma cor aqui, apague essa linha.
    .comment-link {
    margin-left:.6em;
     }
    Em vermelho: Margem esquerda do link. Aconselho a deixar como está.
    12. Tags que ficarão no rodapé do post
    As tags do post serão configuradas aqui quanto à cor, tamanho, fonte e etc.

    #tagslink {
    text-align: left;
    font-family: verdana;
    font-weight: bold;
    color: #333333;
    font-size: 10px;
    width: 100%;
    }
    Em vermelho: Alinhamento das tags. Se quiser deixar na direita, troque por right. Porém, aconselho a deixar assim, pois fica melhor para o leitor visualizar. 
    Em laranja: Fonte das tags.
    Em azul: Se quiser que o link fique em negrito, deixe como está. Se não, apague essa linha.
    Em roxo: Cor das tags.
    Em rosa: Tamanho da fonte das tags.
    #tagslink a:link, #tagslink a:visited, #tagslink a:active {
    background-color: transparent;
    color: #c3937e;
    border: 0px solid #c7ecf1;
    padding: 0 0px;
    TEXT-DECORATION: none;
    }
    Em vermelho: Cor do fundo das tags. Se quiser colocar uma cor, troque transparent pelo código da cor que deseja.
    Em laranja: Cor da fonte da tag.
    #tagslink a:hover {
    background-color: transparent;
    border:0px solid #9ec9cf;
    color:#333333;
    padding: 0 0px;
    TEXT-DECORATION: none;
    }
    Em vermelho: Cor do fundo das tags quando o mouse passa em cima. Se quiser colocar uma cor, troque transparent pelo código da cor que deseja.
    Em laranja: Cor da fonte da tag quando o mouse passa em cima.
    13. Data do post
    A data ficará no topo do post, abaixo do título. Vamos configurar a cor, fonte, tamanho e etc.
    h2.date-header {
    color:#5a5959;
    font-family:verdana;
    font-size:11px;
    line-height:7pt;
    padding-left:0;
    text-align:right;
    text-transform:uppercase;
    letter-spacing:-1pt;
    margin-top:-15px;
    }
    Em vermelho: Cor da data.
    Em laranja: Fonte da data.
    Em azul: Tamanho da fonte da data.
    Em roxo: Alinhamento da data. Se quiser à direita, deixe como está. Se quiser à esquerda, troque right por left.
    Em rosa: Se quiser as letras todas em maiúsculas, deixe assim. Se não, apague essa linha.
    Em dourado: Espaçamento entre as letras. Se quiser que elas fiquem “normal”, apague essa linha.
    Em azul: Margem superior da data. Você pode alterar o valor da forma que preferir.
    14. Autor no rodapé do post
    Iremos arrumar a cor, fonte, tamanho e etc do “Postado por: Fulano” no final do post.
    .autordopost {
    color:#333333;
    font-family:verdana;
    margin-bottom: 5px;
    margin-top: 5px;
    font-size:11px;
    line-height:7pt;
    padding-left:0;
    text-align: center;
    text-transform:uppercase;
    letter-spacing:-1pt;
    }
    Em vermelho: Cor do texto.
    Em laranja: Fonte do texto.
    Em azul: Margem inferior.
    Em roxo: Margem superior.
    Em rosa: Fonte do texto.
    Em dourado: Alinhamento do texto. Está centralizado (center), mas você pode trocar por left (esquerdo) ou right (direita).
    Em verde: Se quiser que o texto fique em maiúscula, deixe como está. Caso não, apague essa linha.
    Em azul: Espaçamento entre as letras. Se quiser que elas fiquem “normal”, apague essa linha.
    15. Rodapé da página
    Vamos agora para a última parte do código: o rodapé da página.

    #footer-wrapper {
    background-color: #f6e4dd;
    background-repeat:no-repeat;
    width:100%;
    height:50px;
    margin:0 auto;
    padding:0;
    }
    Em vermelho: Aqui vamos trocar a cor do rodapé da página. Se quiser colocar uma imagem, troque essa linha por background-image:url(http://LINKDASUAIMAGEMAQUI); e coloque o link do fundo no espaço indicado.
    Em laranja: Altura do rodapé. Se for uma imagem, coloque o mesmo valor da sua altura aqui.
      
    Agora vamos arrumar o estilo daquele texto (Layout feito por bla bla bla) que fica no rodapé da página.
    #texto {
    background-color:transparent;
    width:900px;
    height:15px;
    margin-top: -45px;
    margin-left: auto;
    margin-right:auto;
    clear:both;
    color:#333333;
    font-family:Arial;
    font-size:12px;
    }
    Em vermelho: Tamanho do espaço onde o texto do rodapé da página ficará. Aconselho a deixar assim.
    Em laranja: Altura do espaço onde o texto do rodapé da página ficará.
    Em azul: Margem superior do texto. Altere como preferir.
    Em roxo: Cor do texto.
    Em rosa: Fonte do texto.
    Em dourado: Tamanho do texto.
    #texto a {
    font-weight:bold;
    color: #7B5342;
    }
    Em vermelho: Se quiser que o link fique em negrito, deixe assim. Caso contrário, apague a linha.
    Em laranja: Cor dos links no rodapé da página.
    #texto a:hover {
    font-weight:bold;
    color: #c3937e;
    }
    Em vermelho: Se quiser que o link fique em negrito, deixe assim. Caso contrário, apague a linha.
    Em laranja: Cor dos links no rodapé da página quando o mouse encostar.
    Esta é a parte do código que deixa o nome do meu blog com letras maiúsculas para diferenciar. Se quiser que aconteça no seu também, deixe assim. Se não, só apagar esta parte do código:
    .ppc {
    text-transform:uppercase;
    }
    Agora vamos arrumar o texto que aparece lá no fim da página. Procure no seu código esta parte (está bem no fim):
    <a class=’ppc’ href=’http://www.juliedebatom.blogspot.com/’>Julie de Batom</a> (2012) Todo o conteúdo é criado pela equipe do blog e qualquer cópia total ou parcial devem ser creditadas ao seu devido autor.<br/>
    Design e código desenvolvidos por <a href=’http://www.juliedebatom.blogspot.com’>Julie Duarte</a> | Ilustração por: <a href=’http://www.http://ivalfre.com/blog/’>Ivalfre</a>. 
    Se você deixou o código “ppc” lá em cima, deixe como está. Se não, apague o indicado abaixo:
    <a class=’ppc’ href=’http://www.juliedebatom.blogspot.com/’>Julie de Batom</a>
    Você pode trocar o texto do rodapé da página pelo que quiser. Eu gosto de deixar os créditos do layout. Quem fizer o mesmo, não esqueça de colocar que aprendeu a fazer o design e o código do blog aqui no Julie de Batom, ok?

    UPDATE: Depois de tudo pronto, vá até o Blogspot > Design > Editar HTML e baixe seu modelo antes de qualquer alteração. Então, selecione tudo, apague e cole o código que você acabou de fazer no bloco de notas. Clique em visualizar e veja se está tudo certo. Se estiver ok, é só salvar. Se não, você pode ir alterando no próprio Blogspot e visualizando as mudanças.

    _________________________________________________________________________
    UFA! Terminamos a parte básica do HTML. Já falei mas vou repetir: tudo o que fizemos só se aperfeiçoa com o tempo. Caso queiram aprender algo específico, procurem no Google que lá ensina direitinho. Ensinei apenas o básico mesmo e, como vocês viram, o básico já é bem chato de entender. Para se aprimorar, pratiquem, inovem, procurem conhecer novas formas de arrumar o layout. Se ver algo legal em algum blog por aí, procure algum tutorial. Eu aprendi assim, apenas procurando aqui e ali, lendo em sites especializados e tal.
    Para quem quer entender conceitos de HTML e CSS (estilos), indico o site W3Schools. Ele é em inglês, mas vocês podem usar o tradutor. Ele é ótimo e até meu professor na ETEC o usava. Lá tem tudo sobre códigos para internet, não só HTML e CSS, como outros também.
    Bom, finalizamos nosso layout. Expliquei parte por parte, pois como cada um criou o seu, não tem como eu dizer “coloque esse número” ou “arrume assim”. Por isso dei dicas do que podem colocar ou não. Espero ter ajudado, do fundo do meu coração. Qualquer dúvida, basta deixar nos comentários (vou responder por aqui, ok?) ou no meu perfil do Ask. E como eu disse lá no começo (como faz tempo que escrevi o começo, meu Deus…), se quiserem dar alguma sugestão de tutorial, deixem lá no Ask, também. 
    Espero que o post tenha ficado claro, pois tentei ensinar da forma mais fácil possível. Ele ficou meio longo porque, realmente, era muita coisa para arrumar/ensinar. Pensei em dividir a parte de código por partes, mas sei que vocês querem terminar logo o blog de vocês e também não teria sentido começar uma parte e esperar para finalizá-la. Ah, e quando terminarem seus blogs, me mostrem. Quero ver como “nosso” trabalho ficou, hein? 
    E vocês? Curtiram o post? Conta pra gente!

  • DIY: Layout para blog (parte 2)

    Recebo muitos comentários no blog, Twitter (@juduartt) e e-mail perguntando como faço meus layous, se faço encomendas e quanto cobro… Como a rotina da faculdade é bem pesada, fica impossível atender todos os pedidos, então não faço para não deixar ninguém de fora. Foi pensando nisso que criei a tag design no blog, assim disponibilizo alguns de meus trabalhos (gratuitamente) para vocês.
    Porém, sei que muitos curtem ter o blog com sua cara, mais personalizado. Então, aqui vou eu (tentar) ajudá-los novamente: a partir deste post, vou fazer um tutorial passo-a-passo de como eu crio meus layouts. Além de guiar vocês, ainda vai ajudar (ou assim espero) quem está louco para aprender. 
    A primeira parte já está no ar e fiquei super feliz de saber que vocês gostaram da ideia e ficaram ansiosos pelos próximas aulas. Quem está perdido e só está vendo esse post, vale dar uma olhada no primeiro. Dei muitas dicas legais por lá. Mas agora, vamos ao que interessa: a continuação.
    O layout que nós vamos fazer juntos vai ficar mais ou menos assim:

    Digo “mais ou menos” porque preparei esse somente como base. E claro: vocês podem modificar o que quiserem. Fiz ele de uma forma super simples, assim não fica tão difícil pra vocês entenderem. E antes que me culpem por não fazer algo super legal e cheio de coisas (hahaha), vou explicar: isso vem com o tempo e com a prática. Pra quem está começando, os primeiros layouts vão ser bem simples e desastrosos, pois existe aquela barreira com o programa e a falta de costume com as ferramentas. É normal. Os meus foram horríveis. Comecei a fazê-los em 2006 e hoje, após seis anos, ainda tenho muito o que aprender e melhorar. Estou apenas explicando para não receber comentários maldosos e coisas do tipo. Bom, aviso dado, agora vamos deixar de blá blá blá e começar a trabalhar!

    Nesse “tutorial”, vou usar técnicas que uso em todos os meus layouts, ou seja: fazer as nuvens que sempre faço, colocar desenhos, escrever, aplicar efeitos nos textos, usar pincéis e etc. Vou explicando no decorrer das aulas. Com o tempo, vocês vão achar tudo isso que falei no design do JDB. A técnica é a mesma, só resta a vocês aplicarem da melhor forma possível e sair fuxicando o Photoshop em busca de ferramentas novas (acreditem: aprendi tudo assim).
    Materiais que vamos precisar:
    Background usado na nuvem – imagem principal – fonte
    Ainda lembrando que vocês estão livres para usar o que quiserem!
    Os pincéis de coração que usei no layout já são antigos e não lembro onde fiz o download. Por isso, vocês podem procurar outros no DeviantArt (link direto para pinceis de coração) ou no post aqui do blog que coloquei alguns links. Vale usar outros, também!

    Primeiro passo: criando um novo documento no Photoshop
    Vamos começar criando o documento onde vamos fazer nosso layout. Para isso, basta ir em File/Arquivo > New/Novo ou pelo atalho Ctrl + N. Configure deste jeito:

    Claro que vocês podem colocar um número diferente na largura e altura. Geralmente, uso o 1080px para a largura e a altura depende do que faço. Nem sempre fica em 500px.

    Após clicar em Ok, o documento será aberto no Photoshop. Seguindo o layout que criei, vocês vão usar a ferramenta Paint bucket tool (atalho: G) e escolher a cor e6eae1 para pintar o fundo. Assim:

    Com a ferramenta (item 3) selecionada, pinte o documento que nós criamos. Ele ficará assim:
    Segundo passo: “desenhando” a nuvem
    Agora nós vamos criar uma nova camada para adicionar a nuvem. Para isso, há duas maneiras:
    1) No menu Layer/Camada > New/Novo > Layer/Camada
    2) Pelo atalho Shift + Ctrl + N
    Com a layer criada, vamos fazer a nuvem. Para isso, selecione a ferramenta de Shapes/Formas (atalho: U).
    Com a shape de círculo selecionada, vamos começar a montar a nuvem. Segurando a tecla Shift, vá desenhando vários círculos juntos até formar uma nuvem a seu gosto. Assim:

    Continue assim até sua nuvem ficar pronta. Ela ficará desse jeito:
    Terceiro passo: adicionando efeito na nuvem
    Antes de tudo, você deve abrir aquele background que pedi para salvar no começo do post. Para isso, vá em File/Arquivo > Open/Abrir e procure a pasta onde o salvou.
    Com o documento aberto, vamos transformá-lo em pattern/padrão no Photoshop. Vá em Edit/Editar > Define Pattern/Definir Padrão. Coloque um nome para ele e clique em Ok.
    Na camada da nuvem, clique com o lado direito do mouse e vá em Blending Options/Opções de Mesclagem. 
    Vai abrir uma janelinha. Ao lado esquerdo há várias opções. Procure por Pattern Overlay/Sobreposição de Padrão. Veja o print:
    Selecione o Pattern Overlay/Sobreposição de Padrão (item 1) e clique na setinha (item 2). Vai abrir uma pequena caixa com as opções de pattern/padrão. Procure o que acabamos de abrir (o background, lembra?). Se ele foi o último a ser adicionado, estará no final. Assim:
    Agora vamos adicionar a “sombra” abaixo da nuvem. Nessa mesma janela, clique no item Drop Shadow (o primeiro). Deixe assim:
    Cor usada: c6bfaf
    Agora é só clicar em Ok.
    Quarto passo: adicionando o espaço onde irá o nome do blog
    Vamos criar aquele “traço” atrás do nome do blog. Para isso, use a cor e6eae1 (ensinei lá em cima como trocar a cor) e selecione a ferramenta de shapes (atalho: U).
    Eu usei a largura (weight) em 50px. Mas você pode alterar o tamanho.
    Vou usar na diagonal, mas também é escolha sua. Basta clicar na página e arrastar. Ficará assim:
    Quinto passo: adicionando o nome do blog
    Vamos escrever o nome/título do blog nessa caixinha que acabamos de criar. Para isso, selecione a ferramenta de texto (atalho: T). A cor é opcional, porém vou usar a b2abb3, ok?
    Com a ferramenta Texto selecionada, clique e arraste para formar uma “caixa” perto da caixinha que criamos e escreva o nome/título do seu blog. Ficará assim:
    Quem fez a caixinha reta, basta posicionar o texto em cima. Quem criou na diagonal, como eu, basta virar o texto. Para isso, posicione o cursor perto de uma ponta da caixinha, segure com o mouse e arraste. Assim:
    Sexto passo: adicionando efeito ao texto
    Na camada do texto, clique com o botão direito e vá em Blending Options/Opções de Mesclagem. Nós vamos fazer o mesmo processo da sombra na nuvem. Porém, a cor que vamos usar é a 867289, ok? Ficará assim:
    Sétimo passo: adicionando o desenho ao layout
    Abra a o desenho que vocês salvaram, seja o que disponibilizei aqui no post ou o que vão querer usar. O método é o mesmo: File/Arquivo > Open/Abrir.
    Com o desenho aberto, vamos recortá-lo antes de colocar no layout. Desta vez, como o fundo é todo branco, vamos usar a ferramenta varinha mágica (atalho: W).
    Clique no fundo branco da imagem para selecioná-lo. Assim:
    Agora vá em Select/Selecionar > Inverse/Inverso. Aperte ctrl+c para copiar. Vá até o documento do layout que estamos criando e, adivinhem? Ctrl+v haha.
    Para mover o desenho, vamos usar a ferramenta Move Tool (atalho: V). No painel de ferramentas, ela é a primeira do lado direito. 
    Vou posicionar o desenho assim:
    Oitavo passo: criando os espaços para perfil, posts e menu
    Agora vamos criar a sidebar e a coluna dos posts. Para isso, vamos criar uma nova camada (Layer/Camada > New/Novo > Layer/Camada).
    Com a cor branca (código: ffffff), selecione a ferramenta de shapes. Iremos usar o retângulo:
    Clique e arraste para criar a parte do post. Ela deve terminar no fim do documento, assim:
    Agora crie outra camada (Layer/Camada > New/Novo > Layer/Camada) para a área do perfil. Vou usar a cor d6ddcc, mas fiquem a vontade para trocar. Ficará assim:
    Com as colunas do post e da sidebar prontas, agora é hora de criar o espaço onde ficará o menu. Essa parte é opcional, pois nem todo mundo quer ou tem páginas no blog para colocar aí. Só para explicar: essa é a área onde vamos colocar os links para início, perfil, blogroll, contato e etc. 
    Ainda com a ferramenta de shapes selecionada e com a mesma cor que usamos na sidebar, nós vamos usar o retângulo que tem as pontas arredondadas. O ícone dele está ao lado do que usamos anteriormente.
    Clique e arraste no local desejado para colocar o menu. Ficará assim:
    Nono passo: finalizando com os brushes/pincéis
    Para não ficar um espaço muito vago entre o desenho e a sidebar, vou colocar pincéis de corações ali. Fiquem a vontade: vale adicionar uma frase que você goste, ou colocar créditos do layout ou até usar outros pincéis. E claro: se curtiu assim, também pode deixar do jeito que está e parar por aqui!
    Vamos selecionar a ferramenta Brush Tool (atalho: B). Para o post não ficar muito grande, vou aproveitar que já ensinei a importar pincéis pro Photoshop neste post. Deem uma lida lá.
    Depois de carregar os brushes que baixou, escolha o seu favorito e a cor desejada (vou usar a c1a99a). Clique no espaço e pronto! A figura já estará lá.
    Décimo passo: salvando a imagem
    Nosso layout está pronto (pelo menos a parte gráfica). Agora vamos salvar a imagem de duas formas: uma em formato .PSD (do Photoshop, caso precise alterar algo mais tarde) e em .JPG (a que vai para o blog depois).
    Para salvar, vá em File/Arquivo > Save As/Salvar como. Uma janela irá abrir e lá você vai colocar o nome do seu arquivo. Certifique-se que abaixo, em format/formato, esteja Photoshop (.PSD;* .PDD). Clique em save/salvar. Agora faça o mesmo processo, porém, no format/formato, procure por JPEG (*.JPG;* .JPEG;* .JPE). Salve e pronto.
    Ufa! Após mais de três horas criando o post, finalmente chegamos ao fim. A parte gráfica está pronta! Guarde os dois documentos (o .PSD e o .JPG) que, na próxima aula, vamos começar com os códigos. E continue com o Photoshop (ou o programa de edição que você usou) instalado aí, pois ainda temos outras imagens para criar, viu?
    Espero que vocês tenham gostado da aula. Já disse isso, mas não custa repetir: somente o tempo e a prática vão te fazer melhorar. Criei um layout simples com vocês para não ficar muito chato, longo e difícil. Porém, vale usar as técnicas para criar coisas diferentes e mais elaboradas. Tudo depende de vocês, viu? E uma dica: fuxiquem MUITO o Photoshop. Foi assim que aprendi tudo o que sei.
    E vocês? Curtiram a aula? Estão ansiosos para começar com o HTML? Conta pra gente! Qualquer dúvida, deixem por comentário que respondo (aqui mesmo).

  • Layout grátis: Fix a heart

    Com a rotina pesada da faculdade, fiquei sem tempo para fazer muitas coisas para o blog e para vocês. Porém, minhas férias chegaram e prometi que, assim que tivesse um dia livre, iria me comprometer a criar um novo layout free para disponibilizar no blog. Bom… promessa é dívida, certo?

    Esse segundo tema que crio é bem simples, porém gostei bastante. Tentei me inspirar em blogs que só postam textos, pois o anterior era mais para blogs de fotografia, moda e etc. Apesar de não ser tão cheio de imagens e texturas, eu amei. Ah, e vale lembrar: me inspirei na música Fix a heart da Demi Lovato. A frase “never really can fix a heart” é da canção. 

    Instalando no Blogspot:
    Depois de fazer o download (na imagem abaixo do preview do layout), vá até a guia Design do Blogger, depois em Editar HTML. Logo acima, haverá a opção de upar o novo tema. Como na imagem:

    Clique em Escolher arquivo e, na pasta onde você baixou o lay, selecione-o. Depois, clique no botão Fazer upload e espere carregar.
    Pronto! Seu lay já está em seu blog. 
    Dica: Se o título do seu blog for muito grande e ultrapassar a área dele ou muito pequeno e ficar estranho, você pode modificar o tamanho da fonte. Basta ir até Design > Editar HTML e procurar por este trecho:

    #header h1 {
    color:#c3937e;
    display:block;
    font-family: ‘Cookie’, cursive;
    font-size:50px;
    font-style:normal;
    font-weight:normal;
    margin:0;
    padding-left:330px;
    padding-top:90px;
    text-align:center;
    width:550px;
    }

    Em font-size:50px; troque o 50 por um número menor (para diminuir) ou maior (para aumentar). Caso você ache que o título está descentralizado e queira ajustá-lo, troque o padding-top:90px; por um número maior (deixa o título mais para baixo) ou menor (deixa o título mais para cima).
    Adicionando suas páginas ao menu do layout:
    Dessa vez, criei uma área especial para vocês adicionarem suas páginas ao lay. Para arrumar os links, faça o seguinte:
    1- Procure pelo código abaixo (ele está bem no final do layout, depois de <div id=’menu’>):
    <li><a class=’link’ href=’http://LINKDOSEUBLOGAQUI’>Início</a></li>
    <li><a class=’link’ href=’http://LINKDASUAPAGINADEPERFILAQUI’>Perfil</a></li>
    <li><a class=’link’ href=’http://LINKDASUAPAGINADEESQUIPEAQUI’>Equipe</a></li>
    <li><a class=’link’ href=’http://LINKDASUAPAGINASOBREOBLOGAQUI’>O blog</a></li>
    <li><a class=’link’ href=’http://LINKDASUAPAGINADEBLOGSAMIGOSAQUI’>Blogroll</a></li>
    <li><a class=’link’ href=’http://LINKDASUAPAGINADECONTATOAQUI’>Contato</a></li>
    Agora é só ir adicionando os links que se pede. Nada impede de trocar algum por outro de sua preferência.

    Vale lembrar que quem usar o layout não deve tirar os créditos. Ah, e se puder, comenta aqui avisando que colocou o lay no blog. Vou adorar vê-lo “funcionando” hihi.

    E vocês? Curtiram o segundo lay free do blog? Conta pra gente!

  • Vocês conhecem o Pixlr Express?

    Já faz algum tempo que ando usando o Photoshop somente para montagens e edições mais complexas. Depois que descobri o Pixlr Express, de um tempo para cá venho fazendo tudo nele. Principalmente as edições dos posts para o blog.
    O Adobe Photoshop é um software bem pesado, que acaba demorando para abrir. Assim, acabo perdendo mais tempo esperando o programa carregar do que fazendo as edições. Com um editor de imagens online como o Pixlr Express, acabo fazendo tudo por lá com rapidez e a mesma qualidade. Usei o aplicativo esses dias para um post no Garotas Dizem (vocês viram?) e ficou ótimo.
    Cheguei a falar sobre o Pixlr Express aqui no #JDB em um post sobre aplicativos para o Google Chrome (vale a pena conferir). Porém, nada melhor que fazer um especial, explicando um pouco do que ele faz. Quem curte agilidade e qualidade, vai amar o editor. Principalmente porque ele está cheio de efeitos vintage e molduras a la Instagram.
    1- Browse: procurar uma foto no seu computador.
    2- Open URL: abrir uma foto que já está hospedada na Internet.
    3- Webcam: tirar uma foto pela sua webcam
    4- Collage: fazer uma colagem de fotos (do seu computador).
    Após carregar a foto, os 3 primeiros itens vão abrir nessa página:
    1- Adjustment: permite você editar o básico, como cortar a imagem, ajustar o tamanho e mexer no brilho e contraste da foto.
    2- Effect: conta com vários efeitos prontos para você aplicar em suas fotos.
    3- Overlay: são “texturas” de luz que você pode usar para dar um ar mais vintage à imagem.
    4- Border: bordas e molduras.
    5- Sticker: desenhos para “colar” na foto.
    6- Text: escrever algum texto.
    O item collage vai ser direcionado para essa janela:
    1- Layout: escolher o layout da sua colagem.
    2- Spacing: aumentar ou diminuir a largura das linhas.
    3- Roudness: arredondar as bordas.
    4- Proportions: mudar o tamanho/proporção da base da colagem.
    5- Color: escolher a cor das linhas.
    6- Finished para finalizar (e ir para a página que mostrei anteriormente) ou Close para parar de editar.
    Após escolher a foto, ficará assim:
    1- Trocar a foto
    2- Editar a foto
    3- Excluir a foto

    O modo collage é super útil para quem trabalha com montagens para posts de moda. Basta selecionar o layout que contém o número de quadros que você quer e arrumar o tamanho no proportions. 
    Você pode usar o item 2 para editar as fotos separadamente. Caso queira dar o mesmo efeito às quatro, cole todas na moldura e clique em finished. Então, é só escolher o efeito e/ou moldura. Só pra vocês terem uma ideia, fiz dos dois modos:
    A primeira, com um efeito em cada:
    A segunda com o mesmo efeito em todas (aplicado após a montagem):
    Uma dica: ao aplicar os efeitos, texturas ou bordas, há uma opção chamada amount (item de número 3 na foto abaixo) que permite diminuir a opacidade. O legal é misturar vários efeitos. Ou seja: aplicar um com um número baixo no amount e outro por cima, também com um número menor. Assim você personaliza seus efeitos e dá uma cara diferente às fotos.
    Para salvar, basta clicar no ícone save (1) no canto superior esquerdo da tela. Caso queira parar a edição ou voltar à tela inicial, clique em closed  (2).
    E vocês? Curtiram a dica? Gostaram do post? Conta pra gente!

  • DIY: Layout para blog (parte 1)

    Recebo muitos comentários no blog, Twitter (@juduartt) e e-mail perguntando como faço meus layous, se faço encomendas e quanto cobro… Como a rotina da faculdade é bem pesada, fica impossível atender todos os pedidos, então não faço para não deixar ninguém de fora. Foi pensando nisso que criei a tag design no blog, assim disponibilizo alguns de meus trabalhos (gratuitamente) para vocês.
    Porém, sei que muitos curtem ter o blog com sua cara, mais personalizado. Então, aqui vou eu (tentar) ajudá-los novamente: a partir desse post, vou fazer um tutorial passo-a-passo de como eu crio meus layouts. Além de guiar vocês, ainda vai ajudar (ou assim espero) quem está louco para aprender. Vamos começar?
    Antes de tudo, desenho numa folha de sulfite o “esqueleto” do blog. Geralmente, fica assim:
    A partir daí, começo a criar a paleta de cores. No meu caso, eu crio sozinha porque já estou acostumada a combinar tons. Porém, quem precisa de uma inspiração ou está com medo de errar, indico o site Colour Lovers. Lá vocês vão encontrar muitas paletas prontas e super fofas.
    Agora é hora de abrir o Photoshop ou o programa de edição que você usa. No meu caso, tenho o Adobe Photoshop CS2. Eu ganhei o CD com ele, então não sei onde baixar. Porém, uma solução é procurar o download da versão portable. Além de mais leve, ela não precisa de instalação e o programa funciona normalmente. Tenho alguns assim (o Adobe Illustrator e o Adobe Flash) e garanto que são tão bons quanto a versão normal.
    Antes de continuar: vou criar um layout com vocês. Porém, nada impede que vocês usem imagens, cores e tamanhos diferentes. O que vou fazer aqui é apenas para guiá-los, ok? Será simples, só para mostrar o básico e não confundir ninguém. O tempo e a prática é que vão melhorar seu desenvolvimento, por isso, a cada layout novo que criar, vale ir procurando outras ferramentas do programa ou tutoriais no Google de como fazer alguma coisa (por exemplo: como cortar uma imagem, como mudar a cor de fundo, etc).
    Como sei que muitos não tem programas de edição, vou parar o post por aqui. Essa primeira parte é só um aquecimento… Enquanto o próximo post não vem, vocês podem ir baixando o Photoshop (ou outro software, depende da sua preferência/espaço livre no computador) e escolhendo a paleta de cores. Deixem tudo preparado para nossa próxima “aula”, viu?
    E vocês? Curtiram a ideia do DIY? Estão ansiosos para os próximos posts? Conta pra gente!

  • Actions para Photoshop!

    Entre as coisas que mais gosto de fazer, passar horas no Photoshop é uma das minhas favoritas. Adoro inventar efeitos, descobrir ferramentas e aprender a aplicá-las em imagens. Sempre que tiro fotos novas, fico um tempão no programa decidindo cores, iluminação e itens básicos de edição. Daí que nascem as minhas actions, ou seja, efeitos prontos.
    A maioria dos efeitos que uso em minhas fotos são feitos por mim. Geralmente, crio na hora e gravo como action para usar depois. Por isso, vou compartilhar com vocês minhas sete actions favoritas. Todas elas estão reunidas em um único documento, que vem com esses efeitos:

    Como usar?

    Após fazer o download, clique na setinha (print) e selecione Load actions/carregar ações (print) na lista que abrir. Procure a pasta onde salvou (se estiver em rar/zip, deve ser descompactada antes), selecione a escolhida e clique em Load/carregar (print). Após isso, a action fará parte de sua lista da janelinha! 
    Então, clique na setinha ao lado do nome (print) e veja as actions que estão dentro da “pasta”. Abra a foto, selecione a que deseja usar e clique no play (print). Espere o efeito estar na foto e pronto! Fácil, não?
    E vocês? Curtiram os efeitos? Conta pra gente!