In {Theme} we have 5 types of blog posts you can created using this markups:
Blog Image
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 |
<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/blog-05.png" alt="Beautiful Party With Fairies & Lillies"/></div> <div class="ct-blog-post__body"> <div itemprop="dateCreated" class="ct-blog-post__date"><span class="ct-blog-post__day">17</span><span class="ct-blog-post__month">august</span></div> <div class="ct-blog-post__description">By <a href="blog-post-5.html" class="ct-blog-post__author">Carmen Robin</a><a href="blog-post-5.html" class="ct-blog-post__category"><span>Food & Drinks</span></a><a href="blog-post-5.html" class="ct-blog-post__comments"><span>15 Comments</span></a></div> <h3 class="h4 ct-blog-post__title">Beautiful Party With Fairies & Lillies</h3> <div class="ct-blog-post__content"> <p>Spoon the marshmallows into the first color of Jell-O powder that you want to make. Close the bag tightly and shake to coat the marshmallow.</p> </div><a href="blog-post-5.html" class="btn btn-gray-o" itemprop="url">Read Article</a> </div> </article> |
Screenshot
Blog image
Blog Slider
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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="false" data-autoplay="true" data-fade="true" data-dots="true" class="ct-slick ct-js-slick"> <div class="item"><img src="assets/images/demo-content/blog-06.png" alt="The Cupcakes are coming"/></div> <div class="item"><img src="assets/images/demo-content/blog-05.png" alt="The Cupcakes are coming"/></div> <div class="item"><img src="assets/images/demo-content/blog-04.png" alt="The Cupcakes are coming"/></div> <div class="item"><img src="assets/images/demo-content/blog-03.png" alt="The Cupcakes are coming"/></div> </div> </div> <div class="ct-blog-post__body"> <div itemprop="dateCreated" class="ct-blog-post__date"><span class="ct-blog-post__day">13</span><span class="ct-blog-post__month">august</span></div> <div class="ct-blog-post__description">By <a href="blog-post-9.html" class="ct-blog-post__author">Arya Stark</a><a href="blog-post-9.html" class="ct-blog-post__category"><span>Food & Drinks</span></a><a href="blog-post-9.html" class="ct-blog-post__comments"><span>12 Comments</span></a></div> <h3 class="h4 ct-blog-post__title">The Cupcakes are coming</h3> <div class="ct-blog-post__content"> <p>Can you tell we are excited about graduation this year? This oh-so-simple party idea will have you looking like the smartest (and most clever) hostess in town!</p> </div><a href="blog-post-9.html" class="btn btn-gray-o" itemprop="url">Read Article</a> </div> </article> |
Screenshot
Blog slider
Blog Audio
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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-responsive embed-responsive-square"> <iframe src="http://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/97869394&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;visual=true" class="embed-responsive-item"></iframe> </div> </div> <div class="ct-blog-post__body"> <div itemprop="dateCreated" class="ct-blog-post__date"><span class="ct-blog-post__day">12</span><span class="ct-blog-post__month">august</span></div> <div class="ct-blog-post__description">By <a href="blog-post-10.html" class="ct-blog-post__author">Lindsey Stirling</a><a href="blog-post-10.html" class="ct-blog-post__category"><span>Food & Drinks</span></a><a href="blog-post-10.html" class="ct-blog-post__comments"><span>9 Comments</span></a></div> <h3 class="h4 ct-blog-post__title">Elements</h3> <div class="ct-blog-post__content"> <p>Skewers (easiest) or Cake Wire (to shape the cake wire like a rainbow, an adult will have to cut the wire and bend it like an arc to fit the bowl or cup that you use.)</p> </div><a href="blog-post-10.html" class="btn btn-gray-o" itemprop="url">Read Article</a> </div> </article> |
Screenshot
Blog Audio
Blog Quote
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<article itemprop="blogPost" itemscope="itemtype" itemtype="http://schema.org/BlogPosting" class="ct-blog-post ct-blog-post--quote"> <div class="ct-blog-post__media"> <div class="ct-blog-post__quote"> <div class="ct-blog-post__quote-inner"> <div class="ct-blog-post__quote-content">"You Shall Not Pass"</div> <div class="ct-blog-post__quote-author">- Gandalf</div> </div> </div> </div> <div class="ct-blog-post__body"> <div itemprop="dateCreated" class="ct-blog-post__date"><span class="ct-blog-post__day">29</span><span class="ct-blog-post__month">July</span></div> <div class="ct-blog-post__description">By <a href="blog-post-12.html" class="ct-blog-post__author">J. R. R. Tolkien</a><a href="blog-post-12.html" class="ct-blog-post__category"><span>Food & Drinks</span></a><a href="blog-post-12.html" class="ct-blog-post__comments"><span>56 Comments</span></a></div> <h3 class="h4 ct-blog-post__title">The Fellowship of the Ring</h3> <div class="ct-blog-post__content"> <p>Can you tell we are excited about graduation this year? This oh-so-simple party idea will have you looking like the smartest (and most clever) hostess in town!</p> </div><a href="blog-post-12.html" class="btn btn-gray-o" itemprop="url">Read Article</a> </div> </article> |
Screenshot
Blog Quote
Blog Video
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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://player.vimeo.com/video/44332989?title=0&byline=0&portrait=0" class="embed-responsive-item"></iframe> </div> </div> <div class="ct-blog-post__body"> <div itemprop="dateCreated" class="ct-blog-post__date"><span class="ct-blog-post__day">14</span><span class="ct-blog-post__month">august</span></div> <div class="ct-blog-post__description">By <a href="blog-post-8.html" class="ct-blog-post__author">Miles Nathan</a><a href="blog-post-8.html" class="ct-blog-post__category"><span>Food & Drinks</span></a><a href="blog-post-8.html" class="ct-blog-post__comments"><span>0 Comments</span></a></div> <h3 class="h4 ct-blog-post__title">Tesco Mobile Cupcake</h3> <div class="ct-blog-post__content"> <p>Spoon the marshmallows into the first color of Jell-O powder that you want to make. Close the bag tightly and shake to coat the marshmallow.</p> </div><a href="blog-post-8.html" class="btn btn-gray-o" itemprop="url">Read Article</a> </div> </article> |
Screenshot
Blog Video