Códigos HTML fáceis para Blogueiros

abril 23, 2018


[ #11 | B E D A ] Kon'nchiwaa fadinhas e elfos! Como vocês estão? Sei que muitos tem um medo danado de mexer com html ou acha muito dificil, mas não é tão complicado assim. Vocês podem ver isso não só nos meus posts de personalização mas também nesse post agora! Reuni coisas básicas, que pode te ajudar em algum momento. E então, let's go?


Recomendo que enquanto leia esse post abra uma outra aba com o seu blog, adicione um no gadget de HTML/JavaScript (na lateral) e vá testando, e experimentando os seguintes códigos que colocarei. Se você digitar o código errado, não se preocupe, não vai acontecer nada de grave, ele só não vai aparecer, ou irá aparecer o código mesmo a barra lateral, é só apagar o Gadget e pronto.

Imagem

Hospede sua imagem em algum site, pode ser blogger ou imgur. Pegue o 'link direto' dele. Em seguida, coloque no código abaixo:

<img src = ”http://linkdaimagem”>

Imagem com link

Este é o código que você pode usar, e colocar uma imagem com link à sua barra lateral ou qualquer lugar que aceite. Ao apertar na imagem abrirá o link colocado.  Certifique-se sempre de que seus links comecem com http: //

<a href=”http://linkdositeaqui”> <img src = ”http://linkdaimagemaqui”> </a>

Link de texto

Aqui é como essa acima só que com texto mesmo, o link em um texto:

<a href=”http://linkdositeaqui”> Texto vai aqui </a>

Texto negrito, itálico, sublinhado, e destaque

Você pode alterar a aparência do texto com esses códigos simples! Teste na sua sidebar:

Texto em negrito: <b> Texto em negrito aqui </ b>

Para texto em itálico: <i> Texto em itálico aqui </ i>

Para o texto sublinhado: <u> Texto sublinhado aqui </ u>

Para destaque comum (amarelo): <mark>destacado</mark>

Para destaque personalizado: Nesse texto tem <span style="background: #1abc9c; border-radius:5px; padding:5px">trecho em destaque</span>.

Tamanho da fonte

Você também pode alterar o tamanho da sua fonte. Substitua por um número de acordo com o tamanho de sua preferencia:

<font size = "4"> O texto vai aqui </ font>

Alinhando no centro

Se você quiser que algo fique centralizado, podendo ser texto, imagem ou qualquer item, use esses códigos no início e no final do  HTML, lembrando que os </ são necessários para fechar qualquer ação, isso faz com que não aplique em tudo:

<center> Qualquer código HTML ou texto aqui </center>

Iniciando uma nova linha e espaçamento

Caso não use esse código todo texto que fazer vai ficar em uma única linha, sem paragrafo pois o ''enter'' não funciona como ''espaço'' no html, já o segundo é bom para espaçamento ao lado:

Para outra linha: <br/>

Para espaço ao lado: &nbsp;

Bem, é isso, espero que seja útil para vocês! Pratique e aplique sempre na sua vida pela blogosfera. Essas dicas são ótimas também para os seus comentários, adicione seu blog sempre no final linkando eles. Pratique na sidebar e no rodapé também!

Por hoje é só! Espero que tenham gostado! Estamos em BEDA então visite e siga o blog para não perder nada. Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest *  Conheça meu trabalho: JD Design e Web! Até mais, Kissus! Fontes: Pixie, Devmedia & Haute chocolate photography.

Leia também:

4 comentários

  1. Aaah como vc nos ajuda! Obrigada mesmo por compartilha essas dicas. Vai salvar muita gente (inclusive eu haha)
    Beijos!
    Tamara

    tamaravilhosamente.com

    ResponderExcluir
    Respostas
    1. Aaah fico feliz em saber que vai ajudar! Que bom!! Nada, qualquer duvida é só falar que faço um post hehe <3 Kissus, obrigada por acompanhar!

      Excluir
  2. O que é super necessário para nós blogueiros é o link clicavel, que alguns blogs não tem o código que 'transforma' todo link em um endereço a ser seguido. Facilita na hora de responder os comentários e até ajuda a conquistar os leitores curiosos.

    www.blogdodeivy.blogspot.com


    ResponderExcluir
    Respostas
    1. Exatamente Deivyson! Falou tudo, é muito necessário mesmo, facilita, e ainda deixa mais chamativo um link clicável. Tente usar também no link do seu blog! Obrigada pela visita e por comentar!

      Excluir

© 2017 Sweet Magic. Re-Design: JD Design. Tecnologia do Blogger.