Postagem no Blogger com layout HTML estilizado · SergioAllen

twnho um site no wordpress e pode ter uma pagina estilo blog sem problemas .... blogger seria minha iltima opção

Autor

estou indo pro blogger pela opção gratuita, e o wordpress teria o mesmo problema quanto as postagens, sanando este problema, o site a qual pertencer é indiferente acredito

diwberg

1 ano atrás

Fala amigo, tudo joia? Vou te dar uma dica, pesquisa um pouco sobre o markdown, que vai ser a 'linguagem' que vc vai usar nas postagens, vai ser mais facil pra vc, e depois, só procurar uma Interface UI pronta (na linguagem qe vc ta usando), pra fazer o input do text area para uma memoria persistente (banco)...

AlefSantos

1 ano atrás

Sugiro usar bootstrap para deixar responsivo e ficar mais fácil a criação, uma boa também é usar o ckeditor, uma biblioteca onde tem todas as ferramentas para a edição de texto e adição de imagens no post.
Tomei como desafio criar o front-end e backend de um blog a algum tempo, estou desenvolvendo o back com nodejs e é o front com JS e bootstrap 5 puro.
O reposotorio está privado mas vou deixar bíblico e deixo o link aqui caso precise ou para tirar ideias também.

SergioAllen

Autor

1 ano atrás

<!DOCTYPE html>

AGE - Home Page * { margin: 0; padding: 0; box-sizing: border-box; scroll-margin-inline: transparent; } html{scroll-behavior: smooth;}

body {
background: rgb(38,5,52);
background: -moz-radial-gradient(circle, rgba(38,5,52,1) 19%, rgba(0,0,0,1) 100%);
background: -webkit-radial-gradient(circle, rgba(38,5,52,1) 19%, rgba(0,0,0,1) 100%);
background: radial-gradient(circle, rgba(38,5,52,1) 19%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#260534",endColorstr="#000000",GradientType=1);
}

button{
background-color: transparent;
border: 2px solid rgb(98, 4, 98);
transition: 0.2s;
}

button:hover{
box-shadow: 0px 0px 10px 8px rgb(98, 4, 98),
inset 0px 0px 10px 2px rgb(98, 4, 98);
transform: scale(1.05);
}

h1{
filter: drop-shadow(4px 4px 4px rgb(0, 0, 0));
position: absolute;
top: 420px;
left: 485px;
font-family: 'Changa', sans-serif;
width: 550px;
color: white;
text-transform: uppercase;
text-shadow: 6px 6px 10px black;
font-size: 75px;
}

h2{
filter: drop-shadow(4px 4px 4px rgb(0, 0, 0));
position: absolute;
top: 1000px;
left: 485px;
font-family: 'Changa', sans-serif;
width: 550px;
color: white;
text-transform: uppercase;
text-shadow: 6px 6px 10px black;
font-size: 75px;
}

h3{
filter: drop-shadow(4px 4px 4px rgb(0, 0, 0));
position: absolute;
top: 1725px;
left: 485px;
font-family: 'Changa', sans-serif;
width: 550px;
color: white;
text-transform: uppercase;
text-shadow: 6px 6px 10px black;
font-size: 75px;

}

h4{
filter: drop-shadow(4px 4px 4px rgb(0, 0, 0));
position: absolute;
top: 2325px;
left: 505px;
font-family: 'Changa', sans-serif;
width: 550px;
color: white;
text-transform: uppercase;
text-shadow: 6px 6px 10px black;
font-size: 75px;

}

p{
filter: drop-shadow(4px 4px 4px rgb(0, 0, 0));
position: absolute;
top: 1150px;
left: 175px;
font-family: 'Changa', sans-serif;
width: 1050px;
color: white;
text-align: center;
text-shadow: 6px 6px 10px black;
font-size: 17px;
}

a:link{
text-decoration: none;
}

a:visited {
color: white ;
}

.AGE {
filter: drop-shadow(4px 4px 4px rgb(98, 4, 98));
width: 250px;
height: 250px;
margin: 125px;
margin-top: 35px;
margin-left: -10px;
margin-left: 55px;
}

.SobreNos {
filter: drop-shadow(4px 4px 4px rgb(98, 4, 98));
background-color: rgb(0, 0, 0);
font-size: 17px;
color: white;
position: absolute;
top: 150px;
left: 350px;
font-family: 'Changa', sans-serif;
border-radius: 15px;
width: 175px;
height: 50px;
text-decoration: none;
}

.Novidades {
filter: drop-shadow(4px 4px 4px rgb(98, 4, 98));
background-color: rgb(0, 0, 0);
font-size: 17px;
color: white;
position: absolute;
top: 150px;
left: 580px;
font-family: 'Changa', sans-serif;
border-radius: 15px;
width: 175px;
height: 50px;

}

.Parceiros {
filter: drop-shadow(4px 4px 4px rgb(98, 4, 98));
background-color: rgb(0, 0, 0);
font-size: 17px;
color: white;
position: absolute;
top: 150px;
left: 825px;
font-family: 'Changa', sans-serif;
border-radius: 15px;
width: 175px;
height: 50px;
text-decoration: none;
}

.Contatos{
filter: drop-shadow(4px 4px 4px rgb(98, 4, 98));
background-color: rgb(0, 0, 0);
font-size: 17px;
color: white;
position: absolute;
top: 150px;
left: 1070px;
font-family: 'Changa', sans-serif;
border-radius: 15px;
width: 175px;
height: 50px;
text-decoration: none;
}

.parceiros {
display: flex;
}

.parceiros1 {
filter: drop-shadow(25px 25px 25px rgb(0, 0, 0));
height: 340px;
display: block;
margin-left: 155px;
margin-block: 75px;
margin-right: 120px;
}

.parceiro2 {
filter: drop-shadow(25px 25px 25px rgb(0, 0, 0));
height: 290px;
display: block;
margin-left: 225px;
margin-block: 115px;
margin-right: 190px;
border-radius: 50%;

}

.import{
filter: drop-shadow(4px 4px 4px rgb(0, 0, 0));
position: absolute;
top: 1925px;
left: 505px;
font-family: 'Changa', sans-serif;
width: 550px;
color: black;
text-transform: uppercase;
text-shadow: 6px 6px 10px black;
font-size: 25px;
}

#picture__input{
display: none;
}

