Veja como personalizar um widget de marcadores com efeito hover, e o deixando com sua cor preferida.
Os Widgets de marcadores padrão do blogger são bem simples e não muito atrativo, hoje trago a vocês esse widget incrível e padrão de templates profissionais. Como eu sei, todos os blogueiros buscam personalizar seu tema o máximo possível, mas nem sempre sabe como fazer, e é por isso que toda Segunda-feira eu irei postar dicas e Tutoriais. Veja o cronograma aqui do lado ►►►►
Atenção: Se seu template já esta configurado para dar estilo aos marcadores é necessário excluir a partição que dar o estilo e depois adicionar a nova.
Vamos colocar o Widget de Marcadores com Efeito Hover no Blogger:
1º Acesse o "Layout" do blogger
2º Vá em "Adicionar um gadget" e escolha a opção "Marcadores"
3º Agora basta prestar atenção e configurar o widget como a imagem abaixo:
4º Clique em "Salvar" e arraste o Gadget até um local de sua preferência e clique em "Salvar Organização"
5ª Agora vamos adicionar o estilo e para isso é preciso ir em "Modelo" e depois em "Editar HTML"
6º Clique em qualquer parte do template e depois sobre as teclas Ctrl+F e pesquise por ]]></b:skin>
7º Ao encontrar essa tag, copie o código abaixo e cole em cima da tag encontrada
/* CSS WIDGET MARCADORES PERSONALIZADO
----------------------------------------------- */
.sidebar .label-size {position:relative;text-transform:none;text-decoration:none;font-size:13px;font-family:'Roboto';}
.sidebar .label-size a {background:#2e3138;color:#b2b5be;font-weight:400;padding:10px 12px;
margin:0 3px 3px 0;float:left;display:block;border:1px solid #464a54;transition: all 0.4s ease-in-out;}
.sidebar .label-size-1 a {box-shadow:inset 2px 0 0 0 #1abc9c;opacity:0.8;}
.sidebar .label-size-1 a:hover {box-shadow:inset 100px 0 0 0 #1abc9c;color:#fff!important;opacity:1;}
.sidebar .label-size-2 a {box-shadow:inset 2px 0 0 0 #3498db;opacity:0.8;}
.sidebar .label-size-2 a:hover {box-shadow:inset 100px 0 0 0 #2980b9;color:#fff!important;opacity:1;}
.sidebar .label-size-3 a {box-shadow:inset 2px 0 0 0 #2ecc71;opacity:0.8;}
.sidebar .label-size-3 a:hover {box-shadow:inset 100px 0 0 0 #27ae60;color:#fff!important;opacity:1;}
.sidebar .label-size-4 a {box-shadow:inset 2px 0 0 0 #9b59b6;opacity:0.8;}
.sidebar .label-size-4 a:hover {box-shadow:inset 100px 0 0 0 #8e44ad;color:#fff!important;opacity:1;}
.sidebar .label-size-5 a {box-shadow:inset 2px 0 0 0 #e74c3c;opacity:0.8;}
.sidebar .label-size-5 a:hover {box-shadow:inset 100px 0 0 0 #c0392b;color:#fff!important;opacity:1;}
.sidebar .label-size:hover{background:none;}
.sidebar .label-size a:hover{text-decoration:none}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;}
.cloud-label-widget-content{text-align:left}
.label-size{display:block;float:left;margin:0 3px 3px 0;color:#fff;transition:all 0.4s ease-in-out;}
Vamos a Configuração do blogger:
Destacado em Lilas: Cor de fundo dos marcadores quando parados
Destacado em Azul: Cor de texto dos marcadores quando parados
Destacados em Verde: Cor da sombra ao passar o mouse
Destacado em Amarelo: Cores das sombras quando parados
Pronto depois das configurações feitas é só clicar em visualizar modelo se estiver tudo certo clique em Salvar Modelo, depois é só ir no seu blog e ver como ficou legal esse novo efeito.
Parabéns você conceguio! viu como foi facil um pequeno código e tudo esta do geito que voce quer, depois se você quiser mudar as cores abasta ir no codigo e alterar, e sempre ira ficar do se agrado. Bom Pessoal é só isso. Até a próxima.
Gostou? Deixe um comentário:
0 comentários: