Como criar um blogroll
TutoriaisOi 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.
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:
<div class=”blogroll”>
<li><a href=”LINKDOBLOG” target=”_blank”><img src=”URLDAIMAGEM” onmouseover=”ddrivetip('NOMEDOBLOG')” ; onmouseout=”hideddrivetip()”/></a></li>
<li><a href=”LINKDOBLOG” target=”_blank”><img src=”URLDAIMAGEM” onmouseover=”ddrivetip('NOMEDOBLOG')” ; onmouseout=”hideddrivetip()”/></a></li>
<li><a href=”LINKDOBLOG” target=”_blank”><img src=”URLDAIMAGEM” onmouseover=”ddrivetip('NOMEDOBLOG')” ; onmouseout=”hideddrivetip()”/></a></li>
<li><a href=”LINKDOBLOG” target=”_blank”><img src=”URLDAIMAGEM” onmouseover=”ddrivetip('NOMEDOBLOG')” ; onmouseout=”hideddrivetip()”/></a></li>
<li><a href=”LINKDOBLOG” target=”_blank”><img src=”URLDAIMAGEM” onmouseover=”ddrivetip('NOMEDOBLOG')” ; onmouseout=”hideddrivetip()”/></a></li>
<li><a href=”LINKDOBLOG” target=”_blank”><img src=”URLDAIMAGEM” onmouseover=”ddrivetip('NOMEDOBLOG')” ; onmouseout=”hideddrivetip()”/></a></li>
</div>
Opção 2. 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.
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!

Talvez você goste:
ADOREEEEEEEEEEEEEEI! Vou tentar fazer com certeza! <3
Amei, Lariz!!!! Vou fazer e vai ficar lindoooo!
UAU!!!! Arrasou nesse tutorial Lariiii!!! Estava procurando um assim para a minha página de favoritos hehe Obrigada <3
http://www.blogeaigabi.com.br
Imagina linda! Noooossa, eu tinha colocado você no meu blogroll, você e outras duas meninas, mas não sei o que eu fiz, que sumiram as três ultimas, e como eu queria postar logo ontem, eu acabei deixando do jeito que tava. O blogger tava me estressando muito já hahaha. Eu deveria ter refeito pra colocar sua foto no post u.u Mas vou arrumar o meu blogroll depois. Beijão! <3
Quando eu vou colocar esse último código aparece isso: "div should not appear inside of head" e não da para salvar 🙁
Linda, eu errei o tutorial. Era pra colocar embaixo de <body. É só procura assim, por: <body e colar embaixo do que aparecer. Atualizei o tutoial, obrigada por avisar!
Lary meu anjooo. Tou virando sua fa.. vc simplesmente arrasa… amo a forma como vc explica tudo direitinho! Parabens floor.. seu blog ja eh um dos meus preferidos.. nem preciso dizer o por que neh! Amooo!
Achei bem interessante esse tutorial, apesar de que no momento meu layout ainda esteja em construção. Hahahaha. Quem sabe quando terminar de arrumar não use seu tutorial?
Um beijo, Lariz! <3
http://www.sonhosempauta.com
Tudo bem, acontece. Agora deu certinho e ficou liiindo, obrigada 🙂
Laaaariz, você tem os melhores tutoriaaaais da vidaaaa <3, quero fazer o meu blogroll ainda hoje, se eu conseguir, e com certeza você estará lá! <3
Te indiquei para uma tag, hein ❥
https://eaigirlblog.blogspot.com.br/2016/06/tag-irmandade-das-blogueiras.html
Você e seus tutoriais maravilhosos, amei! Se pá vou tentar no meu blog no futuro, mesmo sendo WordPress, deva funcionar. 😀 Um beijo ♡
Achei seu blog lindo e o layout um amor. Sobre blogroll é uma coisa incrível, porque se gostamos do blog e queremos mais blogs legais para ler, clicaremos naquela abinha esperando encontrar outros lugares amor <3
Por onde começar? Gente que lugar é esse? Porque não te conheci na minha saga a procurar de pessoas com o seu perfil para desenvolver meu layou? Como vivi até agora sem o seu blog? Oi drama! Mas gente que é isso? Tô in love aqui, é muito amor!
Começando a olhar tudinho em 2 segundos,
beijão!
Muito obrigada, este post foi muito útil para mim <3
Beijos
http://www.charme-se.com
Este comentário foi removido pelo autor.
Dica maravilhosa, quem sabe eu faça no meu…
O meu problema é que tenho um certo "tique nervoso" de colocar pessoas no meu blog roll e ver que elas pararam de atualizar o blog, ai la vai eu ter que apagar e tentar achar blogs legais pra por no lugar kkkkkkkk
http://www.memoriasdeumaguerreira.com.br
"reinaugurei" meu blog sábado, e antes disso perdi uns bons tempos da minha vida fazendo um blogroll (porque eu não manjo nada, vou vendo tutoriais e na tentativa x erro hahaha)
Se soubesse tinha entrado aqui antes e usado essa coisa linda sua <3
Fiz sem e com o tooltip. O com só aparecia o nome cortado das fotos da última linha do blogroll. Então tirei pra ver se sem tooltip funcionava e também não aparece o nome :/
As fotos estão ok. Só não aparece o nome. Deixei sem tooltip mesmo :/
Que estranho, pelo menos sem o tooltip, deveria ter funcionado. Será que o código tava certinho? As vezes você esqueceu de alguma aspas, e só de esquecer de uma, já buga o código todo..
Mas é na tentativa e erro mesmo, eu faço muita coisa assim. Sério, tanta coisa que tento fazer e não sei como, é só assim que eu aprendo. Poxa, daqui um tempo quando você quiser atualizar, coloca ele. É tão lindinho kkk Beijos!
kkkkkkkk, o meu problema é um pouco diferente, não tenho medo que parem de postar, mas que eu pare de acompanhar mesmo kkkk Com o tempo, a gente acaba conhecendo outros blogs, e se identificando mais.. Enfim, coloca! É facinho de atualizar mesmo. Coloca uma lista no bloco de notas dos possíveis blogs substitutos kkkk
Obaaa, fico feliz em ter ajudado! <3
Faz simmmm coisa linda!
Simmmmm <3
GENTE, QUE LINDAAA QUE AMOR <3 Fico feliz que você tenha conhecido agora hahaha. Espero poder te ajudar muito com as minhas dicas e tutoriais. Obrigada pelo carinho, lindona! Fico feliz em conhecer você!
Obrigada. Simmm, eu amo ver os blogrolls dos blogs que gosto kkk sempre tem blogs bem parecidos, é bem isso mesmo, haha <3
Canal
Recomendo
Fan page
Populares
Mood