Postagem no Blogger com layout HTML estilizado

Bom dia/tarde/noite Devs, a algumas semanas fiz um post perguntando como fazer a parte de postagem tipo "blog" no meu site html, muitos me recomenadaram a utilização do Blogger que de momento pra minha necessidade nao valeria a pena utilizar ferramentas backending pra resolver meu problema (mais detalhes na postagem).

Entao fui a luta, adaptei meu projeto para o blogger, porém voltei para o mesmo problema, nao consigo realizar postagens no mesmo.

deixarei anexado o link do codigo (obs: peguem leve pois sou iniciante hahaha)

https://agersoficial.blogspot.com

pedrobonanihá 2 anos

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

SergioAllenhá 2 anos
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
diwberghá 2 anos

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)...

AlefSantoshá 2 anos

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.

SergioAllenhá 2 anos

<!DOCTYPE html>

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">

<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>