terça-feira, 15 de novembro de 2016

Widget categorias blogger com efeito hover by label numbered

hover-category-blogger-widget-numbered


Hoje vamos apresentar como fazer hover widget numbered categoria por label no blogger, isso traz um efeito legal uma vez que mostra a quantidade de post por categoria e também quando passamos o mouse isso faz efeito hover colorido onde pode ser trocado conforme o gosto isso também ajuda o visitante a procurar conteúdo especifico por label e ver a quantidade do mesmo pode ser adicionado na sidebar do Blogger para adicionar isso a seu template siga os passos abaixo:



Adicionando categorias blogger com efeito hover by label:

Faça login no Blogger então escolha modelo 
editar >> Html com as teclas combinadas CTRL+F busque por ]]></b:skin> ou </style> e acima disso copie e cole o seguinte código:



.widget-content.cloud-label-widget-content {display:inline-block;width:100%;}
.widget-content.list-label-widget-content {padding:0;}
.widget-content.cloud-label-widget-content {display:inline-block;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px;}
.label-count {white-space:nowrap;display:inline-block;}
.Label ul {list-style:none !important;margin:0;padding:0;width:100%}
.Label li{position:relative;background:#f1f1f1;color:#222;padding:0;margin:0 0 7px;text-align:left;max-width:100%;font-size:90%;transition:all .3s ease-out;border-radius:99em;overflow:hidden;border-bottom:1px solid #fff}
.Label li:hover {background:#333333;color:#444;}
.Label li a{padding:12px;display:block;position:relative;line-height:1.2em !important;color:#444;text-decoration:none;transition:all .3s ease-out;font-weight:normal !important}
.Label li a:hover {color:#fff !important}
.Label li span{float:right;height:30px;line-height:30px !important;width:30px;text-align:center;display:inline-block;background:#fff;color:#222;position:absolute;top:5px;right:6px;z-index:2;border-radius:99em}
.label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
.label-size a{background:#fff;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)70%,rgba(246,246,246,1)99%,rgba(246,246,246,1)100%);display:inline-block;color:#444;padding:5px 8px;font-weight:normal !important;border:1px solid #e3e3e3;background-repeat:repeat-y;background-size:100% 90px;background-position:0 -30px;transition:all .3s}
.label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-10px;background:#e0262c;color:#fff;white-space:nowrap;padding:0;width:22px;height:22px;line-height:22px;border-radius:100%;text-align:center;z-index:1;transition:all .3s}
.label-size:hover .label-count{opacity:1;visibility:visible;top:-5px}
.label-size a:hover{color:#444;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)18%,rgba(255,255,255,1)99%,rgba(255,255,255,1)100%);background-position:0 0}

salve o modelo.


Vá no menu layout então na sidebar do Blogger clique em adicionar novo gadget então procure por marcadores e deixe marcado todos os itens como mostra a figura abaixo então salve e pronto.

labels-widget-categorias-by-label-numbered-blogger


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