How to create sidenotes next to your Jekyll blog text

1 minute read

In this post I will show you how you can create a sidenote next to your markdown blogpost.

I got the idea of a picture sitenote from the German online newspaper https://perspective-daily.dePerspective Daily. In their free article sample on global oil resources to the right of the text you can find interactive sidenotes (hyperlinks):


Now that’s a fancy-pants hyperlink that makes fun exploring. On this page, maybe you already hovered over the glasses next to the first paragraph. I like that the design doesn’t distract the reader with color-changes in the text. Rather, it allows you to offer extra content or explanations rounded up with links. I think it’s a nice add-in to make the read as pleasing as possible for everybody. So, how do you create it?

Source code

In your markdown post, place this html element:

<span class="sidenote">
  <cite class="quelle">
    <a href="https://perspective-daily.de/" target="_blank">https://perspective-daily.de</a>
  </cite>
  <span>Perspective Daily</span>
</span>

Then, somewhere in the document, reference a CSS sheet…

<link rel="stylesheet" href="/sidenote.css">

with the following content:

.icon-source:before, .sidenote > cite.quelle:before {
    background-image: url("https://raw.githubusercontent.com/moxpower/moxpower.github.io/master/images/sidenote_glasses_soft2.png");
    background-size: 45px 45px;
    position: relative;
    right: -20px;
    display: inline-block;
    float: right;
    padding-top: -115px;
    width: 45px; 
    height: 45px;
    margin-right: -45px;
    margin-top: -10px;
    content:"";  
}
.sidenote > cite > a {
    display: none;
    position: relative;
    float: right;
    margin-right: -218px;
    z-index: 10;
    text-decoration: none;
    color: #9e9e9e;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    font: italic 15px/26px 'Arial', serif;
}
.sidenote > cite:hover {
          text-shadow: none;
          background: none; 
}
.sidenote > cite:hover:before {
            color: #9e9e9e; 
}
.sidenote > cite:hover > a {
            display: block;
            border-bottom: none; 
}
.sidenote > cite:hover + span {
        border-bottom: #9e9e9e 1px solid; 
}

Tags: ,

Updated: