sexta-feira, 19 de dezembro de 2014

Utilizando o Gadget HTML/JavaScript para fazer um 'Quem sou eu'

Durante as análises dos blogs (um projeto do grupo Blogs que Interagem) muitos blogueiros citaram a importância de ter um espaço no blog que aproxime o escritos dos seus leitores, e quanto mais explicito e fácil de encontrar, melhor! Por isso muitos optam por inserir um "Quem sou eu" no sidebar do blog, geralmente no canto superior direito. Justamente por isso, e por pedidos de integrantes do grupo, esse tutorial se faz necessário. 


1. Acesse o menu "Layout" e clique em "Adicionar um Gadget":



2. Ao clicar em "Adicionar um Gadget" uma tela era aparecer, procure por "HTML/JavaScript" e clique no botão "+":






3. Agora, inicialmente clique em "Formato Rich Text" para aparecer o texto "Editar HTML". Digite um título, e insira o seguinte código:



<img style="width: 100%; margin-bottom: 10px;" src="http://i.imgur.com/mWkRiPz.jpg" />
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra mattis ante ac vehicula. Aenean non mauris tempus, luctus diam ut, pretium sapien. Nullam sed ultrices purus, et commodo arcu. Integer suscipit porttitor magna, venenatis pellentesque ipsum auctor eu.</p>

A tag "img" é responsável por exibir uma imagem, por tanto insira o endereço de uma imagem hospedada na internet dentro do "scr". Para hospedagem a imagem utilizada neste tutorial utilizei o site imgur. O código dentro do "style" é CSS, ele é responsável por dar "estilo" a tag img. Ao inserir "width: 100%;" eu determinei que a minha imagem ficará do tamanho do meu sidebar, ou seja, se ele tiver 200px de largura minha imagem também terá 200px de largura, isso impede que a imagem fique maior que o sidebar. O "margin-bottom" determinou que abaixo da imagem terá uma margem de 10px que irá "empurrar" o texto dando um espaço entre a imagem e o bloco de texto.

A tag "p" é utilizada para conter e exibir um parágrafo. Dentro do "style" contém especificações que determinam o alinhamento do texto. Assim como no Word, por exemplo, possuímos quatro possibilidades: esquerda, direita, justificado e centralizado. Veja qual lhe agrada mais:

<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra mattis ante ac vehicula. Aenean non mauris tempus, luctus diam ut, pretium sapien. Nullam sed ultrices purus, et commodo arcu. Integer suscipit porttitor magna, venenatis pellentesque ipsum auctor eu.</p>
<p style="text-align: right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra mattis ante ac vehicula. Aenean non mauris tempus, luctus diam ut, pretium sapien. Nullam sed ultrices purus, et commodo arcu. Integer suscipit porttitor magna, venenatis pellentesque ipsum auctor eu.</p>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra mattis ante ac vehicula. Aenean non mauris tempus, luctus diam ut, pretium sapien. Nullam sed ultrices purus, et commodo arcu. Integer suscipit porttitor magna, venenatis pellentesque ipsum auctor eu.</p>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra mattis ante ac vehicula. Aenean non mauris tempus, luctus diam ut, pretium sapien. Nullam sed ultrices purus, et commodo arcu. Integer suscipit porttitor magna, venenatis pellentesque ipsum auctor eu.</p>

4. Inserindo links das redes sociais:



Para inserir os links das redes sociais você deve novamente hospedar os ícones das redes sociais. Feito isso segue o código:

<ul>
<li style="border: none;float: left;padding-top: 0;padding-left: 0;padding-bottom: 0;padding-right: 5px;">
<a href="http://facebook.com.br/nomedapagina" target="_blank" title="Siga minha página">
<img src="http://i.imgur.com/02JR4ig.png" alt="Siga minha página" />
</a>
</li>
<li style="border: none;float: left;padding-top: 0;padding-left: 0;padding-bottom: 0;padding-right: 5px;">
<a href="http://instagram.com/nomeperfil" target="_blank" title="Siga meu perfil no Instagram">
<img src="http://i.imgur.com/jnvetKk.png" alt="Siga meu perfil no Instagram" />
</a>
</li>
<li style="border: none;float: left;padding-top: 0;padding-left: 0;padding-bottom: 0;padding-right: 5px;">
<a href="http://twitter.com/nomeperfil" target="_blank" title="Siga meu perfil no Twitter">
<img src="http://i.imgur.com/R1wVeAr.png" alt="siga meu perfil no twitter" />
</a>
</li>
</ul>
A tag "ul" determina que os itens em seu interior fazem parte de uma lista, ou seja, teremos uma lista de links de redes sociais.

A tag "li" representa sempre um item especifico da lista, teremos um li para Facebook, Twitter e etc. Como cada template tem especificações especificas eu tive que colocar alguns códigos CSS que não serão necessariamente utilizados por vocês, exemplo: border: none;float: left;padding-top: 0;padding-left: 0;padding-bottom: 0. Dentro do "style" contém "padding-right: 5px;" que vai dar um espaçamento entre uma imagem e outra para que elas não fiquem grudadas.

A tag "a" contem o "href" com um endereço, ou seja, quando a pessoa clicar na "li" do Facebook ela será direcionada para o endereço da página que você colocar no "href". O "target="_blank" especifica que esse endereço será aberto numa nova aba.

Sendo assim o nosso código final fica desta forma:

<img style="width: 100%; margin-bottom: 10px;" src="http://i.imgur.com/mWkRiPz.jpg" />
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed viverra mattis ante ac vehicula. Aenean non mauris tempus, luctus diam ut, pretium sapien. Nullam sed ultrices purus, et commodo arcu. Integer suscipit porttitor magna, venenatis pellentesque ipsum auctor eu.</p>
<ul>
<li style="border: none;float: left;padding-top: 0;padding-left: 0;padding-bottom: 0;padding-right: 5px;">
<a href="http://facebook.com.br/nomedapagina" target="_blank" title="Siga minha página">
<img src="http://i.imgur.com/02JR4ig.png" alt="Siga minha página" />
</a>
</li>
<li style="border: none;float: left;padding-top: 0;padding-left: 0;padding-bottom: 0;padding-right: 5px;">
<a href="http://instagram.com/nomeperfil" target="_blank" title="Siga meu perfil no Instagram">
<img src="http://i.imgur.com/jnvetKk.png" alt="Siga meu perfil no Instagram" />
</a>
</li>
<li style="border: none;float: left;padding-top: 0;padding-left: 0;padding-bottom: 0;padding-right: 5px;">
<a href="http://twitter.com/nomeperfil" target="_blank" title="Siga meu perfil no Twitter">
<img src="http://i.imgur.com/R1wVeAr.png" alt="siga meu perfil no twitter" />
</a>
</li>
</ul>
* Esta publicação não tem como objetivo promover uma aula de HTML, por tanto as especificações não foram feitas da melhor forma possível, tão pouco com embasamento teórico.


* Site utilizado para hospedar imagens neste tutorial: imgur

2 comentários

  1. Ótimo post, estava procurando por um tutorial desses!

    ResponderExcluir
  2. Olá! Estava precisando de um tutorial desses mesmo! Vou fazer e depois venho comentar para dizer que consegui (ou não, rsrs)!!

    ResponderExcluir

© Rede - Blogs que Interagem
Maira Gall