19/04/2014

menu de sidebar: sweet

| |
Oi! Dei uma sumida, não é? Eu sei, mas estive muito doente essa semana. Minha pressão baixa atacou e fui parar no hospital duas vezes. Em uma delas, tomei injeção, soro e tudo o que é injetável e se tem algo na vida que eu simplesmente ODEIO, é agulha. Bom, foi por isso que não pude postar nos últimos dias, eu estava um caco. É a vida. Mas como tudo tem um lado bom, eu fui bastante mimada pela minha mãe que me preparou umas sopinhas maravilhosas e meu Deus, eu sou a louca da sopa (porque minha alma é velha). Enfim, deixando minhas desventuras de lado, eu estava procurando o que postar e quem disse que eu achei criatividade? Se alguém encontrar um pouquinho por aí, favor enviar o link porque, olha... Sendo assim, me forcei a ser produtiva e investi certo tempo no desenvolvimento de um menuzinho de sidebar super simples, mas que eu amei, já que é o primeiro código que eu desenvolvo do zero. Espero que gostem e usem, lembrando de dar os créditos porque deu um trabalhinho. Expliquei direitinho como aplicar no layout, mas se tiverem qualquer dúvida, sugestão ou pedido, é só comentar.


No painel de controle do Blogger, clique em Tema e vá nas três bolinhas, escolhendo Editar HTML. Dê um clique dentro da área de código para localizar seu cursor, aperte Ctrl+F, pesquise por ]]></b:skin> e dê enter. Quando achar, cole acima/antes este código:

.sweet {
font-family: arial;
font-size: 11px;
color: #fff;
text-align: center;
text-decoration: none;
width: 54px;
height: 15px;
background: #d6e0e4;
border-radius: 2px;
padding: 3px;
margin: 3px;
display: inline-block;
-webkit-transition-duration: .80s;
}
.sweet: hover {
background: #c3d7df;
-webkit-transition-duration: .80s;
transform: translate(0px, 0px);
-moz-transform: scale(0.1) translate(0px, -0px);
-webkit-transform: scale(1.1) translate(0px, -0px);
-ms-zoom: 1.1;
opacity: 1 !important;
-moz-opacity: 1 !important;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease;
}

Mude apenas o que está em negrito para se adequar ao seu layout (largura e cores de fundo). Você pode achar o código da cor no site da Adobe. Em seguida, no painel de controle, vá em Layout, selecione Adicionar um Gadget e escolha a opção HTML/JavaScript. Copie e cole o código abaixo, substituindo pelas suas informações:

<div class="sweet"><a href="LINK">TÍTULO</a></div>

Repita o código acima quantas vezes for necessário. É isto. Como citei acima, não estou nos meus melhores dias, mas logo menos volto com post fresquinho para vocês. Fiquem bem. ☆

10 comentários

  1. Respostas
    1. Awn que bom que gostou ^▽^. Fico feliz!

      Kissus ~~♥

      Excluir
  2. Eu sofro de hipotensão (pressão baixa) e sei bem como é ruim :T. Esse menu é bem bonitinho, gostei.

    Chu (◠▽◕☆), www.wh-asia.net

    ResponderExcluir
    Respostas
    1. É bem tenso :c! Que bom que gostou do menu, dá pro gasto né? ◠‿◠ Obrigado ♥

      Kissus *3*

      Excluir
  3. A Jheni melhoras T^T serio mais eu amei esse menu bem fofinho <3 muitas bjkss e melhoras viu?Boa páscoa <3
    http://thing-of-kawaii.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigado ♥ Que bom que gostou!

      Kissus, obrigada e feliz páscoa ( ^∇^)

      Excluir
  4. Melhoras minha gata TuT Sério que você fez este menu sozinha? .-. Aplausos u.u Você mereci.
    Caso você precise se ausentar daqui,não se preocupe, o importante é que você melhore, ok? ♥
    Me and You | [WWW]

    ResponderExcluir
    Respostas
    1. Obrigado, já me sinto melhor ♥ Me matei, mas fiz o menuzinho sozinha >.<

      Kisses ~~♥

      Excluir
  5. *O* Que menu divoso >3< Gostei *w*
    Kissus
    Salad ~ http://s-alad.blogspot.com/

    ResponderExcluir
    Respostas
    1. Obrigado ♥ Que bom que gostou *-*

      Kisses ♥3♥

      Excluir

Não ofenda autores ou leitores.
Deixe o link do seu blog para que eu visite.
Proibido comentários apenas com divulgação.
Comente seu pedido ou sugestão.