Jump to content

Adding a button to the top of all blog posts

Recommended Posts

  • Replies 3
  • Created
  • Last Reply

Yes you could use custom scripting to insert a button at the top of blog posts.

Something like:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

$(document).ready(function () { 
  $("[YourbuttonHTML]").insertBefore($("body.view-item article > h1 "));

You could also insert the button in the page footer and hide it using css. Then you could use a variation of the code above to move the button from the footer to above a blog post header.

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment

Thanks for your help @silvabokis

How would you go about adding a mailchimp signup form to show up before each blog? The code is below.

<!-- Begin MailChimp Signup Form -->

<link href="//mailchimp.css" rel="stylesheet" type="text/css">
<style type="text/css">
 #mc_embed_signup {
   font:14px Open Sans, Helvetica,Arial,sans-serif;
   border-top: 1px solid #eeeeee; 
<div id="mc_embed_signup">
   form details - too long to post.

<!--End mc_embed_signup-->

Link to comment

I would:

  • drop the stylesheet information into the blog's code injection point
  • insert the form code into the site footer in a code block, wrapped with a div called something like < div id="chimpFormWrapper" > [form code] < /div >
  • set #footer #chimpFormWrapper to display:none
  • write a script (similar to the one above) that, on blog posts, moves div#chimpFormWrapper above body.view-item article
  • add any additional css styling needed to make #chimpFormWrapper and its contents look neat and tidy.

The above looks like a lot but it's probably 30 to 45 minutes work to build & test.

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment


This topic is now archived and is closed to further replies.

  • 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.