Olá! Trouxe um tutorial bem legal para organizar as tags ou qualquer lista de links que desejar. Trata-se de um menu com opções separadas em categorias definidas por você, no qual ao clicar, os itens referentes a uma categoria se destacam dos demais. Parece complicado, mas não é, e aprendi isso no Codrops; vou usar ícones encontrados no Flaticon (lá tem um montão de ícones de todos os tipos) e coloridos por mim para exemplificar.
Menu sem os ícones de lista
Caso gostem e queiram usar, estes são os ícones para tags:
Agora sim, os códigos; cole isso antes de </b:skin>:
@import url(http://fonts.googleapis.com/css?family=Gabriela); .ff-container{/*area geral*/ width: 700px; margin: 10px auto 30px auto; } .ff-container label{/*titulos das categorias*/ font-family: 'Gabriela', serif; width: 25%; height: 30px; cursor: pointer; color: #fcc; text-shadow: 1px 2px 3px #fff; line-height: 33px; font-size: 19px; float:left; } .ff-container label.ff-label-type-all{ border: none; } .ff-container label.ff-label-type-3{ border: none; } /*categoria todos*/ .ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all, .ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1, .ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2, .ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3{ color: #fa6d92; text-shadow: 1px 2px 3px #fee; text-align: center; } .ff-container input{ display: none; } .ff-items{ position: relative; margin: 0px auto; padding-top: 20px; list-style: none; } .ff-items a{ display: block; position: relative; padding: 10px; background: #fff; margin: 4px; width: 160px; height: 120px; } .ff-items a span{ display: block; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .ff-items a:hover span{ height: 80px; opacity: 1; } .ff-items li img{ display: block; } .ff-items li{ margin: 0px; float: left; opacity: 0; width: 188px; height: 148px; transition: opacity 0.6s ease-in-out; } .ff-container input.ff-selector-type-all:checked ~ .ff-items li, .ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1, .ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2, .ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3{ opacity: 1; } .ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1), .ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2), .ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3){ opacity: 0.1; } .ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) span, .ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span, .ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span{ display: none; }
Visualize e salve, só para ver se não mudou nada no seu template. Para aparecer o menu, cole o código abaixo no HTML de uma página ou gadget (acho melhor em uma página):
<section class="ff-container"> <input checked="checked" class="ff-selector-type-all" id="select-type-all" name="radio-set-1" type="radio" /> <label class="ff-label-type-all" for="select-type-all">Todos</label> <input class="ff-selector-type-1" id="select-type-1" name="radio-set-1" type="radio" /> <label class="ff-label-type-1" for="select-type-1">Categoria 1</label> <input class="ff-selector-type-2" id="select-type-2" name="radio-set-1" type="radio" /> <label class="ff-label-type-2" for="select-type-2">Categoria 2</label> <input class="ff-selector-type-3" id="select-type-3" name="radio-set-1" type="radio" /> <label class="ff-label-type-3" for="select-type-3">Categoria 3</label> <div class="clr"> </div> <ul class="ff-items"> <li class="ff-item-type-2"> <a href="URL-DE-1-LINK"> <img src="URL-DA-IMAGEM" title="NOME-DO-LINK" /> </a> </li> <li class="ff-item-type-2"> <a href="URL-DE-1-LINK"> <img src="URL-DA-IMAGEM" title="NOME-DO-LINK" /> </a> </li> <li class="ff-item-type-1"> <a href="URL-DE-1-LINK"> <img src="URL-DA-IMAGEM" title="NOME-DO-LINK" /> </a> </li> <li class="ff-item-type-1"> <a href="URL-DE-1-LINK"> <img src="URL-DA-IMAGEM" title="NOME-DO-LINK" /> </a> </li> <li class="ff-item-type-3"> <a href="URL-DE-1-LINK"> <img src="URL-DA-IMAGEM" title="NOME-DO-LINK" /> </a> </li> <li class="ff-item-type-3"> <a href="URL-DE-1-LINK"> <img src="URL-DA-IMAGEM" title="NOME-DO-LINK" /> </a> </li> </ul> </section>
Vamos entender:
Mude os títulos Todos, Categoria 1,2,3...para os que desejar, por exemplo, se você postar sobre Moda e Beleza, adicione esse título; já que está após Todos, no HTML será representada por ff-item-type-1; aí você quer organizar suas tags sobre coisas fofas, que pode chamar-se Kawaii nas categorias, que por sua vez será representada no HTML por ff-item-type-2...
Isso significa que os links e URLs das imagens devem ser adicionados de acordo com as categorias, tipo:
<li class="ff-item-type-1"> => posts sobre moda
<a href="URL-DE-1-LINK"> =>link do marcador/tag que fala sobre moda
<img src="URL-DA-IMAGEM" title="NOME-DO-LINK" />=> ícone referente a esse marcador
</a>
</li>
<li class="ff-item-type-2"> =>posts que falam sobre coisas fofas
<a href="URL-DE-1-LINK"> =>link do marcador/tag que fala sobre fofura
<img src="URL-DA-IMAGEM" title="NOME-DO-LINK" />=> ícone referente a esse marcador
</a>
</li>
E assim por diante. Para ficar mais claro, vou mostrar trechos de como fiz o menu de exemplo; começando com a tag Games, ícone de joystick, que ficou na categoria Para Você, item-type-1:
<li class="ff-item-type-1">
<a href="http://reinokawaii.blogspot.com.br/search/label/Kawaii%20Games">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCzMnjTmUXz6Ip48db25ZY3AmVLP4tmBTjnGFEfKEzAs7iy_LdODSWyrjkG2hiX7I66NKhFwj6WBqqRHzaRdVIIsCfnvf9h02EJnOVMGDntaUtZeXxo9Y7UQDjncPhEPmxMqEwTYpE2NM/s1600/joystick10.png" title="Games"/>
</a>
</li>
A tag Unhas, com ícone de esmalte, ficou em Moda e Beleza, item-type-2:
<li class="ff-item-type-2"><a href="http://reinokawaii.blogspot.com.br/search/label/Unhas">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7e9WgVRyHqeSlrPnn51OSAHdzcYvmsbq6qQN4P-Q2t_V5naFlV5Etk_-B_1vj3yOQcvxFlGqkRXOHBCAoFxykjT4fzvaockJfnP3YXnOmthihxbWjVh10zJh8ucaCleO5Ux9USf9OAnw/s1600/lacquer.png" title="Unhas">
</a>
</li>
E a tag Favoritos, com ícone de pasta de favoritos, ficou em Kawaii, item-type-3:
<li class="ff-item-type-3"><a href="http://reinokawaii.blogspot.com.br/search/label/Favoritos">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCryltpKLTDP6YH0sd2HNw31QZ4pAet9gM6y0byw8V5pzBev3yOSYbAxmSUHCJfewFZdaBe0VugJcTbllXl8DS2XnAXJLgVHS3PSEH-9TAA6vu1pL93wnRwH8XLj39W29EnSn3_ijV0qM/s1600/favorite.png">
</a>
</li>
A categoria Todos fica organizada após você acrescentar ícones e links. Espero que gostem.
Oh Globs! Que coisa mais bunita de lindja *ooo*
ResponderExcluirSó uma coisa... Tem um código pra colocar na caixinha de scripts no layout? É que eu morro de medo de bugar o site colocando código assim, no CSS '-' E depois eu não consigo tirar xD
E outra coisa: Você quem fez esse código? *¬*
Sem mais comentários. Vou acabar me empolgando e escrevendo demais xD
tesourosaovento.blogspot.com
Obrigada :3
ExcluirEu apenas personalizei o código, os créditos vão para o Codrops, link no início do post.
Não entendi bem a primeira pergunta; você quer saber se há uma forma de usar em seu modelo essa caixa de código com função copiar? Se for isso, chama-se syntax highlighter, farei um post sobre isso posteriormente.
Quanto a remover um código, é desfazer ou apagar o que colou no HTML do seu modelo, ou testar em um blog de testes, que é o que faço, porque aí se der erro, não acontece nada em seu blog oficial :) Os códigos desse post são só CSS e HTML, sem script.
Bju e obrigada :D
Ah, tindi. A primeira pergunta foi se dava pra colocar em script pela própria página de edição de layout do blog. É mais fácil pra desastrada aqui testar xD
ExcluirDá sim...se for colocar em uma página, cole na opção HTML:
Excluir<*style*>
Primeiro Código
<*/style*>
Retire os asteriscos *...aí cole o Segundo Código logo abaixo e personalize.
Ou então cole o primeiro código em Modelo - Personalizar -vai abrir o Designer de Modelo do Blogger; clique em Avançado, vá até Adicionar CSS e cole. Clique em Aplicar ao Blog.
Pronto! Agora é só usar o segundo código na página ou onde quiser que o menu apareça no seu blog.
Fique a vontade para perguntar sempre que quiser ok :3
Bju...
muitos fofos Roberta,a cada dia que passa,me impressiona com seus tutoriais,um blog,bem bonito,arrumado,está recomendado no meu blog e estou te seguindo
ResponderExcluirMuito obrigada :3 Fico muito contente com sua presença <3
ExcluirBjim.
Ai que amor seu blog, Roberta! Aqui é tudo TÃO FOFO! *o*
ResponderExcluirAdorei os ícones, super lindos. <3
Obrigada :D E seja sempre bem-vinda <3
Excluir