Jump to content

BLOG: Need Help With Custom Code

Recommended Posts

Site URL: https://www.closeitwithkell.com/blog

Hello, 

I reached out to square space in an effort to pretty much mimic the look and feel of the Square Space blog - https://www.squarespace.com/blog. Squarespace informed me that the blog was created using custom code, and was essentially sent to this forum for help.

What I am particularly interested in is the following: 

Header:  I would like to create a header similar to this.  Do you know if it is simply text or an image? 

image.thumb.png.741f060e781920a73bf8037d8cc048ef.png

Categories:  I would like to list out the categories on the top 

image.thumb.png.4221490c7a00bf778ff34192386eafcd.png

Tagging: The ability for my tags to appear like this.  Right now tags look like the same as the blog post text.  

image.thumb.png.448e8ca39c0cd61fff7faeac300e7327.png

Social Sharing:  I would like to add the ability for visitors to be able to share the block posts. 

image.png.fa44282a5f0b39d7c3c8d685b3c26c2e.png

 

Hero Blog Posts: How do i add motion to the blog, as you scroll through.  Additionally, how do I structure the posts themselves so that the latest post is the hero.  Like the SquareSpace blog does. 

 

Thanks, 

 

Kellen 

Link to comment
  • Replies 1
  • Views 342
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi,

#1. Header

Image is easiest

#2. Categories

Click on each link >> Filter posts on current page or open new page?

#3. Tags

Add to Design > Custom CSS

/* Blog tags */
span.blog-item-tag-wrapper:after {
    opacity: 0;
}
a.blog-item-tag {
    background-color: #dcdcdc;
    padding: 5px;
    border-radius: 10px;
}

 

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.