BLOGROLL COM IMAGENS - O QUE É? PRA QUE SERVE?

24 agosto 2016

Blogroll com imagens


Você deseja criar um blogroll com imagens, mas não sabe como fazer? Atendendo os milhares de pedidos (Só que não rsrs) hoje trago um modelo com cor de fundo, e legenda com efeito hover (ao passar o mouse). A imagem acima ilustra perfeitamente como será.

Blogroll é uma lista de blogs que o blogueiro segue e recomenda para os seus leitores, que geralmente fica na lateral ou em uma página específica do blog. Alguns preferem chamar essa listinha de "meus favoritos", mas você também pode criar uma lista de blogs afiliados, com uma troca de banners, para aumentar seu tráfego e conquistar novos públicos. 

Então, chega de conversa e vamos aprender a criar um Blogroll com imagens:



Primeiro, acesse o painel do blogger e procure por: 
Layout - Adicionar um Gadget - HTML/JavaScript e cole o código abaixo.
<div class="blogroll"><img src="url-da-imagem" onmouseout="url-da-imagem-novamente';" /><a href="endereço-do-blog ">nome-do-blog</a></div>

<div class="blogroll"><img src="url-da-imagem" onmouseout="url-da-imagem-novamente';" /><a href="endereço-do-blog ">nome-do-blog</a></div>

<div class="blogroll"><img src="url-da-imagem" onmouseout="url-da-imagem-novamente';" /><a href="endereço-do-blog ">nome-do-blog</a></div>

<div class="blogroll"><img src="url-da-imagem" onmouseout="url-da-imagem-novamente';" /><a href="endereço-do-blog ">nome-do-blog</a></div>

<div class="blogroll"><img src="url-da-imagem" onmouseout="url-da-imagem-novamente';" /><a href="endereço-do-blog ">nome-do-blog</a></div>

<div class="blogroll"><img src="url-da-imagem" onmouseout="url-da-imagem-novamente';" /><a href="endereço-do-blog ">nome-do-blog</a></div>

<div class="blogroll"><img src="url-da-imagem" onmouseout="url-da-imagem-novamente';" /><a href="endereço-do-blog ">nome-do-blog</a></div>

<div class="blogroll"><img src="url-da-imagem" onmouseout="url-da-imagem-novamente';" /><a href="endereço-do-blog ">nome-do-blog</a></div>

<div class="blogroll"><img src="url-da-imagem" onmouseout="url-da-imagem-novamente';" /><a href="endereço-do-blog ">nome-do-blog</a></div>
<style>
div.blogroll {
float: left;
width: 20%;
margin: 8px;
padding: 5px;
position: relative;
display: block;
background: #FFFFFF;
}
div.blogroll a {
text-align: center;
font-size: 10px;
color: #151515;
font-family: 'Montserrat', sans-serif;
text-indent: 0;
width: 70px;
float: left;
}
div.blogroll a:hover {
color: #F7819F;
}
div.blogroll img {
width: 70px;
}
</style>


#AtençãoBlogueira: Os elementos que podem ser modificados foram sinalizados, basta ter atenção quando for personaliza-los. Sugiro que sua lateral tenha no máximo 320 de largura para que o blogroll com imagens não tenha erros. 

Feito isso, procure por <head> e abaixo dele, cole:

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'/>

Visualize e se estiver tudo ok, salve. O código abaixo representa uma imagem:

<div class="blogroll"><img src="url-da-imagem" onmouseout="url-da-imagem-novamente';" /><a href="endereço-do-blog ">nome-do-blog</a></div>



Caso queira acrescentar mais imagens no blogroll, basta dar espaço e colar o código acima, ou retirar se esse for o seu desejo. O tamanho das imagens são 70 de largura e 39 de altura, mas caso tenha um conhecimento em css pode aumentar os valor e ir adaptando a folha de estilo do blogroll com imagens a seu gosto.

Conclusão:

Blogroll é uma forma carinhosa de divulgar seus blogs favoritos aos seus leitores, que talvez nunca os conheceriam. E pode ser também uma ótima forma de criar uma network e aumentando seus contatos com outras blogueiras. Você pode aproveitar e usar esse blogroll com imagens  para criar uma lista de afiliados. Todos os participantes colocariam a lista de blogroll em seus blogs e consequentemente o numero de visitantes do seu blog aumentaria. 


E se você gostou desse tutorial e não quer perder os próximos, é só seguir o blog em "Faça parte" que fica na lateral do blog, e curtir nossa página do facebook e ficar por dentro das novidades que sempre posto primeiro lá. Um mega beijo e até o próximo post!

6 comentários:

  1. Adoreeeeeei seu blog, achei tudo muito lindo e organizado, estou seguindo aqui pra não perder mais nada hehe
    http://velhosoutonos1.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada <3 Eu fico muito feliz em ter você aqui.
      Seja bem-vinda! Bjs :*

      Excluir
  2. estava a procura disso, vou tentar fazer com o meu layout, adorei o seu blog flor. beijos e sucesso.

    Taynara Mello | Indicar Livros
    http://www.indicarlivros.com/

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado <3
      Bjão e sucesso pra vc tbm!

      Excluir
  3. Respostas
    1. Faça o teste e depois me conta o que achou!
      Grande beijo :*

      Excluir