Report Blog Entry
[ENG] This is the basic layout I use for my blogs. I share them for those who wish to start beautifying, personalizing their blogs without going through so much work and knowing how each thing works. For beginners or not very adventurous.
Remember that when writing a blog start using the HTLM mode and not the WYSIWYG, otherwise, it will complicate things more.
[ESP] Este es el layout básico que utilizo para mis blogs. Se los comparto para aquellos que deseen comenzar a embellecer, personalizar sus blogs sin pasar por tanto trabajo y saber como funciona cada cosa. Para principiantes o no muy aventurados.
Recuerden que al escribir un blog comiencen utilizando el modo HTLM y no el WYSIWYG, sino, se les complicará más la cosa.
<style>
/*==TAMAÑO DE LA PÁGINA, CENTRO==*/
.container{
width: 950px;
}
</style>
<style>
/*==TIPOGRAFIAS, VE A GOOGLE FONTS==*/
@import url('https://fonts.googleapis.com/css2?family=Babylonica&family=Beau+Rivage&family=Grenze+Gotisch&family=IM+Fell+English+SC&family=Josefin+Sans:ital@1&family=Kings&display=swap');
</style>
<style>
/*==IMAGEN DE FONDO COMPLETO==*/
body{
background-color: black !important;
background-image: url('INSERT URL') !important;
background-attachment: fixed !important;
background-repeat: NO-REPEAT !important;
background-position: CENTER !important;
background-size: cover ;
}
</style>
<style>
/*==LINKS SPACEHEY, CABECERA Y FOOTER, TIPOGRAFIA==*/
ul.links {
font-family: 'Beau Rivage', cursive ;
font-size: 20px;
}
</style>
<style>
/*==ESTILO DE PAGINA CENTRO==*/
main{
color: white;
font-family: 'Grenze Gotisch', cursive;
font-size: 20px;
background-color:black;
box-shadow: 0px 0px 5px 2px white;
}
</style>
<style>
/*==PUBLISHED BY... TIPOGRAFIA==*/
h4 {
font-color: white ;
font-family: 'Grenze Gotisch', cursive;
font-size: 20px;
}
/*==IMAGEN DE FONDO==*/
div.edit-info{
background-color: !important;
background-image: url('https://i.imgur.com/tRT4AIM.gif') !important;
background-attachment: SCROLL !important;
background-repeat: NO-REPEAT !important;
background-position: center !important;
background-size: cover ;
}
/*==FECHA DE PUBLICACION...TIPOGRAFIA*/
p.publish-date{
font-family: 'Grenze Gotisch', cursive;
font-size: 20px;
}
/*==SESSION CATEGORIA...TIPOGRAFIA==*/
p.category{
font-family: 'Grenze Gotisch', cursive;
font-size: 20px;
}
/*SESSION DE LINKS CLICKEABLES...TIPOGRAFIA*/
p.links{
font-color: cyan;
font-family: 'Grenze Gotisch', cursive;
font-size: 20px;
}
</style>
<style>
/*==TOP, LOGO, CABECERA==*/
:root{
--logo-blue: url('INSERT LINK HERE') center ;
--darker-blue: blue ;
--lighter-blue: black ;
--even-lighter-blue: ;
--lightest-blue: ;
--dark-orange: ;
--light-orange: ;
--even-lighter-orange: ;
--green: ;
}
</style>
<style>
/*=== FOOTER ===*/
footer{
color:white;
font-family: 'Grenze Gotisch', cursive;
text-align: center;
font-size: 110%;
margin: 10px 0 10px;
padding: 10px 5px;
background: transparent ;
}
</style>
<style>
/*==SESION DE COMENTARIOS==*/
.comments-table td {
background-color: !important;
background-image: url('https://i.imgur.com/tRT4AIM.gif') !important;
background-attachment: scroll !important;
background-repeat: REPEAT !important;
background-position: CENTER !important;
}
</style>
{[MUSICA DE FONDO]}
<iframe width="0" height="0" src="https://www.youtube.com/embed/INSERT LINK//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"></iframe>
If you need some basic help with this, don't hesitate to reach out to me! Have fun customizing your blogs!// ¡Si necesitáis ayuda básica con este layout, no dudes en escribirme! ¡Diviértete personalizando tus blogs!
Comments
Displaying 2 of 2 comments ( View all | Add Comment )
Nao<3
found it!! I don't write poems but I think it's cool to be able to add backgrounds to what I do write.
It truly is, I love the sense of belonging and customization at max. Thats why I love Spacehey and decided to share this basic coding to help people customize their blogs easier and fun.
by Zecnetovk V.; ; Report
I think that it's so cool you do that!:)
by Nao<3; ; Report
Thanks! My pleasure!
by Zecnetovk V.; ; Report
simplyrowan
how did you change the box where ur pfp and links are to a purple background?
The code is found on this session:
/*==IMAGEN DE FONDO==*/
/*-- BACKGROUND IMAGE--*/
div.edit-info{
background-color: !important;
background-image: url('https://i.imgur.com/tRT4AIM.gif') !important;
background-attachment: SCROLL !important;
background-repeat: NO-REPEAT !important;
background-position: center !important;
background-size: cover ;
}
Exchange the Url image for the one your wish, that gif I used it for another post. You can use either a gif or a still image. I reccomend to use and create an account on Imgur to upload images and gifs easier.
by Zecnetovk V.; ; Report