15 junho 2016

Como criar um blogroll

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! 

Comente com o Facebook:

26 comentários:

  1. ADOREEEEEEEEEEEEEEI! Vou tentar fazer com certeza! <3

    ResponderExcluir
  2. Amei, Lariz!!!! Vou fazer e vai ficar lindoooo!

    ResponderExcluir
  3. UAU!!!! Arrasou nesse tutorial Lariiii!!! Estava procurando um assim para a minha página de favoritos hehe Obrigada <3

    www.blogeaigabi.com.br

    ResponderExcluir
    Respostas
    1. 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

      Excluir
  4. Quando eu vou colocar esse último código aparece isso: "div should not appear inside of head" e não da para salvar :(

    ResponderExcluir
    Respostas
    1. 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!

      Excluir
    2. Tudo bem, acontece. Agora deu certinho e ficou liiindo, obrigada :)

      Excluir
  5. 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!

    ResponderExcluir
  6. 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

    www.sonhosempauta.com

    ResponderExcluir
  7. 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

    ResponderExcluir
  8. Você e seus tutoriais maravilhosos, amei! Se pá vou tentar no meu blog no futuro, mesmo sendo WordPress, deva funcionar. :D Um beijo ♡

    ResponderExcluir
  9. 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

    ResponderExcluir
    Respostas
    1. Obrigada. Simmm, eu amo ver os blogrolls dos blogs que gosto kkk sempre tem blogs bem parecidos, é bem isso mesmo, haha <3

      Excluir
  10. 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!

    ResponderExcluir
    Respostas
    1. 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ê!

      Excluir
  11. Muito obrigada, este post foi muito útil para mim <3
    Beijos
    www.charme-se.com

    ResponderExcluir
  12. 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

    www.memoriasdeumaguerreira.com.br

    ResponderExcluir
    Respostas
    1. 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

      Excluir
  13. "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

    ResponderExcluir
    Respostas
    1. 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!

      Excluir
  14. 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 :/

    ResponderExcluir
    Respostas
    1. 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..

      Excluir

Butlariz • contatobutlariz@gmail.com Feito com ♥ por Lariz Santana / Moonly Design