Ju Duarte

Tag: blogs

  • #Comofaz: encurtador personalizado de links

    Esses dias, enquanto procurava algumas ferramentas novas para o blog, encontrei um tutorial super interessante e útil, que ensinava a personalizar links encurtados. Curti tanto a ideia que, além de já usar esse meio, resolvi ensinar aqui. Como perdi o tutorial que me baseei (tinha colocado o link no Twitter mas não achei o bendido tweet!), vou ajudá-los a fazer do jeito que eu me lembro. Se eu achar o link de novo, atualizo esse post, viu?

    ATUALIZAÇÃO: me mandaram o link do tutorial pelos comentários e, como eu tinha prometido que assim que o encontrasse eu o postaria aqui, cá estão os créditos. Tudo o que está no post eu aprendi por este tutorial do Variedades e Dicas. Obrigada ao anônimo que me enviou o link 🙂

    Antes de tudo, você precisa entrar no Dot.Tk ou em qualquer outro site que disponibilize domínios próprios. Vou usar esse porque, além de ser gratuito, o link é curtinho. E é o que queremos, certo?
    Coloque o nome do seu domínio na caixinha. No caso do JDB, usei juliedb. Como o objetivo é deixar o link pequeno, abreviei o nome do blog. Você pode fazer isso com o seu usando iniciais ou abreviando só algumas palavras, como fiz com o “de Batom”. Clique em go e, caso o domínio esteja disponível, irá abrir esta página:
    Em Use o seu novo domínio, marque a caixinha de Use DNS. Embaixo, onde está Nome do Anfitrião, você não muda nada. Apenas cole o número a seguir na caixinha Endereço IP: 69.58.188.49.
    Depois, em Comprimento do registro, mude para 12 meses (tempo que seu domínio irá ficar registrado). Digite as letras que aparecem na imagem, clique em Registro e escolha a maneira como você vai fazer login (ou usando uma rede social ou com um e-mail). A Dot.tk vai enviar uma mensagem para seu e-mail e, enquanto você não confirmar, não será possível acessar sua conta, apesar do domínio ficar guardado para você.
    Quando tudo estiver certinho com o Dot.tk, vá para o Bitly. Crie sua conta no site ou entre com uma rede social. 
    No canto superior direito, clique onde está o nome da sua conta e, depois, em Settings. 

    Em Advanced, clique em Personal. Na caixinha, digite o domínio que você registrou (sem o www) e depois clique em Add.
    Na próxima página, clique em Verify. Se na próxima aparecer algum erro, ignore e clique em Check back. Só não clique em Start Over, porque você terá que fazer tudo de novo.
    Para o Bitly aceitar o novo registro, ele demora um pouquinho. Quando tudo estiver ok, a opção do seu novo domínio estará em Advanced. Assim:
    Em Short Domain, selecione a opção do seu link novo. No caso, o meu é o juliedb.tk. Em Custom Short Domain Root Redirect, onde está a caixinha marcada, digite o endereço do seu blog. Assim, quando alguém digitar a url encurtada (ou seja, www.juliedb.tk), ela vai parar no seu blog e não no Bitly!
    Espero que tenham curtido esse “plus” para o blog de vocês. Assim, fica muito mais bonitinho compartilhar os novos posts no Facebook, né? Para isso, basta colar o link original no Bitly lá em cima, onde está escrito Paste a link here. Depois, copiem o link encurtado e é só colar nas suas redes sociais favoritas! Querem um exemplo?
    www.juliedebatom.com > www.juliedb.tk/11bOoIx
    Agora quero saber de vocês: o que acharam do tutorial? Gostaram? Se tiverem dúvidas, não esqueçam de deixá-las nos comentários que eu respondo por aqui mesmo. E que tal compartilharem o blog de vocês por aqui usando os links encurtados, hein? haha 🙂

  • Projeto Up: layouts para seu blog

    Nome escolhido, tema decidido e blog criado. Agora, para ele ir ao ar – antes dos posts -, só falta uma coisa: escolher que cara ele vai ter!
    Se você não entende de Photoshop e não faz ideia do que é HTML, a dica é usar os layouts que são disponibilizados na internet. Alguns são pagos (mesmo já finalizados) e outros, de graça. Como a ideia é ajudar quem está no começo do blog, o conselho é optar por esses gratuitos. Principalmente se você não tem tanta grana pra investir, certo?
    Por isso, separei meus modelos favoritos de layouts gratuitos (para Blogger) que estão pela internet. Vale visitar os sites que disponibilizam e procurar por outros, também. Ah, e não esqueça: escolha o tema que tem mais a ver com o seu blog. A cara do seu espaço na web é super importante, viu? Será a marca registrada do seu cantinho! (Para ver o layout, é só clicar na imagem!)
        

    VINTE E POUCOS

        



    EVELYN’S PLACE

        
    Todos os layouts são para blogs femininos. Se vocês quiserem um post com layouts básicos e/ou unissex, ou até mesmo para WordPress, comentem aí!
    Agora quero saber de vocês: curtiram os layouts? Conhecem outros sites que também disponibilizam? Conta pra gente!

  • Projeto Up: O design do blog

    Depois de dar várias dicas para começar seu blog na teoria (confira), agora é hora de começar a colocar a mão na massa! Para iniciar a parte prática – que, acreditem, é a mais legal! -, resolvi trazer dicas para o design do blog.
    Acredito que 90% das perguntas que recebo pelas redes sociais é sobre o design. Talvez essa seja a parte mais difícil de acertar, afinal é ela que causa a primeira impressão do blog e até o grau de confiança que o leitor vai depositar nos seus posts e nas suas opiniões.
    Escolher o layout, a imagem e as cores do blog parece super fácil… Mas não é! As vezes, um blog tem ótimo conteúdo, mas perde leitores simplesmente pelo fato da escolha errada no design. Por isso é bom caprichar ou escolher um tema caprichado para seu blog.
    ESCOLHENDO AS CORES CORRETAS
    Escolher a paleta de cores do seu blog deve ser a primeira tarefa. O ideal é usar cores que tenham relação com o conteúdo do blog ou até com o seu estilo. Assim, quando o leitor entrar na sua página, ele já vai saber, mais ou menos, o que vai encontrar nos posts e até se ele se identifica ou não com eles.
    Além disso, é ideal saber dosar os tons. Deixe sempre os mais claros para os fundos, assim o background não fica chamando mais atenção que os textos dos posts. Falando nisso: uma ótima dica é usar o branco para a coluna das postagens e o preto (ou variações do preto) no texto. Assim o leitor se sente mais confortável ao ler e não fica com os olhos cansados. E quanto mais tempo o leitor ficar no nosso blog, melhor, né?
    Um erro que eu já vi muitos blogs por aí cometendo é usar cores muito escuras de fundo e outras coloridas no texto. Assim, por exemplo Além de ficar feio, fica cansativo para quem lê. Então, como eu disse antes, prefira as cores claras no fundo e, no texto, tons de preto. São as cores que mais ajudam na leitura.
    #FIKDIK: No site Colours Lovers há várias dicas de paletas de cores. Assim você não fica na dúvida e não sente aquele medo de errar, né?
    A ESCOLHA DA IMAGEM DE TOPO
    A imagem do topo do blog é a identidade dele. Por isso, tente escolher imagens e cenários diferentes, que quase nenhum blog usa. Quanto mais inédito for, melhor.
    Separei algumas imagens bem legais para vocês. Para vê-las em tamanho maior, é só clicar nelas. 
    #FIKDIK: Aqui no JDB tem um post com sites para encontrar essas imagens. Confira!
    Outro quesito que deve ser levado em conta é a qualidade. Se você não sabe criar nenhuma montagem legal, peça a um amigo. Ou, então, use um background de estampa que combine com o estilo do blog. Há vários lindos por aí e com vários desenhos diferentes (florais, de caveirinha, de memes, entre outros).
    Exemplo de um blog sem imagem no topo (Vinte e Poucos)
    Você pode encontrar esses fundos pesquisando por pattern em sites como Pinterest, DeviantArt, We Heart it e Favim. Basta colocar, também, o tipo que você quer. Por exemplo: floral pattern, skull pattern, etc.
    Se for escrever o nome do blog direto na imagem, a dica é escolher fontes diferentes também (ou seja: nada de Comic Sans). Sites como o Dafont, FontPark e FontPalace possuem uma variedade incrível para download. É só escolher a sua e baixar. Ah, e a dica das cores vale pra cá também, viu?
    Separei minhas fontes favoritas para ajudar vocês. Algumas, inclusive, já usei em layouts do JDB. Fim do mistério! haha.
    Fonte Wendy Medium (download)
    Fonte Ballpark Weiner (download)
    Bebas Neue (download)
    Shithead (download)
    DEPOIS DAS DICAS…
    O design do seu blog já está (quase) pronto! Se você manja de HTML e CSS, já pode começar a programar seu layout e publicá-lo. Se não… Fique ligado no próximo post!
    Agora quero saber de vocês: curtiram o segundo post do projeto Up? Têm alguma sugestão para as próximas postagens? Conta pra gente!

  • Para seu blog: 10 links de tutoriais super úteis

    Sempre que coloco algo diferente no blog, recebo muitas perguntas de como fiz e onde encontrei o tutorial. As vezes, até pedem para ensinar aqui no JDB mas, como há vários links por aí, acabo achando que o meu não vai fazer tanta diferença (tô certa? haha). Tanto que trago para o JDB os tutoriais que não encontro pela internet ou que fiz (quase) sozinha.
    Porém, para não deixar ninguém na mão e nem com dúvidas de como fazer algumas coisas legais no blog, resolvi juntar 10 links de tutoriais que com certeza vão ajudar vocês. Se gostarem, posso trazer um post assim toda semana ou, sei lá, com um tema diferente (por exemplo: tutoriais só de Photoshop). O que acham?
    Agora quero saber de vocês: curtiram o post? Conta pra gente! Ah, e nesses blogs que listei acima, há vários outros tutoriais super interessantes. Sempre que quero aprender algo, procuro neles! #fikdik

  • Projeto Up: dicas para começar seu blog

    Muitas leitoras me procuram via redes sociais para tirar dúvidas sobre blogs ou até perguntar se o nome ou o layout de suas páginas estão bons. E foi me inspirando em todas essas mensagens que criei o projeto Up. Vocês, que também têm blogs, vão amar!
    O Projeto Up vai funcionar assim: todo mês vou trazer dois posts com dicas para blogs. Elas vão englobar dicas para criar e manter seu cantinho, dicas de design, tutoriais e, se tudo der certo, dicas e depoimentos de blogueiras mais experientes. A ideia é ajudar a todas vocês com seus blogs. E, claro, melhorá-los sempre!
    Como eu não queria que o primeiro post fosse só uma apresentação, resolvi unir o útil ao agradável e começar com o primeiro tópico, super básico e clichê, mas que muitas blogueiras ainda têm dúvidas. 
    O INÍCIO DO BLOG
    Começar um blog não é só escolher sua hospedagem e fazer o domínio. Para quem quer seguir adiante com o cantinho, há algumas dicas que facilitam – e muito! – nossa vida na internet. Principalmente quando não temos noção do que falar, como abordar o tema e que, em muitos casos, qual nome escolher.
    PRIMEIRO PASSO: A ESCOLHA DA PLATAFORMA
    Antes de tudo: o que é plataforma? Bom, a plataforma é onde todos os arquivos (imagens, vídeos, posts e etc) do seu blog serão guardados. Ela vai armazenar todo o conteúdo que você colocar na sua página, como se fosse uma pastinha com tudo o que você criou dentro. E, ao digitar o endereço do seu blog (por exemplo, juliedebatom.com), você “abre” essa pasta. Para vocês entenderem melhor, a plataforma é a pasta em si e o domínio, o nome dela.
    Qual escolher?
    Há duas plataformas que são as mais populares: o Blogspot e o WordPress. Ambos são gratuitos e já te fornecem o domínio (no primeiro caso, ele fica nomedoblog.blogspot.com e, no segundo, nomedoblog.wordpress.com). 
    No começo, quando criei o Pronta para Crescer, eu usava o WordPress. Apesar de preferir ele, aconselho que comecem pelo Blogspot. Além de ser mais simples, ele é mais fácil de personalizar (afinal, usa o HTML em seus layouts) e até de gravar o nome. Lembro que era uma complicação para fazer a pessoa entender o “wordpress.com”.
    O WordPress usa o PHP, que é uma linguagem de programação mais complicada. Por isso, quem não manja muito de códigos, vale ficar no Blogspot. O bom do WordPress é que nele há várias opções de plugins e dá para criar mais funções. Porém, é preciso entender um pouco de linguagem PHP.
    SEGUNDO PASSO: A ESCOLHA DO NOME
    O nome do blog é a primeira impressão que fica. É lendo o endereço que a pessoa vai decidir, no primeiro momento, se visita ou não. Por isso, além de ter um nome que resume o conteúdo do blog, é bom escolher um bem diferente e pessoal.
    Nada de muita inspiração: Isso já te faz riscar da lista qualquer ideia com “quinze”, “just”, “depois dos”, “le blog de” e coisas que lembrem outros blogs famosos. Não é nada legal perceber que a blogueira copia (ou se inspira) em um blog conhecido até no nome, né?
    I speak English, but…: Outro item que vale destacar é o nome do blog em inglês. Nem todo mundo conhece o idioma e, às vezes, nem a gente sabe pronunciar. Por isso, se quiser usar alguma palavra gringa, opte pelas fáceis (como be, by, girl, only, etc). Eu prefiro os nomes em português (até por ser mais fácil de gravar), mas não acho que seja uma regra criar endereços só em nossa língua, né? O Just Lia tá aí pra provar isso!
    Assim não deu, mas aaaaaaassim dá: Há, também, alguns blogs que parecem querer testar nossa memória. Estes colocam no link letras repetidas ou, até, em exagero. Exemplos bobos como muuuundodajulie ou eueomundoeoespelho mostram o que quero dizer. Quanto mais fácil – e menos poluído – o nome for, melhor.
    Simplicidade, sempre: Por isso, quanto mais simples, reduzido e fácil for o nome do seu blog, melhor. Tente colocar nele indícios dos assuntos que serão abordados. Tente não usar aqueles “pré-definidos”, como “eu e eu mesma”, “mundo da fulana” ou “amo moda”. Seja criativa e tente fugir do comum.
    TERCEIRO PASSO: O QUE POSTAR?
    Eu sou a favor do blogueiro só postar sobre assuntos que ele entende, gosta ou curte ler artigos a respeito. É super chato você entrar em um blog de, por exemplo, fotografia e o dono kibar posts de sites famosos. Acho que blogs servem para, antes de tudo, mostrar a opinião do autor. 
    Por isso, escolha assuntos que você curte. Se gosta de decoração, fale sobre decoração. Você pode abordar outros temas que gosta, mas tente se focar em poucos e deixe os outros como um plus. Acredite: os leitores vão se lembrar do seu blog sempre que quiserem ler sobre, como citei no exemplo, decoração. Mesmo que seu blog fale sobre culinária, fotografia e comportamento.
    QUARTO PASSO: CUIDADO COM A ESCOLHA DO CONTEÚDO
    Copiar outros sites e blogs não é nada legal. Como eu disse, gosto de blogs onde o autor deixa sua opinião e sua personalidade nos posts. E, só para reforçar: não existem blogs que se dão bem por aí copiando as matérias da Capricho, né?
    Isso não te impede de pesquisar para conhecer o assunto. Mas, leia os artigos, guarde as informações e anote as mais importantes. Depois, fale sobre aquilo que se encaixa ao público do blog e, claro, com a sua visão e seus gostos. É assim que os leitores começam a se identificar e, consequentemente, voltar à sua página.
    E lembre-se sempre: tenha o mínimo de erros gramaticais. Não tem nada mais chato que entrar em um blog e ver posts com milhares de erros de português. Ninguém é perfeito e ninguém engoliu uma gramática nem um dicionário. Mas o Google está aí para tirar as duvidas, né? E todo mundo o usa naquela hora onde a gente não sabe se é com s, com ss, com c ou com ç.
    QUINTO PASSO: BLOG CRIADO, CADÊ FAMA?
    Ok, o título é idiota e o tema iria ficar para depois. Mas sei que muitas pessoas por aí visitam o Depois dos Quinze, o Just Lia, o Le Blog de Betty, o Borboletas na Carteira, entre outros, e vão correndo criar um blog para ganharem mimos, cinco mil amigos no Facebook e fãs. Se você é uma delas, há duas opções: desistir do blog ou desistir da fama.
    Eu vejo o blog como um diário que eu personalizo do meu jeito e ilustro com imagens. Também o vejo como uma revista – o que me faz querer que ele esteja sempre ok com o design e com a gramática. Quando a gente enxerga nossa página assim, de um jeito pessoal, começamos a postar quando sentimos necessidade. Cuidamos dele como uma via de desabafar ou falar sobre algo que curtimos. E não como uma via de perfil lotado no Facebook.
    Por que estou falando isso? Porque fama não chega do dia pra noite. E, mesmo que chegue, não vale tanto quanto as 50 visitas diárias – mas sinceras e prestativas – que ganhamos no começo. Eu agradeço sempre àqueles que visitam o JDB e vibro a cada novo curtir no Facebook e a cada comentário no blog. 
    Uma vez, quando a fanpage do blog completou 1000 curtidas, foram no meu Ask “me zoar” porque eu ficava feliz por “pouco”, enquanto outras páginas tinham 10x mais. No fundo, nem me importei muito, pois nunca imaginei que, um dia, chegaria aos 100 leitores. Quem diria aos 1000? E acredito que essa é a diferença entre quem faz blog por amor e quem faz blog por fama, dinheiro e mimos. O primeiro não se importa com números, mas com atenção e carinho. O segundo já é bem ao contrário. 
    Isso acaba refletindo até nos leitores: outro dia vi alguns comentando em um blog aí com perguntas de quando seria o próximo sorteio. Comecei a ler e a refletir. Aí passei as páginas do tal blog e li os posts. 90% era divulgação de lojas e sorteios. Os outros 10% eram posts superficiais, do tipo que tem mais imagens do que conteúdo próprio.
    Onde quero chegar com esse item (que é o maior de todos)? Não crie uma conta só por ter números. Crie porque você sente necessidade de compartilhar seu mundo, sua personalidade e seus gostos. Porque, quando a gente faz por amor, as coisas fluem melhor. E, sabe? Até transparece no modo de postar e divulgar, na atenção que você dá aos leitores, no quanto você se importa com as atualizações e o quanto você leva seu blog a sério.
    DEPOIS DAS DICAS…
    Seu blog está pronto para ir ao ar. Pelo menos, teoricamente. Nos próximos capítulos do projeto, vocês vão conferir ideias de layouts, tutoriais e dicas para divulgar o blog. Não percam!
    Agora quero saber de vocês: curtiram a ideia do Up? Têm alguma sugestão para as próximas postagens? Conta pra gente!

  • Comofaz: sidebar com gadgets diferentes

    Uma das perguntas que mais recebo no meu Ask é sobre a sidebar do Julie de Batom. Já recebi vários pedidos de tutorial e prometi que, depois dessa correria de fim de ano, iria atender. Sei que vocês gostam quando faço posts ensinando coisas legais para o blog e quero tentar trazer vários este ano. Por isso, continuem mandando suas sugestões, viu?
    O tutorial é bem simples e fácil. Acredito que vocês vão conseguir fazer rapidinho e com poucas dúvidas. Além disso, o resultado fica bem bonito. E, claro, diferente.
    Antes de tudo, você precisa criar em um programa de edição de imagens (Photoshop, Photofiltre, etc) o fundo da sua sidebar. Você pode criar vários (um para o perfil, outro para as redes sociais, etc) e ir personalizando aos poucos. Vale lembrar que você precisa criar no tamanho certinho, viu?
    Para ajudar vocês, vou criar um no Photoshop. Ele será simples, só para usá-lo no tutorial, mesmo. Vocês podem usar outras cores, outros fundos e outras formas. Tudo depende de como vocês querem a lateral de vocês.
    Bom, vamos lá:
    1. Abra o Photoshop e crie um novo documento com o tamanho desejado. O meu vai ter 200px de largura por 250px de altura.
    2. Agora nós vamos criar a base do fundo. Vou usar a forma de retângulo com as pontas arredondadas. Vai ficar assim:
    3. Vamos colocar um background no retângulo para deixar nosso fundo legal? Primeiro, você precisa encontrar um que você goste. Eu vou usar esse.
    4. Copie a imagem que você quer e cole em cima do retângulo desenhado. Na camada da imagem que você acabou de colar, clique com o lado direito do mouse e marque a opção Create Clipping Mask.
    5. Aperte ctrl + T e, com a tecla shift pressionada, vá diminuindo (pelo quadradinho da ponta) a imagem até ficar do tamanho que você quer. Assim:
    6. Depois de posicionar a imagem certinho (com a ferramenta Mover – atalho: V), você pode diminuir a opacidade para deixar o fundo mais claro. 
    7. Agora nós vamos criar o título do widget. Para isso, aperte ctrl + shift + N para criar uma nova camada no Photoshop. Com a ferramenta de shape (atalho: U), vamos fazer o fundo usando o retângulo. Assim:
    8. Com a ferramenta de texto (atalho: T), vamos escrever o título. Vou fazer esse como se fosse uma mensagem de boas-vindas. 
    Pronto! Depois é só salvar a imagem em PNG e hospedá-la em algum site (Imageshack, no Blogspot, etc). Guarde o link dela, pois vamos precisar.
    Agora nós vamos colocá-la no Blogspot. Antes de tudo, faça um backup do seu layout só por segurança.
    1. Vá em Layout e adicione um gadget de HTML/Javascript. Lembrando que você precisa usar sempre este!
    2. Deixe o título sem nada e, no conteúdo, comece por:

    <div id=”sidebar-pesonalizada1″>

    3. Abaixo, coloque o que você quer: textos, imagens, links… E, quando terminar, finalize com </div>. O meu ficou desse jeito:

    <div id=”sidebar-pesonalizada1″>
    Hey, meninas! Obrigada pela visita ao #JDB. Espero que vocês gostem do conteúdo, pois ele é feito especialmente para vocês. Ah, e se gostarem do blog, não esqueçam de deixar sua marquinha. Ela é muito importante pra gente, viu? 🙂 Quem gostar, pode curtir a nossa página no Facebook para ficar por dentro das novidades do JDB. Agora, que tal curtir os posts? Há vários novos e legais pra vocês. Beijos, Julie.
    </div>

    4. Salve seu gadget, posicione no local desejado e vá para Modelo.

    5. Clique na opção Editar HTML, procure por ]]></b:skin> e, antes dele, cole isso:
    #sidebar-pesonalizada1{
    background-image:url(linkdaimagem);
    width: 180px;
    height: 210px;
    padding-top:40px;
    padding-left: 10px;
    padding-right: 10px;
    }
    6. Agora vamos às modificações:
    Em vermelho: Aqui você vai colar o link da imagem. No meu caso, é este: http://3.bp.blogspot.com/-ohiKkCtIQCM/UORoCmRYcOI/AAAAAAAAFS8/LtZ26nEgIvQ/s1600/sidepronta.png
    Em laranja: Nesta linha, você precisa arrumar a largura da imagem. Vocês deve estar estranhando o motivo do 180 e não 200, né? Acontece que eu coloquei 10px de margem na direita e na esquerda. Quando a gente faz isso, precisamos diminuir da largura. Se não, a imagem começa a duplicar e ficar errada. Como usei duas vezes o valor 10, tive que diminuir 20 do total. Ou seja: 200 – 20 = 180px. Se fosse 15, teria que tirar 30. E assim vai…
    Em verde: Aqui você arruma a altura. O número está diferente pelo mesmo motivo acima: como coloquei 40px de margem do topo, tive que diminuir do número total. Ou seja: 250 – 40 = 210.
    Em rosa: Essa linha é para você colocar a margem do topo. Como nós fizemos um título no fundo, nós não queremos nenhum texto em cima dele, né? No meu caso, o 40px deu certinho. Isso depende da imagem que você fez. Vale ir testando até ficar ok!
    Em verde: Nesta linha a gente troca a margem da esquerda. 
    Em roxo: E, aqui, nós trocamos a margem da direita.
    O meu ficou assim:
    #sidebar-pesonalizada1{
    background-image:url(http://3.bp.blogspot.com/-ohiKkCtIQCM/UORoCmRYcOI/AAAAAAAAFS8/LtZ26nEgIvQ/s1600/sidepronta.png);
    width: 180px;
    height: 210px;
    padding-top:40px;
    padding-left: 10px;
    padding-right:10px;
    }
    Agora, clique em visualizar para ver se está tudo ok. No meu blog de testes, ele ficou deste jeito:
    Esse fundo branco era o fundo da lateral, já. Para que ele não fique atrapalhando nossos fundos diferenciados, nós vamos ter que deixar a sidebar transparente. Para isso, siga as instruções abaixo:
    1. Procure no seu código por #sidebar-wrapper { e APÓS onde estiver background-color ou background-image, coloque transparent. Vai ficar assim:
    background-color: transparent;
    2. Depois, procure por .widget-content { e, após o background-color ou background-image, coloque transparent. 
    Caso o seu layout não tenha essa parte, você pode adicionar (antes de ]]></b:skin>):
    .widget-content {
    background-color: transparent;
    }
    Desta vez sim está tudo certinho!
    Pronto! Agora você tem uma parte da sidebar personalizada. Se quiser fazer outros (como, por exemplo, o perfil, as redes sociais, a caixinha de curtir do Facebook…), basta seguir os mesmos passos e trocar apenas o nome da div (ou seja, o sidebar-pesonalizada1). Você pode criar fundos diferentes e deixar tudo do seu jeitinho. Legal, né?
    Vale lembrar que, se vocês tiverem alguma dúvida com relação ao tutorial, basta perguntar lá no meu Ask ou aqui nos comentários. E, se conseguirem, me avisem, viu? Quero ver tudo o que vocês fizeram <3
    E vocês? Curtiram o tutorial? Vão fazer? Conta pra gente!

  • 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!

  • Top 5: blogs de variedades!

    Uma coisa que adoro fazer no meu tempo livre é sair procurando novos blogs e devorá-los (no bom sentido). Gosto de descobrir blogueiros diferentes, com outros estilos e assuntos. Por isso, trouxe para vocês os cinco blogs de variedades que adoro. Assim vocês conhecem novos endereços para favoritar e, claro, acompanhar! Bora?
    Conteúdo G é o blog da Gabe Valente, onde ela dá dicas de moda, maquiagem, fotografia e também fala sobre anime, séries e coisas que gosta.
    Hey, London! foi criado pela Kamylla com a vontade de mostrar que uma viagem não consiste apenas em arrumar os documentos e as bagagens, pegar o avião e um abraço. Além disso, o blog também é uma estratégia para não abandonar seus planos de chegar à terra da rainha. 
    Jornal dos Dias Doces é o cantinho da Scarlat. Lá, além de dar algumas dicas, ela também conta um pouco sobre sua vida e posta suas (lindíssimas!) fotos.
    Quase Descolada é o espaço da Larissa, onde ela dá dicas de comportamento, fala sobre música, decoração, entre outros. O blog é super fofinho, tem um design bem inspirador e cute. 
    Vinte e Poucos é o blog da Ann, onde ela fala sobre moda, fotografia, dicas, entre outros. Lá a blogueira também posta fotos de seus looks, que são super fofos e estilosos!
    Vale lembrar que o Top 5 está em ordem alfabética, viu? No próximo, trago os meus blogs de texto favoritos <3
    E vocês? Curtiram o post? Já conheciam os blogs? 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!