Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
341841

Adding a button to the top of all blog posts

Question

Hi I was wondering if there was a way to add a button that will show at the top of all blogs that are live. It would essentially be a subscribe to our mailing list button that'll ideally be above the blog itself.

Thank you in advance

Edited by 341841

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

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>

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

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.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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 {
   background:#fff; 
   clear:left; 
   font:14px Open Sans, Helvetica,Arial,sans-serif;
   border-top: 1px solid #eeeeee; 
 }
</style>
<div id="mc_embed_signup">
 <form>
   form details - too long to post.
 </form>
</div>

<!--End mc_embed_signup-->

Edited by 341841

Share this post


Link to post
  • 0

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.

Edited by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post

Create an account or sign in to comment

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

Sign in to follow this  

×
×
  • Create New...