◉ marr ◉'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

HOW 2 CUSTOMIZE UR BLOG ENTRY POST LAYOUTS!! (FIXED COMMENTS AND ICONS 12/8)




 hey slays. it always bothered me that i could never figure out how people customized their blog post layouts until now so ill get em here

  1. click on the <> sign on the top left of the editor
  1. paste the code below before your blog content
  1. should be finished, you can see if it changes after you click on the <> (now an eye) that converts the editor to its original state.


 Heres the code i used for this posts layout, feel free to customize as you wish, and please let me know if theres anything i can add/change or ask questions about (however i am not a coder, theres some questions i probably wont be able to answer):

<style>

 

 body {

    background-image: url("background image link here!");

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed;

    font-family: 'Georgia', serif;

  }

 

.inner b {

  color: #FF0000

}

 

  nav .top {

    background-color: black;

  }

 

  nav .links {

    background-color: black;

    text-align: right;

    border-radius: 4px 4px 0 0;

    background-position: center;

    background-repeat: no-repeat;

  }

 

  button {

    color: #FF0000;

    background-color: black;

  }

 

  .count {

    color:#FF0000 ;

  }

 

  a {

    color: #FF0000;

  }

 

  nav .links a {

    color:#FF0000;

  }

 

  footer {

    background-color: black;

  }

 

  footer p {

    color: #FF0000;

  }

 

  footer .links {

    color:#FF0000;

  }

 

  .comments-table td:first-child, .comments-table td, .comment-replies, .details-table td:first-child, .details-table td {

    background: black;

    color:#FF0000;

  }

 

  .edit-info {

    background-color: black;

    border: 1px;

  }

 

  .blog-entry .title {

    background-color: black;

    color: #FF0000;

    padding: 5px;

  }

 

p.links a:first-child .icon{

  content: url("icon for your blog here!”);

  width: 25px;

  height: auto;

}

 

p.links a:nth-child(2) .icon {

  content: url(“icon for your profile here!”);

  width: 25px;

  height: auto;

}

 

p.links a:last-child .icon, table.comments-table td .icon {

  content: url(“icon to report here!”);

  width: 25px;

  height: auto;

}

 

  .blog-entry .content {

    background-color: black;

    padding: 10px;

  }

 

  main {

    background-color: black;

  }

 

  main .left {

    background-color: black;

    color: #FF0000;

  }

 

  main .right {

    padding: 1px;

    background-color: black;

  }

 

HTML,BODY{cursor: url("cursor link here"), url("cursor link here"), auto;}

 

.logout-btn,

.blog-entry .kudos-btn{

  background: none !important;

  border: none;

  padding: 0 !important;

  cursor: pointer;

  user-select: text;

  text-decoration: none;

  color: #FF0000;

  color: var(--#FF0000);

}

 

</style>





667 Kudos

Comments

Displaying 20 of 96 comments ( View all | Add Comment )

spacekadyn~`°☆

spacekadyn~`°☆'s profile picture

thank you SO much!!! this was super straightforward and easy to follow

⸜(。˃ ᵕ ˂ )⸝♡


Report Comment

♫︎⋆。𖤓°‧★𝒜𝓅𝑜𝓁𝑜!☆⋆。𖤓°‧♫︎

♫︎⋆。𖤓°‧★𝒜𝓅𝑜𝓁𝑜!☆⋆。𖤓°‧♫︎'s profile picture

thank youu


Report Comment

kamoteluvr

kamoteluvr's profile picture

usinggg! but the icons for blog, profile, and report won't change on mine. how do i fix that?


Report Comment



hi! im not op but i think i figured out the problem. the " " used in the codes seems to be different, which might be why it isnt working. i replaced my quotation marks and got it to work after that!

by roxy; ; Report

Cybernetic.m3ss

Cybernetic.m3ss's profile picture

HOW DO I SAVE ITTTT
T


Report Comment

bvelvet.josefina

bvelvet.josefina's profile picture

tyysmmm ur blogs looks soooooo cooooL!!!


Report Comment

𑣲┆marlea

𑣲┆marlea's profile picture

oh em gee thank you smsm !!


Report Comment

Blegh_XP

Blegh_XP's profile picture

THANK YOU!!!!


Report Comment

morgue

morgue's profile picture

thank you so much !! x


Report Comment

⤷charliesnothere

⤷charliesnothere's profile picture

THANK YOU, YOU'RE A LIFESAVER


Report Comment

att

att's profile picture

thank you!


Report Comment

soren

soren's profile picture

is it possible 2 add autoplay onto blogs? i've tried once but i did something wrong :p


Report Comment



do u mean like music? if so you can do tht by copying the code in bio u have for music to the html in blog!

by ┆spiltmilk ♡; ; Report

▄︻┻ 𝕾𝕮𝕱𝕱𝕯 ︻┳═─-

▄︻┻ 𝕾𝕮𝕱𝕱𝕯 ︻┳═─-'s profile picture

Hey, uhmmmm my code shows up in my blog and also my background wont change to the image id like and i dont know tow to fix that


Report Comment



I don't know if you figured it out or not, but in case future people have this problem:
For the code showing up, make sure you have '' at the beginning of the code, and '' at the end of the code.

by ST☆RG1RL; ; Report

Red_shade666

Red_shade666's profile picture

Literally a life saver TYSM <3


Report Comment

Ergojade

Ergojade 's profile picture

tyvm!!


Report Comment

☆~catalanufa~☆

☆~catalanufa~☆'s profile picture

The code works great, thanks! The only issue I have is that in the preview to my blog posts you can see the code, does anyone know how to fix it?


Report Comment



you can move the code to the bottom of the entry, like keep the text on top and leave the codes at the end

by batdusks; ; Report

thanks! that's the only thing that works

by ☆~catalanufa~☆; ; Report

𝙰𝚗𝚍𝚢

𝙰𝚗𝚍𝚢's profile picture

THANKU SOSOS UCH I REALLY NEEDED THIS <3


Report Comment

maiden ru/eng/deu

maiden ru/eng/deu's profile picture

tysm!!!


Report Comment

♬⋆.˚ Maimai

♬⋆.˚ Maimai's profile picture

Thank you sm!!


Report Comment

✮DAISYYY✮

✮DAISYYY✮'s profile picture

Thank you!! This is so helpful. But How do i add the image in the back? Its not working :sob:


Report Comment



remove the quotation marks in the brackets where you put an image/gif url, so instead of it saying " background-image: url("insert url here"); ", it should say " background-image: url(insert url here); "

i hope this helped ><

by N00dle50upz; ; Report

cloudyrobs

cloudyrobs's profile picture

That is super helpful thank you so much!!!


Report Comment