- Askalians
Administrador
- Mensagens : 1834
Reputação : 186
Conquistas : - https://i.servimg.com/u/f11/17/02/65/26/411.png
- https://i.servimg.com/u/f11/17/02/65/26/311.png
- https://i.servimg.com/u/f11/17/02/65/26/1112.png
- https://i.servimg.com/u/f11/17/02/65/26/912.png
- https://i.servimg.com/u/f11/17/02/65/26/1312.png
- https://i.servimg.com/u/f11/17/02/65/26/1413.png
- https://i.servimg.com/u/f11/17/02/65/26/1611.png
- https://i.servimg.com/u/f11/17/02/65/26/712.png
- https://i.servimg.com/u/f11/17/02/65/26/410.png
- https://i.servimg.com/u/f11/17/02/65/26/1911.png
- https://i.servimg.com/u/f11/17/02/65/26/2211.png
- https://i.servimg.com/u/f11/17/02/65/26/2111.png
2º Concurso : - https://i.servimg.com/u/f89/19/67/13/04/medalh48.png
por Askalians Seg Mar 15, 2021 12:29 am
COMO POSTAR USANDO HTML
Olá pessoal, tudo bem?
Na medida que vocês foram navegando pelo fórum, verão que algumas pessoas utilizam html nas suas postagens pois fica algo esteticamente mais bonito e mais clean, como como é que você pode fazer a mesma coisa?
Nem todos os usuários possuem esse tipo de conhecimento. Alguns simplesmente procuram na internet códigos prontos e utilizam e outros conseguem desenvolver os seus próprios. Eu mesma sou um dos casos que não me atrevo a criar códigos, mas procuro na internet alguns bonitos e ajusto à minha maneira então para ajuda-los, vou dar algumas dicas para vocês e disponibilizarei alguns códigos aqui que possam usar e também como podem modifica-los.
Inicialmente, o que todos precisam saber por códigos é que possuem um começo e um fim. Os códigos finais são marcados por um “/”. Todo código aberto precisa ser sempre fechado para que não ocorra nenhum tipo de distorção na página na hora da publicação, por exemplo:
Para se publicar uma imagem, o código usado é:
- Código:
[img]insira aqui o link da imagem[/img] Ou seja, o img aberto no início, depois o link da imagem e então o código é fechado por /.
Aqui vai um código simples de se usar:
- Exemplo 1:
- Código:
<center><a href="goo.gl/6qY3Sg"><div class="frankt1">UM_TITULO_LEGAL.</div></a><div class="frank1"></div><div class="franktextim">
ESCREVA_AQUI O SEU TEXTO
</div><div class="frank2"></div> <div class="frankt2">UMA FRASE PARA O RODAPÉ</div></center>
<style type="text/css">.frank1 {margin-left:-220px; width:200px; height:200px; padding:20px; background:transparent; border-left:1px solid #000; border-top:1px solid #000;} .frank2 {margin-right:-220px; width:200px; height:200px; padding:20px; background:transparent; border-right:1px solid #000; border-bottom:1px solid #000;margin-top:-210px;} .frankt1 {margin-left:-220px; width:210px; text-align:center; font-family:'Slabo 27px'; font-size:30px; color:#000; padding:10px;font-weight: bold; line-height:25px;letter-spacing:-1px;} .frankt2 {margin-right:-220px; width:210px; font-family: VT323; font-size:9px; text-transform:uppercase; letter-spacing:1px; text-align:center; color: #000; line-height:9px;padding:10px;} .franktextim {width:340px; padding:30px; font-family:calibri; font-size: 12px; color:black; background: #fff; display: relative; margin-top:-210px;text-align:justify;} .franktextim b {font-size:13;color:#4D4C4C; font-family:'Slabo 27px'; font-weight:700;} .franktextim i {color:#9A9999;} .franktextim f {font-weight: bold; font-size:13; color:#777;font-family:'Slabo 27px'}</style><link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"><link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
Quando muitas vezes os códigos parecerem complicados demais, uma caixa de texto pode fazer toda a diferença na sua postagem, como esta por exemplo:
- Exemplo 2:
- Código:
<link href="https://fonts.googleapis.com/css?family=Alice" rel="stylesheet"><center><table style="background-color:black;border-radius: 15px 15px 15px 15px;width:100%;height:50%;"><tr><td style="padding:10px;"><font color="FFFFFF"><table style="color: black;background-size:100%;background:white;border-radius:15px;box-shadow: inset 0px 0px 15px #76191A;padding:3%; text-align: justify; font-family: 'Alice', serif;" width="100%;"><tr><td>
[center]ESCREVA AQUI O SEU TEXTO[/center]
</td></tr></table>
</font></td></tr></table>
Ou algo bem clean como este aqui:
- Exemplo 3:
- Código:
<center><div style="width:500px; height:auto;font-family:calibri; font-size:14px; text-align: justify; padding:20px; line-height: 120%; color:#FFFFFF;">
<div style="text-shadom 0 red, 0.08em 0 cyan; text-size:14px; text-align: right; letter-spacing:4px;">[b]NOME DO PERSONAGEM[/b]</div>
ESCREVA AQUI O SEU TEXTO
</div>
[url=http://graphics-dreams.forumeiros.com/u4]▲[/url]</center>
<style type="text/css">.frankiet {margin-right:-38px; height:auto; -webkit-transition: 2s all ease-in-out; -moz-transition: 0.5s all ease-in-out; o-transition: 0.5s all ease-in-out; width:115px; font-size:30px; transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); color:#1e1e1e;text-transform: uppercase; font-family: helvetica; text-align: center; text-transformation:bold; line-height:75%;} .frankiet:hover {text-shadow: -0.08em 0 red, 0.08em 0 cyan;-webkit-transition: 2s; -moz-transition: 0.5s; o-transition: 0.5s;} .steint {float:left; width: 50px; height: 50px; line-height: 50px; margin:0px 10px 0px 0px; font-family: 'Great Vibes', sans-serif; font-size: 40px; color: #000; text-align: center; -webkit-transition: 2s all ease-in-out; -moz-transition: 0.5s all ease-in-out; o-transition: 0.5s all ease-in-out;} .steint:hover {text-shadow: -0.08em 0 red, 0.08em 0 cyan; -webkit-transition: 2s all ease-in-out; -moz-trnsition: 0.5s all ease-in-out; o-transition: 0.5s all ease-in-out;}</style>
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'></center>
Espero que este tutorial possa ajuda-lo. Em caso de dúvidas ou sugestões, me procure e acima de tudo, Divirta-se!
 |
|
