Bela's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Image Before the Blog Post

This is what it looks like on your profile:


The Code:

<style>
.blog-preview p:not(:first-child) {
      display: inline-block;
      padding-right: 15px;
      text-align: center;
      width: 110px;
}
.blog-preview p:not(:first-child):before {
      content: "";
      display: block;
      width: 90px;
      height: 90px;
      background: url("https://media.giphy.com/media/vYFfrBKq2KF3SAYhWZ/giphy.gif");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
}
</style>

I would recommend using a gif image to make your profile more fun or a png image to make the image stand out in your profile but any image can be used.


If you have a Pinned Blog post then you're going to want to add the following code to avoid any glitches or issues with the code:

<style>
.blog-preview p a:before{
      display:none!important;
}
</style>

If you only want 4 blog posts to show up to make it look even, then to hide the last blog post, this is the code:

<style>
.blog-preview p:last-child{
      display: none;
}
</style>

and this is what it looks like:

If you have any issues or questions, let me know :)


4 Kudos

Comments

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