Adding code below the Blog Title

Site URL: https://www.sayeureqa.com/eureqa-insights

Hi, I'm trying to add a Print button on blog posts for this website: https://www.sayeureqa.com/eureqa-insights

This is the code I'm trying to add: https://www.squaredesignguild.com/blog/print-recipe-squarespace

<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'block';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfEncodeImages = 0;var pfShowHiddenContent = 0;var pfBtVersion='2';(function(){var js,pf;pf=document.createElement('script');pf.type='text/javascript';pf.src='//cdn.printfriendly.com/printfriendly.js';document.getElementsByTagName('head')[0].appendChild(pf)})();</script><a href="https://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="Printer Friendly and PDF"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="//cdn.printfriendly.com/buttons/printfriendly-pdf-button.png" alt="Print Friendly and PDF"/></a>

Currently, the Advanced > "Blog Item Code Injection" feature (the bottom option) adds the code below the blog post:

Quote

Quote

And I'm trying to place those green Print and PDF buttons on the top left, under the Blog title. Is there a way to do that? Thank you!

Don't remove any code. Try adding this to last line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('.blog-item-injection').insertAfter('.blog-item-title h1');
	});
</script>

10 hours ago, tuanphan said:

Don't remove any code. Try adding this to last line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('.blog-item-injection').insertAfter('.blog-item-title h1');
	});
</script>

 

Thank you! This is perfect!

11 hours ago, tuanphan said:

Don't remove any code. Try adding this to last line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('.blog-item-injection').insertAfter('.blog-item-title h1');
	});
</script>

 

@tuanphan Follow up question, what code would I need to get the button on the upper right corner of the blog post instead? So it looks like this below. Thanks!

Hi @tuanphan super sorry but just wanted to follow up on my additional question 😄 what code would I need to get the button on the upper right corner of the blog post instead? So it looks like image above. Thanks!

On 8/20/2021 at 8:10 AM, coffeenclouds said:

Hi @tuanphan super sorry but just wanted to follow up on my additional question 😄 what code would I need to get the button on the upper right corner of the blog post instead? So it looks like image above. Thanks!

Don't remove any code. Add this to Design > Custom CSS

/* print button */
.blog-item-injection {
    position: absolute;
    right: 0;
    top: -10px;
}