Apresentação + Menu Destaque

03/10/2012
~Hii~
Prazer ! Meu nome é Ana Carolina, mas aqui no blog vocês podem me chamar de Kyary ou de Kya. Sou a nova postadora do blog e posto quartassábados  Vou dar preferencias para tutoriais mas também vou postar outras coisas. Posto também no blog Girl Untamed
Sempre que precisarem de algo estou a disposição. Estou acostumada a fazer mais de um post por dia, mas em algumas quartas e sábados não tenho tanto tempo. Vou me esforçar ao máximo para ser uma postadora boa ao nível do Adolescentes do Oposto. Querem saber mais sobre mim? Vai ai um resuminho:

Sou uma pessoa até que divertida carinhosa e companheira, mas também chata, teimosa e insuportável  Amo, blogger, HTML, amigos, família  The Vampire Diaries, vampiros, lobisomens, fadas, duendes. Passo a maior parte do tempo dentro de livros, num mundo que é só meu e de mais ninguém.
Vamos ao tutorial? Exemplo do menu. CLICA. Nível: Difícil.

Vá em Modelo - Editar HTML - prosseguir e procure por ]]></b:skin> logo acima cole esse código:

.destaque  {
float: right;
margin-right: -20px;
margin-top: -5px;
background: url('http://static.tumblr.com/tx5g7yp/nFYmaau44/bot__o.png');
background-repeat: no-repeat!important;
width: 64px;
height: 25px;}
.boxdestaque:hover .destaque {
background-position: -0px -25px;}
.boxdestaque {
text-align: left;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-right: 7px;
background: #fff;
padding: 5px;
margin-bottom: 7px; }
.boxdestaque:hover {
background: #;
text-shadow: 1px  1px 1px #fff;}
.boxdestaque .title {
color: #999;
font-size: 11px;
font-weight:none;
font-family: Georgia;
font-style: italic;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;}
.boxdestaque:hover .title{
color: #7797a7;
padding-left: 15px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;}

Esse menu tem o mesmo efeito do menu rollover. No codigo já vem com um tipo de botão, mas se quiser mudar o botão e fazer outro, é só mudar o tamanho, que pra quem não sabe, é isso:

width: 64px;
height: 25px;
Tudo que está em negrito no código, você pode alterar. Faz todas as alterações  que precisam e salva. A maioria das pessoas coloca esse menu na barra de lateral, mas se quiser colocar em outro lugar também pode. Aqui eu vou ensinar como colocar na barra de lateral, mas o código também serve para colocar em outro lugares.

Adicione um novo gadget(HTML/JavaScript) e cole o código abaixo:

<div class="boxdestaque">
<span class="title">Descrição do link
<a class="destaque" href="URL"></a>
</span>
</div>
<div class="boxdestaque">
<span class="title">Descrição do link
<a class="destaque" href="URL"></a>
</span>
</div>
<div class="boxdestaque">
<span class="title">Descrição do link
<a class="destaque" href="URL"></a>
</span>
</div>

Créditos  pelos códigos aqui
Tutorial por mim! E USAR CREDITE!
Coloque quantas vezes você precisar e salve. Qualquer erro ou dúvida comente aqui ok? Espero que tenham gostado mesmo. Grandinho esse primeiro post né? Beijos

14 comentários

  1. Bem vinda <3
    O menu fica lindo, é meio difícil mas vale a pena o esforço *-* Adorei!
    Beijo
    I'll Help You

    ResponderExcluir
  2. Nossa que menu lindo, nunca tinha visto um assim no meu próximo design vou usar.

    Beijos :: Cantinho de uma Otome

    ResponderExcluir
  3. Lindo,mais já uso dois menus no meu blog :(

    Portal AdoleTeens // Visite no meu perfil,ficarei feliz pela visita

    ResponderExcluir
  4. Fica realmente LINDO!!! Nunca tinha visto dessa maneira >.<
    candy-grape

    ResponderExcluir
  5. Parabéns por chegar ao blog adolescentes do oposto,vc tem blog?
    Fiquei com medo quando vi q o tuto era dificil kkkk
    (clica no meu nome,e vá ao meu peerfil)

    ResponderExcluir
  6. Obrigada a todos vocês <3 Tenho blog sim Elisa. É esse http://girluntamed-official.blogspot.com.br/

    Beijos

    ResponderExcluir
  7. Tem sim amor, ja coloquei seu blog em nossa sidebar. Amei o menu, vou usar um parecido no prox. layout. *-* Beijos
    wehearthtml.blogspot.com

    ResponderExcluir
  8. Olá! Seja muito-bem vinda. Amei o menu, super fofo, o trabalho vale a pena. Só que eu não sei onde aplicá-lo. Talvez no futuro até :)

    ResponderExcluir
  9. Adorei o tutorial!
    Já te coloquei nos afiliados viu *-*

    Bezoos <33
    mundoo-cute.blogspot.com

    ResponderExcluir
  10. adorei o tutorial, nao é tao dificil nao xp
    deve ser o costume ja de mexer em html
    seja bem vinda :)

    ResponderExcluir
  11. Nossa amei o tutorial super legal e mega fofo , concerta vou estar usando em meu outro blog amore !
    Seguindo

    http://lorhannyschneeider/blogspot.com.br
    (é só troca a barrinha pelo ponto , o google esta excluindo blog's por isso a barrinha em vez do ponto )

    ResponderExcluir
  12. Amei o tutorial,o menu é lindo .
    Bem vinda linda .

    Beijos.
    Sweet Imagination.

    ResponderExcluir
  13. lindo, lindo e lindo o menu. Bem moderno e útil. Adoro coisas diferentes assim pra colocar no blog *-*
    Beijos, momamoraes.blogspot.com

    ResponderExcluir
  14. Oi Kya! Seja bem vinda >.<
    Adorei o tuto! kkk' Pena que eu já tenho um menu lá no blog!
    Ah, vou seguir o Girl Untamed, ok?
    Beeijos e tem novo post no blog, já viu?
    Batom De Framboesa
    Já curtiu a Fan Page do blog?
    Fan Page BDF

    ResponderExcluir

Retribuo todos os comentários, menos comentários como Seguindo, segue de volta ? ou parecidos, esses NUNCA serão respondidos!
Fora isso fique a vontade para comentar e volte sempre <3