spiral notebook decoration [blog code]

blog makeover diaries

so, since some of you (by some, i mean two people) asked about the blog codes i use on my page, i figured, why not start another little blog series where i share them?

and since i'm currently unemployed, with apparently too much time on my hands, and i love blogging, i'm just going to start it now and officially make blogging my full-time job.

so, welcome to blog makeover diaries!

before we get into it, i feel like i should put a little disclaimer here: i am by no means an expert at coding. most of the things i know about blogger html and css are the result of teaching myself, messing around with things, breaking my own blog, fixing it again, and occasionally staring at a piece of code for ten minutes wondering why it isn't doing what i want.

so please keep that in mind when i share these codes! some of them might not be the most efficient way to achieve a certain decoration, and some of them might probably make someone who actually knows what they're doing go, “...you could have done this much more easily.”

i'm still learning, too. so if you're more experienced with html/css and happen to notice that i've done something in a slightly ridiculous way, please feel free to correct me. i genuinely don't mind 💜

for the very first entry of this diaries, i thought i'd start with something that has been sitting on my own blog for a while: the spiral notebook decoration around my content posts.

[example of how the spiral looks on another blog theme]

it's a tiny detail, but i love how it makes each post feel a little more like an actual notebook, and somehow makes the whole thing feel much more personal.

okay, so here we go.

before we get to the code, open Blogger → Theme → Customize → Advanced → Add CSS. this is where you'll paste the code i'll be sharing below. if you've already added other CSS codes before, don't worry, you can keep them all in the same box. just make sure to paste each new code underneath the existing ones so you don't accidentally replace anything.

here's the code:

spiral notebook code

HTML · CSS

THE CODE

/* SPIRAL NOTEBOOK POST */

.post {
  position: relative;
  z-index: 1;
}

/* Spiral */

.post::before {
  content: "";

  position: absolute;

  top: -35px;
  left: 0;

  width: 100%;
  height: 42px;

  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKL60C4gM0qBIVY2tsWsKeyR3c0FqaPxdszyU4cFhsjnf8mTl6FCC6guj-VEx8u59ps_qbXLYitdifQGXTDOl3-gln7dRY686GvYbHZVc4nytae4T5rZ5nRvJAz1KunsJLAtN-rPDqJfx5_DWGsUduJDoy-BXMMReIFb29t9FoefF7zHYwiDZZXMN-Zwum/s612/Untitled%20design_nobg_preview_photiu.ai%20(1).png");

  background-repeat: repeat-x;
  background-position: center center;
  background-size: auto 42px;

  pointer-events: none;
  z-index: 20;
}

/* Date */

.post-timestamp,
.post-header-line-1,
.post-meta,
.post-meta a,
.date-header,
.post-footer-line-1 {
  position: relative !important;
  z-index: 50 !important;
  top: -10px !important;
}

/* Post Title */

.post-title,
.entry-title {
  position: relative;
  z-index: 30;

  transform: translateY(10px);
}

/* MOBILE */

@media screen and (max-width: 600px) {
  .post::before {
    top: -27px;
    height: 36px;
    background-size: auto 36px;
  }

  .post-timestamp,
  .post-header-line-1 {
    transform: translateY(-5px);
  }

  .post-title,
  .entry-title {
    transform: translateY(8px);
  }
}

.post-timestamp {
  position: relative !important;
  top: 8px !important;
}

Hope it works!

the code above uses the pink spiral image you see on my blog. if you'd like to use a different spiral, you can easily swap it for an image of your choice. just make sure the image you use is a png with a transparent background. find the background-image: url("..."); line in the code and replace the url inside the quotation marks with the direct url of your chosen image.

for example, you can use this spiral image

open this image in new tab, copy the url and put it inside background-image: url("...");  

you can also adjust the image size to make the spiral bigger or smaller by changing the background-size: value in the code. make sure to leave the rest of the code as it is.

note: please keep in mind that this code may not work perfectly with every blogger theme. some themes might require additional or more complex adjustments to make the code work properly and match your blog’s existing layout and design.

once you've found the settings that look right and feel just right for your blog, voilà! your blog should now have its very own little notebook look. it's such a tiny change, but somehow it makes the whole thing feel a little more personal, like you've turned your little corner of the internet into an actual notebook of your own.

and that's it for the very first blog makeover diaries! i hope this tutorial was easy enough to follow, even if you're completely new to html and css. if you decide to try it out on your own blog, i'd love to see how you make it your own! and if anything doesn't work as expected, feel free to leave a comment and i'll do my best to help. remember, i'm still learning too, so we're all figuring this little blogging thing out together. see you in the next code!

xoxo,

your local girl