1. Home
  2. Marco HTML
  3. Blog

Blog

MarcoTheme contains two views blog (posts in grid and posts in rows) with blog filters and search. By default view is posts in rows (blog2.html).


Posts in rows structure

 
Post is structured with title, post date, list (post meta or social shares), content and post image. You can add any size image but remember, rows height is depeneds on the highest element in content.
 

...
   BLOG CLASS
   <div class="blog blog-rows page-padding-top">
   ...
   
   POST
   <div class="blog-content-rows"<
   <div class="post-item animate-text">
      <div class="post-image">
	 <a href="image url"><span class="img-wrapper"><img src="image url" /></span></a>
      </div>
      <div class="post-header">
         <div class="post-date"><a href="">Post date</a></div>
	 <h4><a href="single-post.html">Post title</a></h4>
	 <div class="post-meta">
	    <ul>
	      <li>Element of list (e.g. post meta, social shares)</li>
	    </ul>
	  </div>
      </div>
      <div class="post-content ">
	 <p>post content</p>
      </div>
      <div class="post-btn-more">
	  <a href="single-post.html" class="link-hover">Read more</a>
      </div>
   </div>
...

Posts in grid structure

 
Posts in grid is structured with title, post date, list (post meta or social shares) and post image. Blog grid uses helper classes for high or wide images. If post image is wider than higher, add to image class “img-wide” or if is higher than wider, add class “img-high”. This makes it easier to create centered content.  

...
   BLOG CLASS
   <div class="blog blog-grid page-padding-top">
   ...

   POST
   <div class="blog-content-grid"<
   <div class="post-item">
      <div class="post-image">
	 <a class="image class (img-wide or img-high)" href="image url"><span class="img-wrapper"><img src="image url" /></span></a>
      </div>
      <div class="post-header animate-text">
         <div class="post-date"><a href="">Post date</a></div>
	 <h4><a href="single-post.html">Post title</a></h4>
	 <div class="post-meta">
	    <ul>
	      <li>Element of list (e.g. post meta, social shares)</li>
	    </ul>
	  </div>
      </div>
   </div>   
...

Blog filters

 
Add list of category filters or filters views and replace hash to category page link. Remember we created a look of search, not funcionality.
 

...
   <div class="blog-filter-posts small-12 columns animate-text">
       <div class="blog-search">
           <div class="blog-input-wrapper">
               <a href="" class="search-icon">
                  SEARCH ICON
               </a>
               <form class="search-input" action="search-results.html">
                   <button type="submit">
                       SEARCH ICON
                   </button>
               </form>
           </div>
       </div>
       <div class="blog-filters-views">
	  <ul class="blog-filters">
             <li><a href="category page url">All</a></li>
	     <li><a href="category page url">Category name</a></li>
          </ul>
          <ul class="post-views">
	     <li class="load-blog-grid active-filter"><a href="#"></a></li>
	     <li class="load-blog-rows"><a href="blog2.html"></a></li>
	  </ul>
        </div>
   </div>
...

Single post

 
On the top of the single post, we created simple navigation. Click on arrow go to previous or next post. Click on “x” moves to blog. The single post is structured with post header (title, post meta, date), post image and content with comments and comment form.
 

...
   <single-post page-padding-top>
       ...
       <div class="single-post-nav animate-text">
           <div class="previous-post arrow-prev">
               <a href="previous post url">
                  ARROW ICON
               </a>
           </div>
           <div class="back-to-blog icon-close">
               <a href="blog url">
                  CLOSE ICON
               </a>
           </div>
           <div class="next-post arrow-next">
               <a href="next post url">
                  ARROW ICON
               </a>
           </div>
       </div>
       ...
       
       <div class="single-post-header">
           <div class="post-header animate-text">
               POST HEADER
           </div>
       </div>
       <div class="post-image img-wrapper">
           <img src="image url"/>
       </div>
       ...

       <div class="post-content animate-text animate-second">
           POST CONTENT
       </div>
       ...
       
       <div class="post-comments">
           POST COMMENTS
       </div>
...
Was this article helpful to you? Yes No