Blog


We created ajax-powered blog with dynamically positioned sidebar (it changes position due to blog direction). Basic markup for blog:

<div class="pt-page" id="blog-section">
	<div class="back-button hidden-xs">
		<a href="index.php" class="back">
			<i class="fa"></i>
		</a>
	</div>
	<section id="blog" class=" page-content blog section-scroll blog-list">
		<div class="container">
			<div class="row">

				<section class="col-md-9 blog-content">
					 // ajax loaded posts
				</section>

				<aside class="col-md-3 sidebar">
					// sidebar content
				</aside>
			</div>
		</div>
	</section>
</div>

// single post container 
<div class="single-post-wrapper">
	<div class="blog container section-scroll">
		<div class="row">
			<section class="col-md-9 blog-content">
			</section>
		</div>
	</div>
</div>


Full posts are loaded into single-post-wrapper. See file post-content-ajax.php for post template.

To use blog lazy load function you need to create appriopriate files. Every pack of posts has link to next pack. You only need to provide this url in similiar manner.


<article class="small-post blog-post">

	<i class="fa icon-refresh icon-spin"></i>
	<div>
		<div class="images-posts">
			<a data-href="post-content-ajax.php" href="post-mobile.php?p=post-content-ajax.php">
				<figure>
					<img src="http://deelay.me/1000/http://192.168.1.233/mdst/img/img-280x195/5.jpg"/><span class="read-more"><span>read more</span></span>
				</figure>
			</a>
		</div>
		<div class="post-content">
			<header class="hidden-xs">
				<div class="date-post">
					<i class="icon-clock"></i>
					<a data-href="post-content-ajax.php" href="post-mobile.php?p=post-content-ajax.php">12/03/2014</a>
				</div>
				<div class="comments-posts">
					<i class="icon-bubble"></i>
					<a data-href="post-content-ajax.php" href="post-mobile.php?p=post-content-ajax.php">8</a>
				</div>
				<div class="posts-categories">
					<i class="icon-folder-alt"></i>
					<a data-href="post-content-ajax.php" href="post-mobile.php?p=post-content-ajax.php" class="name-category">Workshops</a>
				</div>
			</header>
			<div class="post">
				<a data-href="post-content-ajax.php" href="post-mobile.php?p=post-content-ajax.php"><h1>creative workshop</h1></a>
				<p>
					Vestibulum accumsan nunc in fermentum ullamcorper. Quisque pharetra viverra odio id bibendum. Nullam in massa dolor. Praesent ultricies id enim eu auctor. 
				</p>
			</div>
		</div>
	</div>
</article>	
// (...) place for another posts


// loader with next posts url
<article class="small-post blog-post load-more" data-href="blog-content-2">
	<div>
		<div class="spinner">
			<div class="bounce1"></div>
			<div class="bounce2"></div>
			<div class="bounce3"></div>
		</div>
	</div>
</article>	

Delete last article if you don't want to load more posts. With good url provided within article.load-more data-href, new posts will by automatically appended on section scroll.

Single post

You can open post overlay in every place you want. Just add open-post class to an <a> element and give it proper href. Just like this:

<a class="open-post" href="your_post_content.php">your link name</a>