Jump to content

Adding code below the Blog Title

Recommended Posts

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

642351873_ScreenShot2021-08-16at4_16_57PM.thumb.png.2e65fe2289189eb75579ae607911b428.png

 

Quote

1768326403_ScreenShot2021-08-16at4_19_43PM.thumb.png.59ae75d654c6cfb1f9b7a5b0f2bd7f65.png

 

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!

Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

 

Screen Shot 2021-08-18 at 3.25.43 PM.png

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.