In {Theme} you will be able to create several types of blog post on your blog.
Blog Post (text)
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<article itemprop="blogPost" itemscope="itemtype" itemtype="http://schema.org/BlogPosting" class="ct-blog-post ct-blog-post--image"> <div class="ct-blog-post__media"><img src="assets/images/demo-content/post-image02.jpg" alt="Image Post"></div> <div class="ct-blog-post__body"> <div class="ct-blog-post__description"> <ul> <li><a href="single-post.html" class="ct-blog-post__author"><i class="fa fa-user"></i> My Admin</a></li> <li><a itemprop="dateCreated" href="single-post.html" class="ct-blog-post__date"><i class="fa fa-clock-o"></i> 7 Day ago </a></li> <li><a href="single-post.html" class="ct-blog-post__comments"><i class="fa fa-comment"></i> 70 Comments</a></li> </ul> </div> <h4 class="ct-blog-post__title">Image Post</h4> <div class="ct-blog-post__content"> <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci lit,sed quia nonquam eius modi mpora incidunt ut labore et dolore magnam aliquam quaerat pt tem. Ut enim ad minima veniam, qus nostrum exercitaion ullam corporis suscipit laboriosam qui dolorem ipsum quia dolor sit amet, consectetur, adipisci lit,sed quia nonquam eius modi mpora incidunt ut labore et dolore magnam aliquam quaerat pt tem. qui dolorem ipsum quia dolor sit amet, consectetur.</p> </div> <a href="#" class="btn btn-default btn-xs btn-rounded">Read More</a> </div> </article> |
Screenshot
Blog Post example
Blog Slider
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<article itemprop="blogPost" itemscope="itemtype" itemtype="http://schema.org/BlogPosting" class="ct-blog-post ct-blog-post--slider"> <div class="ct-blog-post__media"> <div data-arrows="true" data-autoplay="true" data-fade="true" data-adaptiveHeigh="true" data-dots="false" class="ct-slick ct-js-slick"> <div class="item"> <div class="item-inner"><img src="assets/images/demo-content/post-image01.jpg" alt="Autoplay Image Slider Post"/></div> </div> <div class="item"> <div class="item-inner"><img src="assets/images/demo-content/post-image02.jpg" alt="Autoplay Image Slider Post"/></div> </div> <div class="item"> <div class="item-inner"><img src="assets/images/demo-content/post-image03.jpg" alt="Autoplay Image Slider Post"/></div> </div> </div> </div> <div class="ct-blog-post__body"> <div class="ct-blog-post__description"> <ul> <li><a href="single-post.html" class="ct-blog-post__author"><i class="fa fa-user"></i> My Admin</a></li> <li><a itemprop="dateCreated" href="single-post.html" class="ct-blog-post__date"><i class="fa fa-clock-o"></i> 6 Day ago </a></li> <li><a href="single-post.html" class="ct-blog-post__comments"><i class="fa fa-comment"></i> 10 Comments</a></li> </ul> </div> <h4 class="ct-blog-post__title">Autoplay Image Slider Post</h4> <div class="ct-blog-post__content"> <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci lit,sed quia nonquam eius modi mpora incidunt ut labore et dolore magnam aliquam quaerat pt tem. Ut enim ad minima veniam, qus nostrum exercitaion ullam corporis suscipit laboriosam qui dolorem ipsum quia dolor sit amet, consectetur, adipisci lit,sed quia nonquam eius modi mpora incidunt ut labore et dolore magnam aliquam quaerat pt tem. qui dolorem ipsum quia dolor sit amet, consectetur.</p> </div> <a href="#" class="btn btn-default btn-xs btn-rounded">Read More</a> </div> </article> |
Screenshot
Blog Slider example
Blog Audio
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<article itemprop="blogPost" itemscope="itemtype" itemtype="http://schema.org/BlogPosting" class="ct-blog-post ct-blog-post--audio"> <div class="ct-blog-post__media"> <div class="embed"> <iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/96456869&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false" class="embed-responsive-item"></iframe> </div> </div> <div class="ct-blog-post__body"> <div class="ct-blog-post__description"> <ul> <li><a href="single-post.html" class="ct-blog-post__author"><i class="fa fa-user"></i> My Admin</a></li> <li><a itemprop="dateCreated" href="single-post.html" class="ct-blog-post__date"><i class="fa fa-clock-o"></i> 1 Day ago </a></li> <li><a href="single-post.html" class="ct-blog-post__comments"><i class="fa fa-comment"></i> 0 Comments</a></li> </ul> </div> <h4 class="ct-blog-post__title">Audio Post</h4> <div class="ct-blog-post__content"> <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci lit,sed quia nonquam eius modi mpora incidunt ut labore et dolore magnam aliquam quaerat pt tem. Ut enim ad minima veniam, qus nostrum exercitaion ullam corporis suscipit laboriosam qui dolorem ipsum quia dolor sit amet, consectetur, adipisci lit,sed quia nonquam eius modi mpora incidunt ut labore et dolore magnam aliquam quaerat pt tem. qui dolorem ipsum quia dolor sit amet, consectetur.</p> </div> <a href="#" class="btn btn-default btn-xs btn-rounded">Read More</a> </div> </article> |
Screenshot
Blog Audio example
Blog Quote
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<article itemprop="blogPost" itemscope="itemtype" itemtype="http://schema.org/BlogPosting" class="ct-blog-post ct-blog-post--quote"> <div class="ct-blog-post__media"> <i class="fa fa-quote-left"></i> <blockquote class="ct-blog-post__quote-content">Crafting visually stunning memorable experiences for web and interfaces.</blockquote><i class="fa fa-quote-right"></i> </div> <div class="ct-blog-post__body"> <div class="ct-blog-post__description"> <ul> <li><a href="single-post.html" class="ct-blog-post__author"><i class="fa fa-user"></i> My Admin</a></li> <li><a itemprop="dateCreated" href="single-post.html" class="ct-blog-post__date"><i class="fa fa-clock-o"></i> 14 Day ago </a></li> <li><a href="single-post.html" class="ct-blog-post__comments"><i class="fa fa-comment"></i> 4 Comments</a></li> </ul> </div> <h4 class="ct-blog-post__title">Quote Post</h4> <div class="ct-blog-post__content"> <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci lit,sed quia nonquam eius modi mpora incidunt ut labore et dolore magnam aliquam quaerat pt tem. Ut enim ad minima veniam, qus nostrum exercitaion ullam corporis suscipit laboriosam qui dolorem ipsum quia dolor sit amet, consectetur, adipisci lit,sed quia nonquam eius modi mpora incidunt ut labore et dolore magnam aliquam quaerat pt tem. qui dolorem ipsum quia dolor sit amet, consectetur.</p> </div> <a href="#" class="btn btn-default btn-xs btn-rounded">Read More</a> </div> </article> |
Screenshot
Blog Quote example
Blog Video
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<article itemprop="blogPost" itemscope="itemtype" itemtype="http://schema.org/BlogPosting" class="ct-blog-post ct-blog-post--video"> <div class="ct-blog-post__media"> <div class="embed-responsive embed-responsive-16by9"> <iframe src="https://www.youtube.com/embed/RhFMIRuHAL4" class="embed-responsive-item"></iframe> </div> </div> <div class="ct-blog-post__body"> <div class="ct-blog-post__description"> <ul> <li><a href="single-post.html" class="ct-blog-post__author"> <i class="fa fa-user"></i> My Admin</a></li> <li><a itemprop="dateCreated" href="single-post.html" class="ct-blog-post__date"><i class="fa fa-clock-o"></i> 23 Day ago </a></li> <li><a href="single-post.html" class="ct-blog-post__comments"><i class="fa fa-comment"></i> 31 Comments</a></li> </ul> </div> <h4 class="ct-blog-post__title">Video Post</h4> <div class="ct-blog-post__content"> <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci lit,sed quia nonquam eius modi mpora incidunt ut labore et dolore magnam aliquam quaerat pt tem. Ut enim ad minima veniam, qus nostrum exercitaion ullam corporis suscipit laboriosam qui dolorem ipsum quia dolor sit amet, consectetur, adipisci lit,sed quia nonquam eius modi mpora incidunt ut labore et dolore magnam aliquam quaerat pt tem. qui dolorem ipsum quia dolor sit amet, consectetur.</p> </div> <a href="#" class="btn btn-default btn-xs btn-rounded">Read More</a> </div> </article> |
Screenshot
Blog Video example
Link Post
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<article itemprop="blogPost" itemscope="itemtype" itemtype="http://schema.org/BlogPosting" class="ct-blog-post ct-blog-post--link"> <div class="ct-blog-post__media"> <i class="fa fa-link"></i><a href="http://www.google.com" target="_blank" class="ct-blog-post__link-content">your-google-link</a></div> <div class="ct-blog-post__body"> <div class="ct-blog-post__description"> <ul> <li><a href="single-post.html" class="ct-blog-post__author"><i class="fa fa-user"></i> My Admin</a></li> <li><a itemprop="dateCreated" href="single-post.html" class="ct-blog-post__date"><i class="fa fa-clock-o"></i> 6 Day ago </a></li> <li><a href="single-post.html" class="ct-blog-post__comments"><i class="fa fa-comment"></i> 10 Comments</a></li> </ul> </div> <h4 class="ct-blog-post__title">Link Post</h4> <div class="ct-blog-post__content"> <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci lit,sed quia nonquam eius modi mpora incidunt ut labore et dolore magnam aliquam quaerat pt tem. Ut enim ad minima veniam, qus nostrum exercitaion ullam corporis suscipit laboriosam qui dolorem ipsum quia dolor sit amet, consectetur, adipisci lit,sed quia nonquam eius modi mpora incidunt ut labore et dolore magnam aliquam quaerat pt tem. qui dolorem ipsum quia dolor sit amet, consectetur.</p> </div><a href="single-post.html" class="btn btn-default btn-xs btn-rounded">Read More</a> </div> </article> |
Screenshot
Link Post example