HOW 2 CUSTOMIZE UR BLOG ENTRY POST LAYOUTS!!

HOW 2 CUSTOMIZE UR BLOG ENTRY POST LAYOUTS!!




 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>

 

byeeeeeeeeee!!!!




4 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

VAMPIRE_FREAK

VAMPIRE_FREAK's profile picture

AAHHH OMG TY FOR THIS!! I know html but goodness me am I going insane trying to make my blogs look nice- TYSM!!! :DD


Report Comment