Jump to content

Splitting up blog posts by category

Recommended Posts

Hi there! My website has a blog section with all posts within it. I have created categories that I can tag for each individual blog but I want to add the option to go to each individual category when readers are navigating from the home page? I have attached a screenshot and circled the part I’m talking about. How am I able to make this a drop down where you can pick based on category? But still leave ‘blog’ as an option to click that has all of them in one? 

Link to comment
23 hours ago, higlobe said:

That would be AMAZING thank you @tuanphan 

So a dropdown will allow it to say ?

BLOG (the dropdown title and main blog joint page) THEN categories below 
Destinations
Travel Tips
Travel Tales 

 

https://www.higlobetravel.net

Yes. You can create. In case you don't know how to, let me know, I will do a quick video guide.

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

Are you looking to do something like this? Tuanphan helped me design the look of my dropdown with a bit of code which you can see here. My blog is quite large and I created categories using a second blog page to search for posts on the main blog page. Try it out. 

https://www.derricksrandomviews.com/blogsummary

Edited by derricksrandomviews
Link to comment

To make title clickable, you can follow these steps.

Here I test code on my site, you can do similar on your site.

Suppose we need to make "Packages" title clickable to new url.

image.thumb.png.8f2afcd64cc68fe7667d81480ca1626e.png

#1. First, you need to know this.

image.thumb.png.2b5e8bbd068ad0c8ba15cc118fdbd154.png

#2. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
	$('div.header-nav-item:nth-child(2)>a').click(function() {
		window.location = "https://google.com";
	});
});
</script>

image.thumb.png.5718f753b8e262257846cef58bf492cf.png

Replace Google with your desired url

#3. Note
This code runs on Desktop Only. If you need code for mobile, you can comment below, I will adjust the code for your case.

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
20 hours ago, higlobe said:

Thank you so much @tuanphan I would definitely be interested in the coding needed for mobile as well! 

By default, when clicking Title >> It will open a box with Subitems

If make Title clickable >> this box won't appear.

You can check and let me know, if you still want to continue, I will give code.

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.