quinta-feira, 1 de setembro de 2016

Como instalar Etiquetas relacionadas no post do Blog

como-instalar-etiquetas-relacionadas-blog

Hoje apresentamos como adicionar etiquetas relacionadas no post do Blog isso é muito util uma vez que fica isso vai relacionar com o conteúdo e também benéfico para a navegação se você deseja instalar no seu Blog siga os passos abaixo.


Instalando etiquetas relacionadas no post do Blog


Faça login no Blogger no menu va em modelo então editar HTML/JavaScript
com as teclas combinadas CTRL+F busque por </head> e cole o seguinte código antes disso.


<style type='text/css'>
/*Post Label*/
.post-labels{float:left;display:block;width:100%;color:#999}
.post-labels a{float:left;height:24px;line-height:24px;position:relative;font-size:12px;margin-left:12px;padding:0 10px;background:rgba(0,0,0,0.25);color:#fff;text-decoration:none;border-bottom-right-radius:3px;border-top-right-radius:3px}
.post-labels a:before{content:"";float:left;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent rgba(0,0,0,0.25) transparent transparent;border-style:solid;border-width:12px 12px 12px 0}
.post-labels a:after{content:"";position:absolute;top:10px;left:-1px;float:left;width:4px;height:4px;border-radius:2px;background:#fff;transition:all .3s}
.post-labels a:nth-child(1){background:#ca85ca}
.post-labels a:nth-child(1):before{border-color:transparent #ca85ca transparent transparent}
.post-labels a:nth-child(2){background:#e54e7e}
.post-labels a:nth-child(2):before{border-color:transparent #e54e7e transparent transparent}
.post-labels a:nth-child(3){background:#61c436}
.post-labels a:nth-child(3):before{border-color:transparent #61c436 transparent transparent}
.post-labels a:nth-child(4){background:#f4b23f}
.post-labels a:nth-child(4):before{border-color:transparent #f4b23f transparent transparent}
.post-labels a:nth-child(5){background:#46c49c}
.post-labels a:nth-child(5):before{border-color:transparent #46c49c transparent transparent}
.post-labels a:nth-child(6){background:#607ec7}
.post-labels a:nth-child(6):before{border-color:transparent #607ec7 transparent transparent}
.post-labels a:nth-child(7){background:#ca85ca}
.post-labels a:nth-child(7):before{border-color:transparent #ca85ca transparent transparent}
.post-labels a:nth-child(8){background:#e54e7e}
.post-labels a:nth-child(8):before{border-color:transparent #e54e7e transparent transparent}
.post-labels a:nth-child(9){background:#61c436}
.post-labels a:nth-child(9):before{border-color:transparent #61c436 transparent transparent}
.post-labels a:nth-child(10){background:#f4b23f}
.post-labels a:nth-child(10):before{border-color:transparent #f4b23f transparent transparent}
</style>

Então busque por o código </article> e logo acima disso copie e cole o seguinte código.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <span class='post-labels'>
      <div id='maia-signature'/>
        <b:if cond='data:post.labels'>
          <span style='float: left;'>Tags: </span><b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' rel='tag nofollow'><data:label.name/></a>
          </b:loop>
        </b:if>
      </span>
</b:if>

Salve e pronto.

Nota: você pode posicionar isso como desejar conforme suas necessidades.
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