Modelos para menu de tags


An-nyeong-ha-se-yo ~(ж><) HAShsudhushds entrada diferente desta vez, sempre começava o post sempre do mesmo jeito e hoje comecei dando um olá formal coreano >.< Grande a frase para dizer apenas um olá né? Mas então, que dia quente hoje nuss senhora ′°︿° Ontem estava um dia tão lindo aqui, tipo não que eu ame o inverno mas gostei tanto da sensação de fresquinho que estava, estou torcendo para que acabe logo o verão, porque? Porque quero me vestir bem novamente e usar coisas fofas que só no inverno tem (°o°) Mesmo amando tanto o verão esse ano não vejo a hora mesmo desse calor ir embora. Tá, parei com a encheção de linguiça desnecessária, só uma coisinha esse gato da imagem do post é um fofo né? Gente eu amei a ilustra, muito tchuco!

Vamos agora ao que realmente interessa? Então, eu estava sem ideia alguma do que postar fiquei pensando e pensando e a unica coisa que veio na minha cabeça era de criar menus para tags, sei que existem milhares na net mas menu para tag nunca é demais não é mesmo? Eu mesma adoro usar vários modelos e nunca gosto de repetir o mesmo modelo em layouts diferentes hahaha ^^

LIVE PREVIEW ❣◕ ‿ ◕❣

Vá até seu modelo e clique em editar, dê um Ctrl F e dentro do tema procure por: ]]></b:skin> Acima dele cole o código do modelo desejado.

Modelo 1

tags {
display:block;
font-family: 'Sniglet', Trebuchet MS;
font-size: 10px;
text-transform: lowercase;
text-align: center;
letter-spacing:2px;
color: #555050;
text-shadow: 1px 1px 1px #fff;
float: center;
text-indent: 5px;
background: #F6F6F6;
border-left:2px solid #555050;
border-right:2px solid #555050;
margin:1px;
margin-bottom:1px;
padding: 2px 2px 2px 2px;
margin:1px;
line-height:17px;
height: 17px;
vertical-align: middle;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-transition-duration: .80s;
}
tags:hover {
border-left:2px solid #D4D4D4;
border-right:2px solid #D4D4D4;
display:block;
color:#D4D4D4;
letter-spacing:-12px;
-webkit-transition-duration: .80s;
}

Modelo

tags1 {
display:block;
overflow:hidden;
font-family: 'Sniglet', Trebuchet MS;
font-size: 10px;
text-transform: lowercase;
text-align: center;
letter-spacing:2px;
color: #555050;
text-shadow: 1px 1px 1px #fff;
float: center;
text-indent: 5px;
background: #F6F6F6;
border-left:2px solid #555050;
border-right:2px solid #555050;
margin:1px;
margin-bottom:1px;
padding: 2px 2px 2px 2px;
margin:1px;
line-height:17px;
height: 17px;
vertical-align: middle;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-transition-duration: .80s;
}
tags1:hover {
display:block;
background-repeat: no-repeat;
box-shadow: inset 190px 0px #555050;
color:#555050;
letter-spacing:0px;
text-align: right;
-webkit-transition-duration: .80s;
}

Quem usar este modelo só uma dica, para que a fonte fique certinha no final ajeite apenas o box-shadow: inset 190px 0px #555050; onde está 190px você pode diminuir ou aumentar, mas se quer que a palavra apareça certinho no final diminua a sombra ok? faça bom aproveito amiguinho ^3^

Modelo 3

tags2 {
display:block;
overflow:hidden;
font-family: 'Sniglet', Trebuchet MS;
font-size: 10px;
text-transform: lowercase;
text-align: center;
letter-spacing:2px;
color: #555050;
float: center;
text-indent: 5px;
background: #F6F6F6;
border-left:2px solid #555050;
border-right:2px solid #555050;
margin:1px;
margin-bottom:1px;
padding: 2px 2px 2px 2px;
margin:1px;
line-height:17px;
height: 17px;
vertical-align: middle;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-transition-duration: .80s;
}
tags2:hover {
display:block;
color:#fff;
text-shadow: 1px 1px 1px #3D3131;
box-shadow: inset 0px 0px 20px 15px #555050;
-webkit-transition-duration: .80s;
}

Links:

<a href="LINK"><tags>Title here</tags></a>
<a href="LINK"><tags1>Title here</tags1></a> 
<a href="LINK"><tags2>Title here</tags2></a>


Querem ver os perfis de quem posta aqui? cliquem na imagem᠉
Continue

5 comentários:

  1. MEU DEUS QUE LINDO
    Favoritei aqui no Chrome hue q O efeito é muito fofinho. Fica lindão em blogs com layout preto e branco ԅ(≖‿≖ԅ)

    { m i k i c a n d y ♡ }

    ResponderExcluir
  2. Wow que lindos! Não costumo fazer tags, mas se fizesse, com certeza usaria!

    barbie-prettysweet.blogspot.com

    ResponderExcluir
  3. Oii, Roh *3*
    O calor está de matar ! mds
    Realmente o gatinho da ilustra é uma fofura >♥<
    Os modelinhos ficaram super originais, amo ver criatividade nas pessoas *w* Amei todos, principalmente o primeiro.

    Beijos e queijos,
    c h a n d e l i e r

    ResponderExcluir
  4. Oi.
    Realmente esse calor esta me matando, nunca gostei muito de calor mas também não gosto de frio, gosto só quando tá aquela brisa fresca, o que é bem raro!
    Adorei os modelos principalmente o terceiro.
    || d i a m o n d s o n g a l a x y ||

    ResponderExcluir
  5. Olá Roh <3 aqui está calor, tipo, uns 28ºC, então está quente, então também não vejo a hora de que o inverno chegue <3 amo o inverno ♥ é quando os Sakurás da minha casa florescem, é tão lindo >3< Que ilustra fofa <33 e que menus lindos ♥ achei maravilhoso <33

    Kissus ~ l-ovelymilkshake.blogspot.com

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)

Layout e codificação por Roh A.Ramos Os blogs que mais ajudaram com os tutoriais foram: CHIHDVCA Tecnologia do Blogger ♡ 2012 a 2017