Report Blog Entry
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>
.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>
.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>
.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 :)
Comments
Displaying 2 of 2 comments ( View all | Add Comment )
Miguel
Hi, hello again! Sorry to bother you, but would there also be a way to show six entries instead of five? It's a very specific question, but for some reason (which I can't comprehend because I presently suck at coding) I can only see five entries and anything after that it's hidden. I'd love to have two rows of three entries each, if that would be possible.
Spacehey only shows 5 blogs as a default, it doesn't show six. that's why I added the code at the bottom to hide the 5th blog if you wanted a more even look on your page with only four blogs :)
by Bela; ; Report
if you want to add another blog, you'd have to do it manually. I can try to do the code for that if you want lol
by Bela; ; Report
That'd be so wonderful, thank you for offering to do that! But only if you have a minute to spare and it's not too complicated; I really wouldn't want to impose. I'm just another stranger surfing the net, after all!
by Miguel; ; Report
yeah no worries, it was fun to work on this :)
Just replace the Sample Title of Blog Here with your own title and the link # with your blog link. If it still looks a bit off, you can try changing the top and right numbers for the desktop code.
<style>
/* the mobile code */
@media(max-width: 30em) {
.sixthblog p {
right:130px!important;
top:245%!important;
width: 125px!important;
}
}
/* desktop code */
.sixthblog p {
position: absolute;
right:410px;
top:335px;
display: inline-block;
vertical-align: top;
padding-right:15px;
text-align: center;
width: 120px;
}
.sixthblog p:before {
content: "";
display: block;
width: 90px;
height: 90px;
background: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c768d84f-d0cd-4d7d-bdd3-10b18e915257/dc58vd1-72aa5cb1-8bfa-47c0-aa17-6b6e353e9497.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2M3NjhkODRmLWQwY2QtNGQ3ZC1iZGQzLTEwYjE4ZTkxNTI1N1wvZGM1OHZkMS03MmFhNWNiMS04YmZhLTQ3YzAtYWExNy02YjZlMzUzZTk0OTcuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.QvUcR_bS6fJS5XYxJJ9_0gPGHc2fEdBhLxMwRZqCNsI");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
</style>
<div class="sixthblog">
<p>Sample Title of Blog Here (<a href="#">view more</a>)</p>
</div>
by Bela; ; Report
THIS IS INCREDIBLE! Thank you so much, I'll adjust and use it right away! Thank you!
by Miguel; ; Report
Miguel
Using this on my profile! Is there any way to make all images stay at the same height, instead of going up and down depending on how much text there is below them?
you can add vertical-align: top; to the .blog-preview p:not(:first-child) code. let me know if this helps!
by Bela; ; Report
This is so wonderfully clever, and it worked like a charm! Thank you so much!
by Miguel; ; Report