11 maio 2015

Como criar um gadget "Welcome"


Oi lindos! Estou com problemas no teclado e perdi algumas teclas. Pois é. Hoje vim fazer um tutorial de como fazer um welcome personalizado igual do blog! Vamos lá!


1- Abra seu layout > adic gadget > HTML Java Script

2- No texto do gadget vamos começar nosso  código para colocar uma imagem no gadget. (se não quiser,simplesmente pule e vá direto para o próximo passo.)

a) A primeira tag (código html) será: 

<center> - se quiser alinhar a imagem para centro
<right> - se quiser para a direita
<left> - se quiser para a esquerda

b) A segunda tag será: 

<img src = "URL DE SUA IMAGEM" 

Onde está escrito URL DE SUA IMAGEM você coloca a URL da imagem que você quer que fique no welcome (não retire as aspas!)


Nosso código deve está assim,por enquanto(pode está diferente para quem escolheu reght ou left,fiquem calmos vocês não fizeram errado):

<center><img src = "URL DE SUA IMAGEM"  
C) Largura e altura
Vamos adicionar dois comandos largura e altura. Widht and height (inglês aqui é forte),ele é diferente dos outros,por que ele não fecha nem abre. Adicionamos ele normalmente,porém com aspas no tamanho assim(troque pelo tamanho que mais te agrada,trocando os números):

largura -   widht = "220 px"
altura - height = "30 px "

Fácil e simples



d) Agora vamos fechar as tags! 

Agora ao código vamos adicionar as mesmas tags,porém fechadas assim: 


</center> - (Se lembram do código de centralizar? Olha como fecha ele,só adicionar a /)


*PARA PESSOAS QUE ESCOLHERAM <RIGHT> OU <LEFT> TEM QUE FICAR ASSIM:


</right> - Direita

</left> - esquerda

Agora que fechamos as tags,vamos adicionar uma tag chamada: <br>. Ela serve para pular uma linha ou melhor,dar um "enter" no HTML,certo? Porém,como o blogger buga demais vamos colocar-la fechada assim: <br/>


Nosso código deve está assim,por enquanto:


<center><imag src= "URL DA IMAGEM" widht = "220 px" height = "30 px" /></center><br/>
3- O texto 

Vamos iniciar o código do texto!

Beem mais simples

a) Começamos com as tags de alinhamento ,lembram delas? 

 <center> - se quiser alinhar  para centro
<right> - se quiser para a direita
<left> - se quiser para a esquerda

b) Agora é com você! 

Vamos começar a fazer o texto,mas para decorar-lo vamos usar as tags: 

<b> -negrito
<u> - sublinhado 
<i> - itálico 
<blockquote> - caixinha de citação

-Como usar-las,Ana?

Simples,você primeiro faz seu texto normal assim: 


<center><imag src= "URL DA IMAGEM" widht = "220 px" height = "30 px" /></center><br/>
<center>SEU TEXTO E BLÁ
Se você quiser que uma parte de seu texto seja em negrito fazemos assim(no caso a palavra BLÁ ficou em negrito,observem:

<center><imag src= "URL DA IMAGEM" widht = "220 px" height = "30 px" /></center><br/><center>SEU TEXTO E <b>BLÁ</b>
Se você quiser que uma parte do seu texto fique em itálico fazemos assim: 


<center><imag src= "URL DA IMAGEM" widht = "220 px" height = "30 px" /></center><br/><center>SEU TEXTO E <i>BLÁ</i>

Se você quiser que uma parte do seu texto fique sublinhada fazemos assim: 

<center><imag src= "URL DA IMAGEM" widht = "220 px" height = "30 px" /></center><br/><center>SEU TEXTO E <u>BLÁ</u>


Se você quiser que uma parte do seu texto fique na caixinha de citação fazemos assim: 


<center><imag src= "URL DA IMAGEM" widht = "220 px" height = "30 px" /></center><br/><center>SEU TEXTO E <blockquote>BLÁ</blockquote>

Legal,né? Fiquei realizada quando aprendi esses comandos

C) Vamos fechar as tags? 

Não! No código do texto não é preciso fechar as tags,certo?

4 - Caixa de busca simples

Coloque dentro do mesmo gadget esse código:

<form action="/search" method="get"><input type="text" name="q" value="Procure + Enter"/></form>
(www)

5- Salve

Clique em salvar,clique em "participar desse site" aqui no IG,comente e não copie,certo? Amo vocês e seria um prazer responder suas dúvidas! 

7 comentários:

  1. Eu sabia alguns desses comandos, mas não todos... Beijos :D
    cute universe e Universo Lollipop

    ResponderExcluir
    Respostas
    1. Eles ficam lindos,uma graça!
      Beijos

      Excluir
  2. Fica muito bonitinho <3
    Beijos >3< | Meninas na Web

    ResponderExcluir
  3. Oi ! O que você acha de virarmos afiliadas ?

    Café com leite
    www.cafecomleitei.blogspot.com

    ResponderExcluir
  4. Oi Isabela! Claro que sim! Já,já te coloco na elite!

    ResponderExcluir
  5. Oi Isabela! Claro que sim! Já,já te coloco na elite!

    ResponderExcluir

Oi cute! Vai comentar? Que legal,vamos ler as regrinhas primeiro?

- Não xingue,por favor
- Faça críticas construtivas
- Não aceito "seguindo segue de volta?''
- Fale algo a ver com o post
- Aceitamos afiliação,é só pedi

© Imagine - 2015. Don't copy bitch! Ana Letícia e Victoria Pontes Tecnologia do Blogger