CÓDIGO CSS
(colar acima de ]]></b:skin>)
/* POSTAGENS MAIS VISTAS BY ELAINEGASPARETO.COM*/
.PopularPosts ul {padding: 0;}
.PopularPosts ul li {list-style: none; padding: 0 !important; float: left; width: 48%; margin-bottom: 15px; margin-left: -2px;}
.PopularPosts ul li:nth-child(1) {float: none; width: 100%;}
.PopularPosts ul li:nth-child(2n) {margin-right: 4%;}
.PopularPosts .item-thumbnail {margin: 0 0 1em 0;}
.PopularPosts .item-thumbnail img {transition: .5s; display: block; margin: 0; padding-right: 0;}
.PopularPosts .item-thumbnail img:hover {opacity: 0.8;}
.PopularPosts .item-title {text-align: center; text-transform: none;
letter-spacing: 2px;
font: 12px 'Roboto';
padding: 0 10px;
}
.PopularPosts .item-title a {
color: #000000 !important;
text-decoration: none !important;
}
.PopularPosts .item-title a:hover {
color: #696969 !important;
}
.PopularPosts .item-snippet {display: none;}
CÓDIGO JAVASCRIPT
(colar acima de </body>)
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var dimension = 1600;
$('#PopularPosts1').find('img').each(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace(/w\B\d{2,4}/,'w' + dimension)});
image.attr({src : image.attr('src').replace(/h\B\d{2,4}/,'h' + dimension)});
image.attr('width', "100%");
image.attr('height', "auto");
});
});
//]]>
</script>
CÓDIGO DO WIDGET
(colar em substituição ao código original conforme explico no tutorial)
<b:widget id='PopularPosts1' locked='false' title='Postagens mais vistas' type='PopularPosts'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>5</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
<div style='clear: both;'/>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
CÓDIGO DA FONTE
(colar acima de <head>)
<link href='https://fonts.googleapis.com/css?family=Roboto: 400,500' rel='stylesheet'/>
