• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

26 de agosto de 2013

Tutorial - Sliding Tags

Uma ótima dica de blog - (www)
Olá gente, tudo bem com vocês?
Já terminei de ler o livro inverno na manhã à alguns dias, uma história emocionante, pena que não posso contar o final, vai que você queiram ler né?! seria um ato mal :l
Ah, em falar em ato mal, criei uma ask, odeio ask, mais criei já que minha amiga sugeriu, então criei, respondo às vezes com umas imagens podres então nem liguem tá?! rsrs'
Mais então...fui postar aqui no blog que tinha criado uma ask, então começou as ofensas, creio que essa não será a última que receberei, ao menos que bloqueie comentários anônimos uahuhauhu'. Uma  pessoa escreveu isso:
(clique para aumentar)
Gente, me diz, tem necessidade disto? e essa pessoa mesmo diz que eu devo pensar antes de escrever e interpretar antes também, o que pelo jeito ela não fez já que veio me julgando sendo que esse tal anônimo estava em anônimo, argh, gente, só estou dando um aviso, nunca faria isso de ficar xingando o blog dos outros em anônimo, nem conheço o blog dessa pessoa aí, mais desconfio de quem seja.

Desculpem pelo desabafo super longo, tomou grande tempo do post, mais hoje a finalidade do post era outra.
Pediram na C-box o tutorial de nossas tags usadas no 'categorias'
Os créditos vão totalmente para o #TooKawaii (www) blog divo!

O tutorial é meio longo, mais se você fizer tudo certo, vai ficar tudo nos trinks ;3
Antes de </body> cole:

<script type="text/javascript" charset="utf-8" src="http://static.tumblr.com/7bcdfh6/zOfmhr0bq/jquery-1.6.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://static.tumblr.com/7bcdfh6/crdmhr0al/jquery.easing.1.3.js"></script>
<script type="text/javascript" charset="utf-8" src="http://static.tumblr.com/7bcdfh6/9Zqmhr07y/functions.js"></script>

Agora cole depois de <head>:

<link rel="stylesheet" media="screen" href="http://static.tumblr.com/7bcdfh6/kY2mhr0cc/reset.css">

Agora cole antes de ]]></b:skin>:

