quinta-feira, 14 de julho de 2016

Widget Label Counter Box

widget-label-counter-box


Hoje vamos mostrar widget label  counter Box by degan isso é interresante pois traz um efeito ao passar o mouse em cina e ao sair fora isso, labels são utilizadas para melhorar a experiencia com o nosso usuario e também para ser como uma guia no seu conteúdo isso vai ser elegante no seu Blogger para adicionar siga os passos abaixo.


Adicionando no Seu Blogger.

Faça login no Blogger então
va em layout adicionar novo gadget
então procure por marcadores e deixe como mostra a figura abaixo salve isso.



Em seguida Va em modelo então editar HTML/JavaScript com as teclas combinadas CTRL+F e busque por </style> ou ]]></b:skin> Então copie o seguinte código e cole antes.

/* modificação label */
ul .label-show {margin:0 auto;padding:0}
.label-show{list-style:none}
.label-show:before,.label-show:after{content:"";display:table}
.label-show:after{clear:both}
.label-show li{position:relative;float:left;margin:0 12px 8px 0}
.label-show li:active{margin-top:1px;margin-bottom:7px}
.label-show li:after{content:'';z-index:3;position:absolute;top:10px;right:-2px;width:5px;height:6px;opacity:.95;background:#66be92;border-radius:3px 0 0 3px}
.label-show a,.label-show span{display:block;box-sizing:border-box}
.label-show a{height:26px;font-size:13px;color:#000;border-radius:5px 0 0 5px;background:#efece9;border:1px solid #fafafa;box-shadow:0 0 3px rgba(0,0,0,.4);padding:3px 8px}
.label-show a:hover span{max-width:40px;padding:0 7px 0 6px}
.label-show span{position:absolute;top:0;left:100%;z-index:2;overflow:hidden;max-width:0;height:26px;line-height:23px;opacity:.95;color:#fff;text-shadow:0 -1px rgba(0,0,0,0.3);border:1px solid #66be92;border-radius:0 3px 3px 0;background-color:#66be92;transition:all .3s ease-out;padding:0 0 0 2px}


Em seguida encontre esse código:

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

ou  esse.

<div expr:class='"widget-content " + data:display + "-label-widget-content"'>

Então 2 linhas apos o código <ul> substitua por

<ul class='label-show'>

Depois disso alterar código abaixo.

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

Por esse

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/><span class='label-count' dir='ltr'>(<data:label.count/>)</span></a>

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