ttnovo: Baixar ícones de redes sociais

8 de março de 2015

Personalizar botões compartilhar + site para baixar ícones

março 08, 2015 Por Géssica Marques 10 Comentários

Olá pessoal! Estou trazendo mais um tutorial para vocês! Sabe aqueles botões de compartilhar que ficam abaixo do post? Então, irei ensiná-los a personalizá-los! Lembrando que eu estou usando o modelo Viagem (Travel).

Este tutorial eu vi no Reino Kawaii e funcionou, tanto até que uso aqui no blog. É este aqui:

São os botões de Facebook, Twitter, e Google+

Clique em Leia mais para ver o tutorial ~>

Primeiramente, salve um backup do seu template, depois você já deverá ter escolhido os ícones para colocar, não é mesmo? Mas onde você poderá encontrar este ícones. Você poderá baixar alguns ícones que eu coloquei NESTA postagem, ou acessar o site SoftIcons que só tem ícones. Na barra de pesquisa você colocar o nome da Rede social, por exemplo, que você quer procurar. Você digita "Facebook" e irá aparecer um monte de ícones do facebook e você irá escolher o de sua preferência.

Eu sugiro que baixe o tamanho 32x32px, os outros tamanhos são muito grandes.

Agora que você tem o ícone, o que resta é implementá-lo no seu blog, não é mesmo?

Vá em Modelo>Editar HTML. Clique dentro do quadro do HTML e aperte Ctrl+F. Na caixinha de busca que aparecer, você irá procurar o seguinte código:

<div class='post-footer-line post-footer-line-3'/>

Se você não conseguir encontrar este código acima, procure assim:

post-footer-line-3

O meu por algum motivo, eu só acho se eu digitar o código acima. Bom, depois de ter achado o código, você irá colar abaixo dele, o seguinte código:

<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-FACEBOOK' title='Facebook'/></a>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-TWITTER' title='Twitter'/>
</a> <a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-GOOGLE' title='G+'/></a>

No site que passei para vocês, ele dará a opção de baixar o ícone, então hospede-o em algum site. Pode até hospedar em um blog de testes mesmo.

Com o código acima, os botão irão ficar do lado direito, assim:

Mas se você quiser que os botões fique centralizado, então coloque o seguinte código:

<center> /****depois de share buttons no início***/

</center> /****antes de share buttons no final***/

Salve e visualize se está tudo correto. E pronto! Seu botão compartilhar está personalizado. Ah, eu não sei os links das outras redes sociais, então se alguém souber e quiser me passar eu agradeço.

Não esqueçam de comentar!

Continue lendo

7 de março de 2015

Baixar ícones de redes sociais Perfil do Autor no Gadget

Tutorial - Perfil do autor no Gadget + ícones de redes sociais

março 07, 2015 Por Géssica Marques 0 Comentários

Não resisti em colocar a imagem do Gancho de Once Upon a Time

Hello People! Tudo bem? Eu sim! Bom, como eu havia dito antes, estarei postando aqui tutoriais para que vocês personalizem o blog de vocês para ficarem lindos!

Este tutorial eu encontrei no Reino Kawaii. Então os devidos créditos são deles. E estarei postando aqui como vocês deverão fazer para ficar com o perfil do autor no gadget, assim como o meu.

Clique em Leia mais para saber!

O resultado será este aqui:

Gostaram? Então veja os passos de como colocar isto no seu blog. Vá em Layout>Adicionar Gadget>HTML/JavaScript e cole o seguinte código:

style>
.otitulo {/* texto welcome */
color: #C0F6F6;/* cor do texto */
font-family: 'Rouge Script', cursive;/* tipo de fonte */
font-size: 55px;/* tamanho da fonte */
text-shadow: 1px 2px 3px #1CD4D5;/* sombra do texto */
text-align: center;/* centralizado */
padding: 40px;/* posiciona o texto */
}
.afoto {/* foto do perfil */
border-radius: 50% 50% 50% 50%;/* arredondar bordas */
max-width: 300px; /* largura maxima */
height: auto;/* altura */
}
.otexto {/* descricao */
color: #AAAAAA;/* cor do texto */
font-family: 'Delius Swash Caps', cursive;/* fonte */
font-size: 14px;/* tamanho da fonte */
text-align: justify;/* justificado */
width: 300px;/* largura */
padding: 8px;
background: white;/* plano de fundo */
border: 1px dashed #C0F6F6;/* borda */
}
</style>
<div class='otitulo'>SEU TÍTULO AQUI</div>
<center><img class='afoto' src='URL-DA-FOTO-DE-PERFIL'/></center>
<center>
<div class='otexto'>
SUA DESCRIÇÃO AQUI.
<center>
<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a>
<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a>
<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a></center></div></center>

O próprio código já está auto-explicativo. Se o seu perfil ficar saindo para fora do Gadget aumente a largura dele em: Modelo>Personalizar>Ajustar Larguras>Barra Lateral Direita.

Caso o título fique enorme demais, é só você diminuir o tamanho da letra em Font-size, e alterar a fonte, em font-family.

Mas vocês devem ter reparado que eu não uso este título, não é mesmo? Eu uso o título do próprio Gadget.

Se quiser tirar o título apague os seguintes códigos:

.otitulo {/* texto welcome */
color: #C0F6F6;/* cor do texto */
font-family: 'Rouge Script', cursive;/* tipo de fonte */
font-size: 55px;/* tamanho da fonte */
text-shadow: 1px 2px 3px #1CD4D5;/* sombra do texto */
text-align: center;/* centralizado */
padding: 40px;/* posiciona o texto */
}

E depois este:

<div class='otitulo'>SEU TÍTULO AQUI</div>

Para ver códigos de cores, vocês podem consultar este site AQUI, super recomendo. Uso ele sempre!

Se você quiser que apareça os ícones de Facebook, Google+, etc. Você deverá preencher os campos abaixo do "Sua descrição aqui".

Em nome do link, por exemplo você coloca o link do seu Facebook ou da sua página, e na URL da Imagem, você coloca o link do ícone que você quer que apareça.

Se você quiser mais redes sociais do que apenas três, repita o seguinte código abaixo dos outros:

<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a></center></div></center>

Caso você não queira que apareça as redes sociais, apague o seguinte código:

<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a>
<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a>
<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a></center></div></center>

E de brinde eu irei deixar aqui alguns ícones para vocês usarem no perfil de vocês! E não se esqueçam de comentar!