Como criar um blogroll
Oi gente ♥ Hoje eu vou te ensinar como fazerum blogroll. Antes de tudo vou te pedir pra ler esse post inteiro antes de fazer. Não é difícil, mas você tem que prestar atenção pois eu vou te dar algumas opções. E pra você entender melhor, é preciso ler tudo primeiro. Beleza? Lê primeiro, faz depois.
O código desse blogroll vai servir tanto pra barra lateral quanto pra uma página estática. Você vai poder usar foto das blogueiras, ou o banner dos blogs. Te darei a opção com e sem tooltip. E a ideia é você não precisar editar e cortas as imagens todas do mesmo tamanho pra fazer, então é bem mais prático. 
Se você quiser ter uma noção de como fica, eu coloquei no rodapé do blog (lá embaixo de tudo).

O Html 

Você vai escolher a opção que você quer. Com tooltip (aparece o nome quando passa o mouse mais rápido, e mais bonito, como no meu). Sem o tooltip (aparece o nome de forma simples).

Opção 1. Com tooltip: 

Blogroll com tooltip
<div class=”blogroll”>

<li><a href=”LINKDOBLOG” target=”_blank”><img src=”URLDAIMAGEM”  onmouseover=”ddrivetip(&#39;NOMEDOBLOG&#39;)” ; onmouseout=”hideddrivetip()”/></a></li>

<li><a href=”LINKDOBLOG” target=”_blank”><img src=”URLDAIMAGEM”  onmouseover=”ddrivetip(&#39;NOMEDOBLOG&#39;)” ; onmouseout=”hideddrivetip()”/></a></li>

<li><a href=”LINKDOBLOG” target=”_blank”><img src=”URLDAIMAGEM”  onmouseover=”ddrivetip(&#39;NOMEDOBLOG&#39;)” ; onmouseout=”hideddrivetip()”/></a></li>

<li><a href=”LINKDOBLOG” target=”_blank”><img src=”URLDAIMAGEM”  onmouseover=”ddrivetip(&#39;NOMEDOBLOG&#39;)” ; onmouseout=”hideddrivetip()”/></a></li>

<li><a href=”LINKDOBLOG” target=”_blank”><img src=”URLDAIMAGEM”  onmouseover=”ddrivetip(&#39;NOMEDOBLOG&#39;)” ; onmouseout=”hideddrivetip()”/></a></li>

<li><a href=”LINKDOBLOG” target=”_blank”><img src=”URLDAIMAGEM”  onmouseover=”ddrivetip(&#39;NOMEDOBLOG&#39;)” ; onmouseout=”hideddrivetip()”/></a></li>

</div>
Opção 2. Sem tooltip: 

Blogroll sem tooltip
<div class=”blogroll”>

<li><a href=”LINKDOBLOG” title=”NOMEDOBLOG“ target=”_blank”><img src=”URLDAIMAGEM” /></a></li>

<li><a href=”LINKDOBLOG” title=”NOMEDOBLOG” target=”_blank”><img src=”URLDAIMAGEM” /></a></li>

<li><a href=”LINKDOBLOG” title=”NOMEDOBLOG” target=”_blank”><img src=”URLDAIMAGEM” /></a></li>

<li><a href=”LINKDOBLOG” title=”NOMEDOBLOG” target=”_blank”><img src=”URLDAIMAGEM” /></a></li>

<li><a href=”LINKDOBLOG” title=”NOMEDOBLOG” target=”_blank”><img src=”URLDAIMAGEM” /></a></li>

<li><a href=”LINKDOBLOG” title=”NOMEDOBLOG” target=”_blank”><img src=”URLDAIMAGEM” /></a></li>

<li><a href=”LINKDOBLOG” title=”NOMEDOBLOG” target=”_blank”><img src=”URLDAIMAGEM” /></a></li>

<li><a href=”LINKDOBLOG” title=”NOMEDOBLOG” target=”_blank”><img src=”URLDAIMAGEM” /></a></li>

<li><a href=”LINKDOBLOG” title=”NOMEDOBLOG” target=”_blank”><img src=”URLDAIMAGEM” /></a></li>

</div>
• No bloco de notas, altere os locais indicados: 
LINKDOBLOG – É o link do blog, a url. Por exemplo: http://butlariz.com (tem que ter o http://)
NOME DO BLOG – O nome do blog. Por exemplo: Butlariz
URLDAIMAGEM – É o endereço da imagem que você quer colocar.
• Como conseguir o endereço da imagem? 
– Se a imagem já estiver no blog da pessoa, basta clicar com o lado direito do mouse, clicar em copiar endereço da imagem e depois colar.
– Se você quiser colocar o banner/cabeçalho/logo da pessoa, não aconselho pegar a url direto do blog dela, pois essa imagem é enorme e dificultará no carregamento do seu blog. Então nesse caso, eu aconselho você baixar a imagem no computador, diminuir o tamanho (pra uns 400px de largura acredito que já está bom).
– Se você tem a imagem no seu computador, basta entrar no site imgur.com, clicar em upload, carregar as imagens desejadas e depois pegar o endereço delas. 
– Dica extra: Procure usar imagens de proporções parecidas, por exemplo: ou todas quadradas, ou todas retangulares. Quanto mais diferente for, mais difícil é arrumar.
Agora espera um pouquinho com esse código no seu bloco de notas, e vamos pro CSS

O código CSS

Copie o código abaixo e cole no bloco de notas (depois de todo o código que já ta lá mesmo);
<style>
#dhtmltooltip{position: absolute; padding: 5px; background-color: #000; left: -100px; color: #fff; text-transform: uppercase; font-weight: bold;  text-align: center; font-size: 9px; width: auto; margin: 10px; visibility: hidden; z-index: 300; border-radius: 2px; letter-spacing: 2px;} 

.blogroll li {
    list-style: none;
    width: 91px;
    float: left;
    height: 90px;
    overflow: hidden;
    margin: 0px 4px 4px 0px;
    padding-top: 0px;
}

.blogroll img {
    width: 100px;
    float: left;
    margin-left: -8px;
}

</style>
Como personalizar: 
width: 91px; é a largura que a imagem aparece
height: 90px; é a altura que a imagem aparece
width: 100px; é a largura da imagem, ou seja se as imagens ficarem com espaço em branco dos lados, desproporcional, aumente esse tamanho, até todas parecerem iguais.
margin-left: -8px; é para centralizar as imagens, se não der certo você pode aumentar ou diminuir para ficarem centralizadas.
background-color: #000; é o fundo do tooltip
color: #fff; é a cor do texto do tooltip
No bloco de notas deve ficar assim: 

Colocando no blog

Se for na barra lateral: 
No painel do blogger, vá em Layout > Clique em Adicionar Gadget  no local desejado > Escolha um HTML/JAVASCRIPT > Cole todo o código do seu bloco de notas e salve.

Se for em uma página estática: 
Vá na sessão Páginas do seu blog e crie uma nova página. Vai ser como criar um post, mas você precisa clicar no botão HTML na parte superior. Depois é só colar todo o código do seu bloco de notas. Salve. 
Blogroll em uma página do blogger
Veja como ficou. Se as imagens estiverem com proporções e tamanhos errados, você vai editar isso na parte do css, ali onde expliquei o width e height da imagem. 

O Tooltip 

Para o tooltip funcionar, você precisa ir no painel do seu blogger > Clique em Modelo (em baixo do Layout onde indiquei na imagem a cima). > Depois clique em Editar HTML 


Você vai clicar bem no meio dos códigos que apareceram. Aperte ctrl+f no seu teclado e procure por: <body

Pode aparecer assim: <body> ou <body expr:class=….  Independente do que aparecer, você deve colar o código a seguir na linha debaixo desse <body

<div id=’dhtmltooltip’/>
<script language=’JavaScript’ src=’http://static.tumblr.com/xajwmek/wC6lsg2fd/titlediferenciado_ritamafalda.txt’/>

Depois é só salvar. E seu blogroll está pronto o/

Possíveis Dúvidas

1. Não deu certo, o que fiz errado? Eu não sei, e nem sempre a gente consegue as coisas de primeira. Então desfaça e comece de novo.
2. O que é barra lateral? Tem a área dos posts no meio do seu blog, do lado tem uma barra lateral. (Onde fica o quem sou eu, redes sociais e etc). 
3. O que é uma página estática? Isso aqui (clica)
4. O que é tooltip? O tooltip que ensino aqui, é o nome que aparece quando passa o mouse. Com o tooltip, o nome aparece na mesma hora, tem o fundo preto e a cor branca (e você pode alterar). Sem o tooltip, aparece daquele jeito simples e não personalizável.
5. Como altero o tamanho das imagens? Olha, acho que você não leu direito o tutorial. Lê de novo.
Caso você tenha mais alguma dúvida, deixa nos comentários. Se não der certo pode enviar um e-mail para duvidasbutlariz@gmail.com com o link do seu blog pra eu poder te ajudar. Se der certo, comente o que achou! <3 
Espero que vocês consigam e que esse tutorial ajude muito vocês <3 Para ver mais tutoriais, acesse a página Extras do blog. Beijos!