Jump to content

Move the Squarespace 7.1 blog comment box

Recommended Posts

I tried, by creating a code block with html (see below) 

But now I'm getting this. So I'm not sure I solved it.  image.thumb.png.7c3526a40f92cc1924c4b8b53207ccc2.png

<section class="blog-item-comments">
        <div class="blog-item-comments-toggle-wrapper">
          <div id="blogItemCommentsContent" class="blog-item-comments-content" data-content-field="comments" style="z-index: 1; position: relative; cursor: pointer;">
            
            <div id="comments-5eeb4e234d4d4012b8f6c372" class="p-comment">
              
  <div class="squarespace-comments empty" id="comments-5eeb4e234d4d4012b8f6c372" data-item-id="5eeb4e234d4d4012b8f6c372" data-public-comment-count="0" data-comment-state="1"><div class="comments-content" style="opacity: 1;"><section id="comments">

<!--COMMENTS HEADER-->
<div class="header-controls">
  <div class="controls">

    <h3 class="comment-count">
      <span>Comments (0)</span>
    </h3>

    <div class="comment-controls">

      <span class="comment-sort">
        <span>Newest First</span>
        <select class="hidden-ordering">
          <option value="1">Oldest First</option>
          <option value="2" selected="selected">Newest First</option>
          
        </select>
      </span>

      
      <span class="subscribe subscribe-control">Subscribe via e-mail</span>
      

    </div>

  </div>
</div>


<!--NEW COMMENT TOP-->

<div class="new-comment-area top-level-comment-area edit-mode logged-in-commenting-unsupported">
<!--    <span class="squarespace-comment-login"></span>    <div class="new-comment-title">Add Comment</div>-->
  <div class="input">
    <form action="#" method="post" class="comment-form">
      <textarea class="comment-input" name="comment" data-defaulttext="Leave a comment here." data-edited="false"></textarea>                                  
    </form>
  </div>
  <div class="comment-btn-wrapper">
    
    <span class="btn-text preview-comment top-level-preview-btn">Preview</span>
    <!--toggle class on .new-comment-area to hide/show the appropriate button below
    <span class="btn-text edit-comment">Edit</span>-->
    
    
    
      
        <span class="comment-btn sqs-system-button sqs-editable-button-font sqs-editable-button-shape">Post Comment…</span>
      
    
  </div>
</div>


<!--COMMENT LIST-->
<div class="comment-list avatars-hidden" id="yui_3_17_2_1_1602596854699_661">
  
</div>

</section></div></div>


            </div>
            
          </div>
        </div>
      </section>

 

Link to comment
On 10/14/2020 at 5:58 PM, lieslmaduro said:

Thank you so much for checking it out.  I removed the code. And I'm using a Business plan. 

Add to Blog Page Settings > Advanced > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('section.blog-item-comments').insertBefore('.sqs-block-summary-v2');
	});
</script>

--

If you need to create Related Posts, you can use this plugin.

Quote

The plugin will automatically add a summary block if it finds related posts based on categories and tags of the current post. All options of Summary Block will be available for customization. The current post will be hidden.

 

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
  • 1 year later...
On 3/11/2022 at 6:59 PM, Terhi said:

Question about this same topic. I'm trying to add text and code block under the comment box. 
How to do it? The code above wasn't enough. 

I'm using also the business plan.

Screenshot 2022-03-11 at 13.58.45.png

Just a simple text or? We can give code easier.

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
  • 1 year later...
On 10/15/2020 at 10:24 PM, tuanphan said:

Add to Blog Page Settings > Advanced > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('section.blog-item-comments').insertBefore('.sqs-block-summary-v2');
	});
</script>

--

If you need to create Related Posts, you can use this plugin.

 

Hi @tuanphan,

I'm hoping to change the order of things on my blog posts.

For example: https://www.meghanfandrich.com/blog/fallen-leaf

  • Recently updated to Business plan. 
  • I downloaded & installed the Related Posts plugin, above.

On blog posts, I'd like the blog elements to appear in this order:

  1. Body text & photos
  2. Author bio
  3. Newsletter signup
  4. Related posts (using plugin)
  5. Tags
  6. Comments
  7. Footer

Is that possible?

Thanks,
Meghan

Link to comment
23 hours ago, MF0708 said:

Hi @tuanphan,

I'm hoping to change the order of things on my blog posts.

For example: https://www.meghanfandrich.com/blog/fallen-leaf

  • Recently updated to Business plan. 
  • I downloaded & installed the Related Posts plugin, above.

On blog posts, I'd like the blog elements to appear in this order:

  1. Body text & photos
  2. Author bio
  3. Newsletter signup
  4. Related posts (using plugin)
  5. Tags
  6. Comments
  7. Footer

Is that possible?

Thanks,
Meghan

Move this only?

image.thumb.png.d8add5636b9b97bd559d8ca6257e5ae6.png

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
14 hours ago, MF0708 said:

Sorry, yes, enabled now! And I'll stop adjusting things. : )

Add to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
   jQuery(document).ready(function($){
  $('section.blog-item-comments').insertBefore('div.blog-item-content-wrapper div.newsletter-block');
})
</script>

image.thumb.png.ff6e619914c8f49e02c5384a359f7eab.png

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
16 hours ago, tuanphan said:

Add to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
   jQuery(document).ready(function($){
  $('section.blog-item-comments').insertBefore('div.blog-item-content-wrapper div.newsletter-block');
})
</script>

image.thumb.png.ff6e619914c8f49e02c5384a359f7eab.png

Thanks! I'm trying to move up the author profile, however, not the comments. Is there a way to move it instead?

Link to comment
10 hours ago, MF0708 said:

Thanks! I'm trying to move up the author profile, however, not the comments. Is there a way to move it instead?

You mean move author above newsletter and keep comment still at bottom of page?

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
On 12/21/2023 at 1:06 PM, tuanphan said:

Add to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
   jQuery(document).ready(function($){
  $('section.blog-item-comments').insertBefore('div.blog-item-content-wrapper div.newsletter-block');
})
</script>

image.thumb.png.ff6e619914c8f49e02c5384a359f7eab.png

Use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
   jQuery(document).ready(function($){
  $('.blog-item-author-profile-wrapper').insertBefore('div.blog-item-content-wrapper div.newsletter-block');
})
</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

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.