Archive Style - Default Without Sidebar

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

Total Column 3 Columns 4 Columns

Get Code

<!-- MULTIPLE POST THUMBNAIL (Index, Archive, Label Pages) --> <!--CSS--> <style> .thumbnail-box .content {margin: 0 1em 1em;} .thumbnail-box .thumb-wrapper { overflow: hidden; box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1); border-bottom: 10px solid; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4gmEUjkM3OsTfBqCvFzIQuBSRAVezXinLUIa-UY63mX7KfyOHkuQtbgXBDAtnumU7z3yyV3qw4GLRpYxvZuCL3wRXZqYveoV08NJVWK4FauYXc3xBfVCl_R3oBbX_ZzDtwPLrMfewjHs/s1600/ornamen.png) bottom right no-repeat; background-size: 130px;} .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 3em;} #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 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;} } </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 {{totalColumn}} reveal thumbnail-box'> <div class='content thumb-wrapper {{HoverJump}} {{boxRoundedSM}}'> <!-- Content Post --> <div class='item-content'> <div class='item-thumbnail'><a expr:href='data:post.url'><div expr:style='"background-image: url(\"" + data:post.firstImageUrl + "\");"'/></a> </div> <div class='item-title'><a expr:href='data:post.url'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></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}} {{boxRoundedSM}}"); $(".label-size").addClass("{{boxRoundedSM}}"); $("#sidebar-wrapper .widget").addClass("{{boxRoundedSM}}"); }); </script> <b:if cond='data:view.isMultipleItems'> <script> $(document).ready(function(){ $("article").css("width", "100%"); $("aside").remove(); }); </script> </b:if> <!-- 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...