Ju Duarte

Tag: design

  • Onde encontrar ícones de redes sociais para seu blog?

    Onde achar ícones de redes sociais para blog?

    Quem é blogueiro sabe o quanto o design do nosso cantinho é importante. Eu, por exemplo, gosto de pensar em cada mínimo detalhe. Inclusive os ícones de redes sociais, que são ótimos para mostrar ao visitante onde ele pode nos encontrar para bater um papo ou saber das novidades.

    Quando entrei na blogosfera, eu vivia usando os ícones de redes sociais básicos mesmo. Com o tempo eu passei a apostar em imagens mais elaboradas, com efeitos legais ou até mesmo em formatos diferentes. Tudo isso para deixá-las ainda mais com minha cara e, claro, chamar atenção do visitante.

    Para ajudar vocês que não sabem onde encontrar ícones de redes sociais para o blog, eu separei alguns sites que sempre uso. Eles são meus favoritos nesse quesito e tenho certeza que serão muito úteis para vocês. Já adiciona aí nos favoritos, ó:

    Ícones de redes sociais para blog: os melhores sites!

    O Freepik é meu site favorito quando o assunto é baixar ícones de redes sociais para o blog. Isso porque há diversos modelos à disposição. E o melhor: gratuitos! Nesse site há várias ilustrações, imagens e vetores disponibilizados gratuitamente. Muitos pedem que você apenas credite o autor na página, já outros nem precisa. Além de ícones de redes sociais, você também pode pesquisar imagens para o topo do seu blog, ilustrações e até mesmo fotos para posts.

    Para encontrar o que precisa, basta utilizar a busca. Lá você pode até limitar a pesquisa para vetores, fotos, ícones, entre outros. É só digitar a palavra e escolher o formato que você deseja. Por exemplo: Facebook e buscar apenas em ícones. Fácil, né?

    O DeviantArt é outro site que eu adoro. Lá as coisas não são gratuitas sempre, então você precisa ler as descrições e, claro, creditar o autor. Porém, há muito conteúdo por lá. Você pode encontrar não só ícones de redes sociais como, também, ilustrações e materiais para seu Photoshop. Ou seja: pinceis, ações, formas, entre outros. Funciona do mesmo jeito: você usa a busca e pode segmentar o que deseja encontrar.

    O Iconfinder é mais especializado em ícones, por isso lá há mais variedade de imagens. Porém, nem todas são grátis. Se você não deseja pagar por seus ícones de redes sociais, então é só segmentar a pesquisa para “free”. Dá para procurar pelo nome que você deseja (Facebook, Twitter, Youtube, etc). Na página deles você ainda pode conferir abaixo outros ícones da mesma coleção. Legal, né?

    Follow Your Dreams na verdade é um blog que disponibiliza diversos freebies. Ou seja: coisinhas para usarmos em nossos cantinhos. Entre os materiais estão os ícones de redes sociais! Lá há tantos modelos fofos que fica difícil escolher apenas um. Para acessá-los, basta ir na página de Freebies e escolher qual você mais gosta entre os posts.

    Esse é outro site especializado onde você pode encontrar ícones de redes sociais! O Icon Archive funciona como o Iconfinder: você digita o nome do que precisa e escolhe o seu favorito. Há uma grande diversidade por lá e dá até para buscar baseado na cor que você deseja!

    O Find Icons também é especializado em ícones e funciona da mesma forma: você busca pelo nome da rede social que deseja e salva seus favoritos.

    O Flat Icon conta com uma variedade gigante de ícones de redes sociais. Você encontra diversos formatos por lá, entre eles os mais comuns, como PSD e PNG. Para achar a imagem ideal, basta utilizar a busca e ficar horas decidindo qual usar, porque realmente são muitos! haha. Ah, e nem todos são gratuitos. Alguns você vai precisar ter uma conta premium (paga) para baixar.

    Agora quero saber de vocês: curtiram as dicas de sites para baixar ícones de redes sociais? Comentem aí! E me contem quais sites mais gostam. Pode até ser algum que não listei, viu?

  • #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.

  • #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.