.picture {
width: 400px;
aspect-ratio: 16/9;
background: #ddd;
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed currentcolor;
cursor: pointer;
font-family: sans-serif;
transition: color 300ms ease-in-out, background 300ms ease-in-out;
outline: none;
overflow: hidden;
}

.picture:hover {
color: #050505;
background: # ;
}

.picture:active {
border-color: turquoise;
color: turquoise;
background: #eee;
}

.picture:focus {
color: #050505;
background: #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.picture__img {
max-width: 100%;
}

<button class="SobreNos"><a href="#sobrenos">Sobre Nós</a></button>
<button class="Novidades"><a href="#novidades">Novidades</a></button>
<button class="Parceiros"><a href="#parceiros">Parceiros</a></button>
<button class="Contatos"><a href="#contatos">Contatos</a></button>
<br>
<br>
<br>
<h1>
    <section id="parceiros">Parceiros</section>
</h1>
<div class="parceiros">
    <a href="https://www.sadgangpro.com">

SOBRE NÓS

<p>A dedicação é essencial para determinar o sucesso e isso nós temos de sobra na SADGANGPRO®;
    <br>
    Nossa equipe é talentosa, comprometida e apaixonada - a combinação perfeita para qualquer Equipe de eSports.
    <br>
    <br>
    Somos extremamente gratos aos nossos parceiros e seguidores que tornam tudo isso possível.
    <br>
    A marca lançada oficialmente no dia 11 de Janeiro de 2022 como uma "guilda" de Free Fire, porem é um projeto
    que
    estava em mente a muitos anos.

    SDG PATRÃO

    RICK MACIEL mais conhecido como SDG PATRÃO tinha em mente o nome SADGANG por motivos de sua vida pessoal
    junto a um grupo de amigos, Patrão colocou em prática o projeto uma semana apos seu aniversário de 18 anos se
    tornou
    um empresário do ramo de eSports (esporte eletrônico) junto aos órgãos da economia do governo.
    <br>
    <br>
    Patrão antes mesmo de atingir a maioridade já buscava sempre adquirir conhecimento sobre o mercado
    financeiro e direito jurídico, empresarial e econômico.

    Hoje com 19 anos esta adquirindo mais epaço e expandindo o projeto "SDG" no ramo de eSports e muito mais,
    tornando a SADGANGPRO cada vez maior no cenário nacional.
</p>
<br>
<br>
<br>
<br>
<h3>
    <section id="novidades">NOVIDADES</section>
</h3>



<br>
<br>
<br>
<br>
<br>
<h4>
    <section id="contatos">CONTATOS</section>
</h4>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

`>`