/* CSS SLIDING TAGS - POR TOO KAWAII - NÃO RETIRE OS CRÉDITOS
-------------------------------------------------------------*/
.tag { background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 0 0; color: #868686; display: none; float: left; height: 25px; line-height: 1; margin: 5px; padding: 0 5px 0 8px; position: relative; text-decoration: none; font-size:10px;text-transform:uppercase; font-family: 'Trebuchet MS', Trebuchet, Sans-serif; }
.tag:hover { cursor: pointer; }
.tag:active { top: 1px; }
.tag span { display: block; float: left; }
.tag_name { background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 100% -25px; height: 19px; padding: 6px 10px 0 0; position: relative; text-shadow: 0 1px 1px #fff; z-index: 10; }
.tag_name a { background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 100% -25px; height: 19px; padding: 6px 10px 0 0; position: relative; text-shadow: 0 1px 1px #fff; z-index: 10; }
.tag_count { background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 100% -50px; color: #fff; height: 19px; padding: 5px 10px 0; position: absolute; right: 0; text-shadow: 1px 1px 0px#bf9a9a; top: 1px; z-index: 5; }
.tag_count a { background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 100% -50px; color: #fff; height: 19px; padding: 5px 10px 0; position: absolute; right: 0; text-shadow: 1px 1px 0px#bf9a9a; top: 1px; z-index: 5; }

Para modificar as cores você pode usar o PS, substitua as url's "http://s20.postimg.org/b9zsk1t25/tag.png" pela imagem modificada. Molde:

E agora, para aparecer o efeito, cole em um HTML / Javascript:

<ul>
<li>
       <a href="#" class="tag">
        <span class="tag_name"># tag aqui</span>
        <span class="tag_count">veja</span>
       </a>
      </li>
<li>
       <a href="#" class="tag">
        <span class="tag_name"># tag aqui</span>
        <span class="tag_count">veja</span>
       </a>
      </li>
<li>
       <a href="#" class="tag">
        <span class="tag_name"># tag aqui</span>
        <span class="tag_count">veja</span>
       </a>
      </li>
<li>
       <a href="#" class="tag">
        <span class="tag_name"># tag aqui</span>
        <span class="tag_count">veja</span>
       </a>
      </li>
<a href="#" class="tag">
        <span class="tag_name"># tag aqui</span>
        <span class="tag_count">veja</span>
       </a>
   
<li>
       <a href="#" class="tag">
        <span class="tag_name"># tag aqui</span>
            <span class="tag_count">veja</span>
       </a>
      </li>
<li>
       <a href="#" class="tag">
        <span class="tag_name"># tag aqui</span>
        <span class="tag_count">veja</span>
       </a>
      </li>
</ul>
Prontinho, não tem segredo, é só prestar atenção no super tutorial, e mais uma vez deixo os créditos para o T.K (www). É isso gente, podem fazer mais pedidos, e obrigada a Glenda pelo pedido.

31 comentários:

  1. Aff, que pouca vergonha sair falando assim com os outros --'
    Desconfio de alguém também, mas sou tão desinformada que né ._.
    Ah, quando vi esse efeito achei tão lindo *u*
    Mas só serve para quem sabe montar um lay decente (eu não -q).

    http://oppadoramas.blogspot.com.br/

    ResponderExcluir
  2. Já conhecia o tutorial, mais é muito bom e muito Útil.

    http://fou-r.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Verdade sempre achei muito lindas essas tags >.< quando as descobri no T.K surtei!

      Excluir
  3. Awn o tutorial é muito útil , inclusive vou até usá-lo , :3
    adoro mesmo *-*
    >http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
  4. Hahahah!... -sqn ~ sério, algumas pessoas não enxergam a figura ridícula que fazem. E realmente, ela ainda diz para você pensar! Enfim, como você disse não será a última atitude ofensiva que vai receber, com muita pena minha, mas é algo com que todas as blogueiras têm de lidar né?

    Até usava, vou guardar pelo menos, mas ainda não vou usar porque já tenho uma ideia para o meu futuro layout :3 Talvez um dia, é realmente de dar inveja, mas também não quero ficar igual ao AN (nas tags). Também adoro as inclinações que você usa na blockquote, ler mais... já usava há uns tempos no meu bloguito, mas na sidebar >.<

    Ah, mas se usarmos esse tuto, ele também não será aplicado quando usarmos os pontinhos? *péssima explicação* pronto, refiro-me a isto» http://4.bp.blogspot.com/-IzEt1Q7xH6M/Uhy2OKKOCVI/AAAAAAAAMx0/JCBGViLtquw/s1600/Capturar.PNG

    E mais uma coisa (julgava que ia fazer um comentário curtinho, mas cada vez me convenço de que isso é impossível -.-): Eu participei daquilo de dar a opinião sobre hiatus, não vai dar em nada? quer dizer, a previsão para postar já se foi, e ou eu estou a ver mal (nem seria de estranhar) ou ainda não foi postado. Claro, pode estar ocupada, é só para eu saber.

    Kissus :3
    sou-uma-adolescente.blogspot.pt

    ResponderExcluir
    Respostas
    1. Verdade né ♥ coisa louca uhauh'

      Ah e antes de mostrar a imagem já sabia de quais 'pontinhos' você se refere, são listas não ordenadas, quero avisar que felizmente eles não ficam nessas listas, você pode ver isso em alguns posts nossos, as vezes usamos isto, e incrivelmente não afeta, acho bem legal :)

      E amei seu carinho *--* quando tenho muito papo as vezes faço esses textos tbm uahuehu' >0<'

      Excluir
  5. Gente que blog divo é esse? Amei *3*

    Aah, eu não tenho ask por esses motivos, e afinal nem blog tenho mais kkk
    Estou criando um novo e usando muitos tutoriais daqui >.< (vou colocar créditos, claro)
    amei esse efeito... ♥

    Já estou seguindo *3*

    ResponderExcluir
    Respostas
    1. Aham, criei à pouquíssimos dias pois minha amiga sugeriu, sabia que ia dar em tremeliques aos invejosos uahuehu'

      Excluir
  6. Ask são para perguntas não para ofensas. Bando de recalcados. ¬¬
    O Too Kawaii é muito fofo *0*
    O tuto super bem explicadinho, xonei♥

    Bzu
    Paraíso Abstrato

    ResponderExcluir
  7. Não ligue muito para estas críticas, o importante é que sabe que não fez nada disto e que este tal "Anónimo" está equivocado u__u O TooKawaii é realmente super fofo <33 E o tutorial é muito bom, diferente e lindo!

    Beijos ✷ Pequenos Infinitos

    ResponderExcluir
    Respostas
    1. verdade, e obrigada, não esquento minha cabeça com isso, já tenho muitas outras coisas para esquentar, sei que isso não passa de alguém querendo nos denegrir.

      Excluir
  8. Nossa, muito triste essas pessoas de ask. Eu tinha criado um, mas não aguentei e excluí. Sabe como é, né? Pessoas que sentem inveja e não sabem falar na nossa frente. Enfim, ótimo tuto! Parabéns, seu blog é lindo. Beijos!

    Peall
    www.bigbrigadeiro.blogspot.com.br

    OBS: Participa do Papo de Blogueiro! Só é entrar no Blog e saber como participar. Você poderá ser o blogueiro escolhido para uma entrevista. Beijos!

    ResponderExcluir
    Respostas
    1. Sei como é sim, rsrs' criei só por causa da minha amiga mesmo, ah ela me paga kkkkkkk sqn- kkk

      Participo sim

      Excluir
  9. Ela deve ter os motivos dela.Mas também ela xingar vocês também foi errado.
    Eu vi no dia em que ela postou este comentário e ela apenas disse que iria parar de seguir este blog porque provavelmente, vocês não devem ter aceitado parcerias ou não deram uma resposta definitiva.

    Vocês além de caçoarem dela, tiveram a audácia de ir ao blog dela em anônimo e fizeram comentários bobos não a compreendendo.
    Do mesmo modo que vocês acharam ruim de ela falar que ia parar de seguir o blog dela, vocês também não deviam ir até lá e provocá-la.Sendo que vocês nem acompanham o blog.

    E a postagem dela no blog dela, com o tema de modificações no blog, vale para todos os blogs que não a seguem de volta.Não especificamente o blog de vocês.E sobre personalizações, aqui no Blogger cada um tem a liberdade de personalizar o blog do jeito que bem quiser e da maneira como vocês quiserem.

    Revejam as atitudes de vocês por favor e se possível, reduzam os conflitos .Queremos e sei que todos querem uma blogosfera mais tranquila e estável para o bem de todos!

    ResponderExcluir
    Respostas
    1. Mas o caso é precisamente que não foi ninguém deste blog a fazer isso, a pessoa da ask é que fez confusão. Ou seja, eu até acho que o AN reagiu muito bem a uma atitude daquelas, tendo em conta que foi acusado injustamente.

      Excluir
    2. Obrigada Anilyan, acho que você realmente leu o post rsrs'
      Poxa, acho até estranho essa 'monitoradora' aí falar com tanta certeza que caçoamos dela, poxa, pelo menos me dê o link do blog para eu saber já que você é uma monitoradora onipresente que sabe de tudo, e mesmo assim está sabendo errado sobre meus atos, pois como eu disse, foi um fantasma porque eu nem estava no pc fazia alguns dias, e nem faço (NEM FAÇO) ideia (IDEIA) de qual blog que foi xingado, creio que é mesmo dessa menina que pediu afiliação.

      Excluir
    3. Engraçado você pedir para a Megan diminuir com os conflitos se quem postou esse comentário em anônimo não foi ninguém do A.N., nem temos conhecimento sobre esse blog, gostaria de saber qual é...aff. Não temos tempo para ficar perdendo escrevendo bobagens, fazemos coisas mais importantes, obrigada.

      Excluir
  10. Pois vou querer provas que não são vocês que fizeram isso com ela.
    Se forem vocês e não quiserem admitir, o blog poderá sair do ar.

    ResponderExcluir
    Respostas
    1. 1ª prova: eu estava ausente pelo blogger.
      2ª prova: não visitei muitos blogs, e em todos que visitei quando tinha tempo, visitei para comentar sobre seus posts.
      3ª prova: não estou falando mentira, até porque, se eu quisesse denegrir minha imagem, eu o faria por minha conta e não por uma conta anônima para covardes.
      4ª prova: Como você sabe que temos que admitir "Se forem vocês e não quiserem admitir" se você não sabe qual é a verdade? você acha mesmo que estamos falando mentira, para "admitir"? isso me leva algumas dúvidas querida 'monitoração blogger brasil'

      Excluir
  11. Mas o que? como ela pode te acusar se estava em ANÔNIMO, gente ela é vidente pra saber quem foi? acho que não. Ela deveria pensar umas 5454321234 vezes antes de te acusar de algo ¬¬'
    Amei o tutorial, irei usar em breve ^^
    bjs

    chocoonut.blogspot.com.br

    ResponderExcluir
    Respostas
    1. aham verdade, talvez seja vidente mesmo sei lá uhaue'

      Excluir
  12. Oi queria saber como faço pra deixar meu tumblr como amostra igual o preview de vocês!?

    ResponderExcluir
  13. nem vou falar do anonimo que nem sei de nada, rs. Mas quando fui salvar o menu deu erro no meu html :c conserta isso?
    Behos~
    Castle Madness | Simply Thonn

    ResponderExcluir