Archive Style - Article Style

Back to Archive Style

Modifier

Corner Box Style Rounded Small Rounded Rounded Large Rounded X Large

Hover Style Jump Effect Scaling Effect Hover the box to test effect

Get Code

<!-- MULTIPLE POST THUMBNAIL (Index, Archive, Label Pages) --> <!--CSS--> <style> #posts-feed .item-title { margin: 10px 0; } .thumbnail-box .content {margin: 0 1em 1em;} .thumbnail-box .thumb-wrapper {overflow: hidden;} .item-content .column, .item-content .columns {margin:0 !important;} .thumbnail-box .item-thumbnail div {height: 160px; background-size: cover !important; background-position: center !important; background: #f3f3f3;} .thumbnail-box .item-thumbnail div:before {content: '\f03e'; font-family: Font Awesome\ 5 Free; position: absolute; left: 50%; top: 50px; transform: translate(-50%,0); color: rgba(210, 203, 203, 0.1); font-size: 60px; z-index: 0; } .thumbnail-box .item-title {margin:10px 1.5em;max-height:20px;overflow:hidden;} .thumbnail-box .item-snippet {margin:0 1.5em 0;} #sidebar-wrapper .widget {box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1); padding: 1em;} .PopularPosts { box-shadow: none !important; border-bottom: 0 !important; padding: 0 !important; background: transparent !important; } .PopularPosts .item-thumbnail { float: unset; margin: 0; } .PopularPosts .thumbnail-box .item-title, .PopularPosts .thumbnail-box .item-snippet {margin:15px 0;} .PopularPosts ul { list-style: none; padding: 0;margin:5px; } .PopularPosts .widget-content ul li { padding: 0; margin-bottom: 1.5em; } .PopularPosts img { padding: 0; } @media (max-width: 480px){ .thumbnail-box .content {margin:0;} .thumbnail-box .item-title, .thumbnail-box .item-snippet {margin:10px 0;} } </style> <!--HTML--> <b:if cond='data:view.isMultipleItems'> <b:include data='top' name='status-message'/> <div class='row'> <b:loop index='i' values='data:posts' var='post'> <div class='columns twelve thumbnail-box reveal'> <div class='content thumb-wrapper {{boxRoundedSM}} {{HoverJump}}'> <!-- Content Post --> <div class='row row-center item-content'> <div class='columns four-res item-thumbnail'><a expr:href='data:post.url'><div expr:style='"background-image: url(\"" + data:post.firstImageUrl + "\");"'/></a> </div> <div class='columns eight-res'> <div class='item-title'><a expr:href='data:post.url'><data:post.title/></a></div> <div class='item-snippet'> <p><data:post.snippet/></p> <small> <span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <b:if cond='data:post.authorProfileUrl'> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta expr:content='data:post.authorProfileUrl' itemprop='url'/> <b:if cond='data:post.authorPhoto.url'> <img expr:src='data:post.authorPhoto.url' itemprop='image' style='vertical-align: middle; border-radius: 25px; margin-top: -3px; width: 25px;'/> </b:if> <span itemprop='name'><data:post.author/></span> </span> <b:else/> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <span itemprop='name'><data:post.author/></span> </span> </b:if> </b:if> </span> </small> </div> </div> </div> </div> </div> </b:loop> </div> </b:if> <!--SCRIPT--> <script> $(document).ready(function(){ $(".PopularPosts ul").addClass("thumbnail-box"); $(".PopularPosts ul li").addClass("thumb-wrapper {{HoverJump}}"); $(".label-size").addClass(""); $("#sidebar-wrapper .widget").addClass(""); }); </script> <!-- MULTIPLE POST THUMBNAIL (Index, Archive, Label Pages) END -->

MeDes Style Statistic Page Blogger Builder Demo

Just add section by section (header or content sections), edit content and style, copy automatic generate code and paste to your stati...

Gofresh Media Group