Add a "print" button all of my blog posts in the header

Site URL: https://www.halepule.com/blog

Hi everyone,

I'd like add a "Print Recipe" button to the top of all of my blog posts. I know I can go in individually and create those buttons but I'd like to have the script to apply it in the code injection of the blog page itself. I tried one I found here on the forum but it did not work.

Thanks for your help!

you could inject something like this. best to do it in the "post blog code injection" as this happens after the blog has been rendered. in this example i've appended the link to my blog-item-meta-wrapper which is a 7.1 layout, but I'm not sure what your layout is.

I think you should probably change .blog-item-meta-wrapper to .Blog-meta for your site.

<script>
  const printLink = document.createElement("a");
  printLink.setAttribute("href","#");
  printLink.setAttribute("id","printlink");
  printLink.onclick=(e) => { e.preventDefault(); window.print(); }
  printLink.appendChild(document.createTextNode("Print"));
  document.querySelector(".blog-item-meta-wrapper").appendChild(printLink);
</script>

you can then style this link in your custom css by attaching a rule to #printlink

I think all you need do  is add a print friendly button to your blog header. Then when they are on a post it will print the page. I have used this one on websites to allow visitors to print flyers and pages. The code would go in a markdown block. 

https://www.printfriendly.com/button