How can I add a sidebar into my blog posts?

Hi

I know i can add in a manual sidebar using spacers in my blogposts (using the Rally template).

Is there css code to enable me to add this sidebar into every blog post page on my site?  If not, I have to do it manually every time.

You can use this sidebar plugin.

• Ability to add two/more sidebars on one page

• Option to enable/disable a sidebar on specific pages

• Change styles without special knowledge

• Change styles for a specific sidebar without affecting others

• Works with any template

My method might seem weird but It's been working in my personal site for over 2 years with no problems. You can see instructions and the result in my blog.

- You need to go through all blog posts though to add an empty Code Block in the place where you want your sidebar to be.
+ The good part is that you don't have to code and style each one of them. They will be filled automatically.

Disclaimer: I'm not a coder. I used other people's pieces of code from this forum to implement this method. If you see mistakes or know how to make this method better, please comment 👋🏽

1) Choose a published blog post as a Source. It will contain the initial code. Every time you want to make changes to your sidebar globally you edit only the Source. I use Search in the blog editor to quickly access the Source blog post.

2) Create your sidebar manually 😞 using a Code Block. Make sure the div has a unique id. The code inside the div can be anything you want - images, links, lists, buttons, lines etc. This is just an example:

<div id="my-mockup-sidebar">
  <img src="https://link-to-your-image.jpg">
  <p style="color:grey;font-size:14px;" align="center">
  <a href="/blog?category=Puppies">Link to category 1</a><br>
  <a href="/blog?category=Kittens">Link to category 2</a><br>
  <a href="/blog?category=Raccoons">Link to category 3</a>
  </p>
</div>

-----------------------------------

OPTIONAL, for responsive design:

Instead of the code above, I have several div's named #my-mockup-sidebar-1, #my-mockup-sidebar-2, #my-mockup-sidebar-3 containing different elements to have control over what is shown on mobile with stacked layout and what isn't. Example:

<!-- contains profile pic and some text-->
<div id="my-mockup-sidebar-1">
  <a href="/about-me"><img src="https://link-to-profile-photo.jpg"></a>
  <p style="font-size:14px;line-height:1.3em;">Your text</p>
</div>

<!-- contains an image and the list of categories -->
<div id="my-mockup-sidebar-2">
  <img src="https://link-to-image-category-title.png">
  <p style="color:grey;font-size:14px;" align="center">
  <a href="/blog?category=Puppies">Link to category 1</a><br>
  <a href="/blog?category=Kittens">Link to category 2</a><br>
  <a href="/blog?category=Raccoons">Link to category 3</a><br><br>
  </p>
</div>

<!-- contains social media links -->
<div id="my-mockup-sidebar-3">
  <center><img src="https://social-media-title.png"><br>
  <a href="https://socialmedia.com/afterworkdiy" target="_blank"><img src="https://social-media-logo-1.png"></a></center>
  <a href="https://socialmedia.com/AfterworkDIY/" target="_blank"><img src="https://social-media-logo-2.png"></a></center>
</div>

-----------------------------------

3) Go through all other blog posts and add a Recipient Code Block with the code below. The empty div inside this block also needs to have a unique name, but the same for all Recipient blog posts. This is the dropzone of the sidebar you created earlier:

<!--code for the dropzone -->
<div id="mockup-sidebar-container"></div>

4) Go to Settings - Advanced - Code Injection - Footer and add this code that forces those Recipient Code Blocks to load the content of the Source:

<script>
  $(document).ready(function() {
    $('#mockup-sidebar-container').load('/blog/source-post #my-mockup-sidebar');
  });
</script>

Hit save and all blog posts now have the same sidebar you created only once in the Source blog post.

-----------------------------------

OPTIONAL, continued:

If you chose to split Source div's to display or hide some of them on mobile, then instead of the code above use the code below. The 640 value is your desired mobile breakpoint and can be changed:

<script>
  $(document).ready(function() {
    if ($(window).width() > 640) {
      $('#mockup-sidebar-container').load('/blog/source-post #my-mockup-sidebar-1, #my-mockup-sidebar-2, #my-mockup-sidebar-3');
    }
    else {
      $('#mobile-sidebar-container').load('/blog/source-post #my-mockup-sidebar-2');
    }
  });
</script>

This code loads all 3 div's: profile pic, categories and social media on big screens and on on screens narrower than 640 px it shows only categories (or whatever you will have in #my-mockup-sidebar-2 or whatever you will name it)

-----------------------------------