Postagens populares personalizadas

Views:
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 != &quot;&quot;'><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 ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <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, &quot;1:1&quot;)                                  : 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'/>




Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage