Blog

Blog Layouts#

Mamo comes with 4 blog layouts to cover all the needs.

• Creative - You can find the demo here.
• List - You can find the demo here.
• Carousel - You can find the demo here.
• Carousel - Text - You can find the demo here.

"scroll-out.min.js" is required for posts reveal effect on scroll (Scrollout is required anyway in all pages because many default effects rely on it, Just make sure not to remove it).

"Grid" and "Masonry" portfolio layouts require "imagesloaded.pkgd.min.js", "isotope.pkgd.min.js" & "isotope.min.js". Include the scripts before "scripts.min.js" at the bottom of the page body, "imagesloaded.pkgd.min.js" goes first then "isotope.pkgd.min.js" then "isotope.min.js".

Blog Pagination#

The "Creative" and "List" blog layouts can have ajax pagination or "load more" buttom. You can find a demo for the pagination in blog-pagination.html for your reference.

...
<div class="pth-posts pth-posts--list">
	<div class="pth-posts__inner">
		...
	</div>

	<div class="pth-pagination">
		<a href="blog-pagination-2.html" class="pth-pagination__more" data-next="2" data-max="2">
			<span>Load More</span>
			<span>Loading</span>
		</a>
	</div>
</div>
...

There are a couple of "data" attributes that define the settings of the button, let's break them down:

• data-next - Defines the index of next page.
• data-max - Defines the total number of paginated pages.

These data used to identify when the pagination reaches the end to hide the "more" button.