sábado, 13 de agosto de 2016

Popular post degan Show Hide Snippets

Popular-post-show-hide-degan-snippets

Hoje vamos compartilhar um efeito muito interessante compartilhado isso traz um efeito hover para mostrar e esconder snippets do widget popular post aparecendo somente o titulo  o que traz um efeito legal para  usar isso no seu Blogger siga os passos abaixo.


Como adicionar o Efeito show hide snippets em popular post blogger

Faça login no Blogger va no menu modelo então
modelo editar>> HTML/JavaScript então procure por </head>  

<style type='text/css'>
/*<![CDATA[*/
.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0}
.sidebar .PopularPosts ul li{width:100%;list-style:none!important;padding:0!important;margin-bottom:20px;position:relative;border:0}
.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto}
.sidebar .PopularPosts .item-thumbnail{width:100%;position:relative;margin-bottom:10px}
.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0,0,0,0);border-bottom:29px solid #fff;border-left:29px solid transparent;border-right:29px solid transparent;bottom:0;content:"";height:0;width:0;left:0;right:0;margin-left:auto;margin-right:auto;position:absolute;z-index:3}
.sidebar .PopularPosts .item-thumbnail:after{color:#000;content:counter(popularcount,decimal);counter-increment:popularcount;font-size:22px;font-weight:900;list-style-type:none;position:absolute;bottom:0;text-align:center;margin:0 auto;left:0;right:0;z-index:4}
.sidebar .PopularPosts .item-thumbnail img{position:relative;width:100%;height:auto;object-fit:cover}
.sidebar .PopularPosts .item-thumbnail a{position:relative}
.sidebar .PopularPosts .item-thumbnail a::before{position:absolute;top:0;left:-75%;z-index:2;display:block;content:'';width:50%;height:100%;background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);-webkit-transform:skewX(-25deg);transform:skewX(-25deg)}
.sidebar .PopularPosts .item-content:hover a::before{-webkit-animation:shine .75s;animation:shine .75s}
@-webkit-keyframes shine{100%{left:125%}
}
@keyframes shine{100%{left:125%}
}
.sidebar .PopularPosts .item-title{font-size:16px;font-weight:500;text-transform:capitalize;text-align:center;margin:0 15px;padding-bottom:10px}
.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none}
.sidebar .PopularPosts .item-snippet{padding:0;font-size:13px;font-weight:300;text-align:center;max-height:0;background:#fff}
.sidebar .PopularPosts .item-content{background:#fff;border:1px solid #dedede;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative}
.sidebar .PopularPosts .item-content:hover .item-snippet{max-height:100px;transition:max-height .25s ease-in-out;padding:10px 15px;border-top:1px solid #dedede}
/*]]>*/
</style>


Código HTML do widget.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1' visible='true'>
            <b:includable id='main'>
              <b:if cond='data:title != &quot;&quot;'><h2><span><data:title/></span></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' expr:title='data:post.title' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 298)                                  : data:post.thumbnail' var='image'>
                    <img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title'/>
                  </b:with>
                </a>
              </div>
              <b:else/>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
                  <img expr:alt='data:post.title' expr:title='data:post.title' height='120' src='//2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s298/no-thumbnail.png' width='298'/>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div class='clear'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
          </b:widget>

salve e pronto. 
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner