Olá pessoal. Bem vindos a mais um tutorial para Blogger. Nesse tutorial vou mostrar para vocês uma forma bem prática, não só de colocar esse widget, mas também de fazer com que seu blog tenha mais visitas e seja melhor aproveitado pelas pessoas.
Divulgar seu blog nas redes sociais é a melhor forma de espalhar seu conteúdo, e conquistar o amor do público. Se você é daqueles que deseja apenas ter uma grande quantidade de visualizações, ou seja, só pensa em números, desista, coloque qualquer porcaria no seu blog e você vai ver o resultado. Mas se você deseja realmente ajudar os outros e fazer o que gosta, você está no lugar certo.
Agora paremos de conversar e começemos a trabalhar. Se você deseja colocar ícones das suas redes sociais no seu blog, você só vai precisar ter uma página do seu blog em alguma delas, como Facebook, Twitter, GooglePlus, Youtube e muitas outras, você só precisa se encaichar na certa, e logo terá resultados.
Eu trouxe dois tutoriais bem fáceis de fazer. O primeiro são ícones flutuantes para blog.
É assim que os ícones vão ficar no seu blog. Agora vamos ao código:
Para colocar esse gadget, basta ir em "Layout" > "Adicionar um gadget" > procure por "HTML/JavaScript" e cole o seguinte código dentro:
<a href="link do feed" style="position: fixed; left: 2px; top: 100px;" target="_blank">
<img border="0" heigth="48" src="link da imagem" title="Assinar Feed" width="48" /></a>
<a href="link do twitter" style="position: fixed; left: 2px; top: 150px;" target="_blank">
<img border="0" heigth="48" src="link da imagem" title="Siga-nos" width="48" /></a>
<a href="link da page" style="position: fixed; left: 2px; top: 200px;" target="_blank">
<img border="0" heigth="48" src="link da imagem" title="Facebook" width="48" /></a>
<a href="link do googlebuzz" style="position: fixed; left: 2px; top: 250px;" target="_blank">
<img border="0" heigth="48" src="link da imagem" title="Google Buzz" width="48" /></a>
<a href="link do youtube" style="position: fixed; left: 2px; top: 300px;" target="_blank">
<img border="0" heigth="48" src="link da imagem" title="Youtube" width="48" /></a>
<a href="link do myspace" style="position: fixed; left: 2px; top: 350px;" target="_blank">
<img border="0" heigth="48" src="link da imagem" title="MySpace" width="48" /></a>
<a href="link do orkut" style="position: fixed; left: 2px; top: 400px;" target="_blank">
<img border="0" heigth="48" src="link da imagem" title="Orkut" width="48" /></a>
Onde está escrito: "link do feed" você substitui pelo link da página correspondente. Onde está escrito: "link da imagem" você substitui pelo link da imagem do ícone que deve estar hospedada na web. Utilize o Picasa Web, é o mais confiável. Onde está escrito: "top: 100px;" Você vai ajustar para arrumar a distancia dos ícones do topo do Blog. Mas cuidado, ao modificar um, tem que modificar todos. Por exemplo: Se mudar o primeiro ícone de 100px para 150px; Acrescente mais 50px; em todos os outros. Para que fiquem corretos. Onde está escrito: "left" (esquerda), é o lado onde ficarão os ícones. Se quiser mudar basta escrever "right" (direita) em todos. Se quiser adicionar mais redes sociais, basta colar este código abaixo:<a href="link aqui" style="position: fixed; left: 2px; top: 450px;" target="_blank">
<img border="0" heigth="48" src="link do ícone" title="Nome da rede social" width="48" /></a> Pronto. É só salvar e ver como ficou, qualquer dúvida é só comentar aqui em baixo. _______________________________________________________________________________________ Agora para aqueles que desejam um estilo diferente, eu trouxe mais um tuto, para vocês. Essa forma de colocar os ícones também é bem simples. Eu mesmo uso no meu Blog. Basta você baixar um pack de icons de sua preferencia, hospedar os icones (eu uso:http://www.tumblr.com/themes/upload_static_file) e colar cada link no lugar certo, não tem erro.
Primeiro vá em "Layout" > "Adicionar um gadget" > procure por "HTML/JavaScript e cole o seguinte código:
<div style="margin: 5px; padding: 10px;">
<a href="LINK DA PAGINA"><img style="border: 0px solid ; width: 32px; height: 32px; float: left;"
alt=""
title=" Feed"
src="LINK DO ICONE" /></a>
<a href="LINK DA PAGINA"><img style="border: 0px solid ; padding-left: 5px; width: 32px; height: 32px;"
alt=""
title="Twitter"
src="LINK DO ICONE" /></a>
<a href="LINK DA PAGINA"><img style="border: 0px solid ; width: 32px; height: 32px; padding-left: 5px;"
alt=""
title="Youtube"
src="LINK DO ICONE" /></a>
<a href="LINK DA PAGINA"><img style="border: 0px solid ; width: 32px; height: 32px; padding-left: 5px;"
alt=""
title="Tumblr"
src="LINK DO ICONE" /></a>
<a href="LINK DA PAGINA"><img style="border: 0px solid ; width: 32px; height: 32px; padding-left: 5px;"
alt=""
title="Facebook"
src="LINK DO ICONE" /></a>
<a href="LINK DA PAGINA"><img style="border: 0px solid ; width: 32px; height: 32px; padding-left: 5px;"
alt=""
title="Google Plus"
src="LINK DO ICONE" /></a>
<br /></div> É só fazer as modificações necessárias onde está em vermelho. Abaixo coloquei o Link de um site para baixar alguns Packs de Ícones:
Bom, é isso, tomara que tenham gostado dos tutoriais. Qualquer dúvida, dicas, comentem aqui em baixo.
Obrigado e até a proxima! ---------------------------------------------------------------------------------
Video Aula :
About Dalyton Santos
SmashGames é um Site aprofundado a Tutoriais e vídeo aulas de Games da atualidade, inscreva-se no canal da SmashGames para não perder nenhum vídeo, Curta a Fanpage e receba notícias sobre Jogos e muito mais.
0 comentários:
Postar um comentário