Can you put your excerpt under your Blog Post Page Title?

Site URL: https://www.rendyreviews.com/movie-reviews/mortal-kombat-review

Hi,

I wanted to know if there's a way I can inject CSS to put like an excerpt under the blog post title before it proceeds my reviews in order to make it look professional. 

Make it look like similar to this in some way.

On 5/6/2021 at 9:31 AM, Rendy said:

Site URL: https://www.rendyreviews.com/movie-reviews/mortal-kombat-review

Hi,

I wanted to know if there's a way I can inject CSS to put like an excerpt under the blog post title before it proceeds my reviews in order to make it look professional. 

Make it look like similar to this in some way.

You can take advantage of the meta tag to get the excerpt content, paste this into Settings->Advanced->Code Injection

<script>
document.addEventListener('DOMContentLoaded', function() {
    var element = document.querySelector('.BlogItem-title');
  	if (!element) {
    	return;
    }
    var newElement = document.createElement('h2');
    newElement.style.order = 2;
    newElement.className = "BlogItem-excerpt";
    newElement.innerHTML = document.querySelector('[property="og:description"]').getAttribute("content");
    var elementParent = element.parentNode;

    elementParent.insertBefore(newElement, element.nextSibling);
});
</script>

Target it as class name BlogItem-excerpt to style it. Btw, you made a great job with the blog, I hardly notice it was created in Squarespace

On 5/9/2021 at 11:03 PM, bangank36 said:

<script> document.addEventListener('DOMContentLoaded', function() { var element = document.querySelector('.BlogItem-title'); if (!element) { return; } var newElement = document.createElement('h2'); newElement.style.order = 2; newElement.className = "BlogItem-excerpt"; newElement.innerHTML = document.querySelector('[property="og:description"]').getAttribute("content"); var elementParent = element.parentNode; elementParent.insertBefore(newElement, element.nextSibling); }); </script>

Oh my gosh, thank you.

Now additional question. Is there a way I can also add my share code to the under the header/excerpt instead of having to inject it into my reviews via the code block.

This is the code:

Thank you.

<!-- ShareThis BEGIN --><div class="sharethis-inline-share-buttons"></div><!-- ShareThis END -->

Hey @Beyondspace -- I can't get this code to work on 7.1 / Fluid Engine. I've tried in Header and Footer Code Injection - still no luck. Do you have an update?

Site URL: systms.club/article/quadrant-method

On 2/23/2023 at 1:56 AM, 99saintclaire said:

- I can't get this code to work on 7.1 / Fluid Engine. I've tried in Header and Footer Code Injection - still no luck. Do you have an update?

Site URL: systms.club/article/quadrant-method

Try this code with new class name

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var element = document.querySelector('.blog-item-title');
  	if (!element) {
    	return;
    }
    var newElement = document.createElement('h2');
    newElement.style.order = 2;
    newElement.className = "blog-item-excerpt";
    newElement.innerHTML = document.querySelector('[property="og:description"]').getAttribute("content");
    var elementParent = element.parentNode;

    elementParent.insertBefore(newElement, element.nextSibling);
});
</script>

@Beyondspace : @tuanphan : Hello!  Thank You for providing an answer to this question.  I am implementing it on a client site.  I hope you don't mind a follow-up question as I am far from a Javascript expert.  It looks like the script is pulling the excerpt content but not the formatting.  For example, in the screenshots below when I place a line break in the excerpt, the line break is not pulled over with the script.  All the text is captured in HTML on the same line.  How would I amend the script for line breaks to be captured?

There also appears to be a character count restriction.  Can that be lifted?

Any help you can provided would be appreciated! 😃

SCREENSHOT 1 : Excerpt

SCREENSHOT 2 : HTML with script executed