Squarespace Blog Post Sidebar Tutorial / How to create a sidebar in Squarespace 7.1

In this tutorial, you'll learn how to create a sidebar using a summary block. This sidebar can be added to any blog post and when you need to make changes to it, all the posts will be updated at the same time! 🙌

In this free Squarespace tutorial, you'l learn how to unlock the secret power of the Squarespace Summary Block and show you how to use it to create a simple yet stylish sidebar for your blog posts.

Use the sidebar to display key information like an author bio, important links, your latest freebie, or even a mini table of contents that can direct people to related info.

The secret sauce is the Summary Block: you can use this built-in feature to create a functional side bar, and some CSS to personalize it to match your blog's style.

- - -
Want to get more creative with code? Get a copy of the 5 codes I use on every Squarespace website I build + info on how to use them: https://insidethesquare.co/five
- - -
Here are some time stamps to important parts of the video:
01:31 how to create a sidebar blog in your not linked section
02:06 how to add an image to your sidebar: use the thumbnail feature!
02:16 how to link your post to the right place: add a source URL and make sure you toggle on the right link
02:50 how to add button text to your Squarespace sidebar: we do this with a blog post title that can be customized with code
05:29 how to add a sidebar to your squarespace blog
07:49 how to customize it with code

Here is the code I used in the video; make sure you change the colors and padding to match your own unique style:
/* sidebar buttons */
article .summary-item:nth-of-type (2) .summary-title{
background:yellow;
text-align:center;
padding: 5px;
border: 2px solid orange
}
article .summary-item:nth-of-type(3) .summary-title {
background:pink;
padding: 5px;
border: 2px solid red;
text-align: center
}
article .summary-item:nth-of-type(4) .summary-title｛
background: orange;
padding: 5px;
border: 2px solid pink;
text-align:center
}
/* sidebar button hover effect */
article .summary-title:hover｛
background:#fff!important;
border-color:#333!important
}

Related Content You'll Probably Love:
🎨 Free guide to creating colors with code: https://insidethesquare.co/colors
📑 My personal collection of CSS codes for Squarespace: https://insidethesquare.co/css
❤️ Like this tutorial? BuyMeACoffee to say thanks: https://buymeacoffee.com/insidethesquare
- - -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → https://insidethesquare.co/inside10
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥

#Squarespace #blogging #webdesign #webdevelopment #sidebar #summaryblock #tutorial #howto #DIY #website #design #blogpost #creative #Squarespace71 #contentcreation #digitalmarketing #webdesigner #designinspiration #creativity #coding