Aqui ficam os blogs que me ajudaram na construção desse layout. Se esqueci de algum, me avise pelos comentários. Thanks!

Tutorial - Menu Top Délhi

|| ||

Olá gatos e gatas! (Agora peguei a mania da minha amiga Sabrina de chama todo mundo de gato e de gata, uuuuuurgh! que raiva! quem leu essa parte comente: "calma, surtada!")

Como tem passado? Eu bem, mas sei que isso não interessa a quase ninguém, hahaha.

Ontem, eu e o Lucas brigamos. Eu tinha perguntado pra ele por que ele não fala mais comigo, aí ele falou que ele tava falando comigo, aí eu falei que não, aí ele falou que sim, já que estava falando agora, depois eu falei que não contava, e ele disse que tava me tratando como sempre, e eu disse que era muito mais fácil falar com o Lucas-Celular que com o Lucas-Real, porque o Lucas-Celular fala, aí ele disse que falar comigo era a mesma coisa que falar sozinho. Eu xinguei ele, aí ele me xingou, aí eu mandei ele calar a boca, depois ele mandou eu calar a boca, e continuamos assim das 19h00 até 20h00. Não vou mentir, foi uma briga feia. Esfregamos muitas verdades um na cara do outro (Pelo menos eu não sou um canalha que pisou no coração de uma menina incrível! Ah, é? Pelo menos eu não sou uma reprimida que tem pânico de palco!), xingamos muito, mas nos arrependemos e pedimos desculpas. Afinal, amor de irmãos (não, não somos irmãos, mas somos quase como irmãos) sempre permanece, em vez do ódio.

Eu fiz um portfólio! Cliquem aqui para ver.

Então, sei que o blog tá paradéééééééééééééééééééééééééééééérimo (Jesus, pra quê tanto "é"?), mas é porque estou muito ocupada com a escola (sexto ano é um ano pesado, pra quem ainda não chegou, boa sorte, e pra quem já passou, inveja) e sem criatividade pra postar nada. E se tem uuma coisa que eu adoro fazer quando estou sem criatividade são menus. Hoje eu trouxe um menuzinho mega fofis, pra ser usado lá no topo do blog. No hover aparecem umas barrinhas megafofas. O nome do menu é Top Délhi. Nome besta, mas belê. Peguei a base do menu no Kawaii World, então se usarem, créditos á mim e á Kaorii. Não deu pra fazer um preview. Espero que gostem!

Leia Mais!
Primeiro, vamos personalizar. Vá até o HTML do seu blog e cole o código acima da tag [[</b:skin>:
.bar_top {
width: 100%; /* Não Altere */
height: 31px; /* Altura do menu, não altere */
}
.menu_barrax {
float: center; /* Flutuação do menu, não altere */
margin-left: 460px; /* Ajuste de acordo com seu pc para ficar no centro direitinho, se o seu for igual o meu (1920x1080) deixe assim */
padding: 0;
}
.menu_barrax li {
float: left; /* Não altere */
list-style: none; /* Não altere */
font-size: 30px; /* Tamanho da fonte */
font-weight: lighter; /* Estilo da fonte. Só altere se mudar a fonte */
font-family: 'Delius'; /* fonte */
text-transform: uppercase; /* estilo da fonte (de novo? sim) */
margin: 0 0 0 10px; /* Nem sei que merda é essa, mas não altere */
padding: 9px 0px 0px 0px; /* Nem sei que merda é essa (parte 2), mas não altere */
}
.menu_barrax li a{
padding: 10px; /* Não altere */
color: #b9dada; /* Cor da fonte */
text-decoration: none; /* Altera naum */
-webkit-transition-duration: .90s; /* Transição, não altere */
}
.menu_barrax li a:hover {
text-decoration: none; /* Altera naum */
color: #ffdod6; /* cor da fonte no hover */
border-top: 3px solid #ffdod6; /* Cor da borda de cima em hover */
border-bottom: 3px solid #ffdod6; /* Cor da borda de baixo em hover */
-webkit-transition-duration: .90s; /* Transição, não altere */
}
.transit {
-webkit-transition-duration: .90s; /* Transição, não altere */
}
.bar_topd {
width: 1900px; /* Ajuda a ajustar no centro, se seu pc for igual ao meu (1920x1080) deixe assim */
margin: 0 auto; /* Não sei o que é, então não altere */
}
@font-face {
  font-family: 'Delius';
  src: local('Delius-Regular'), url(http://themes.googleusercontent.com/static/fonts/delius/v3/7WQiMJKp1Jo3CiUw302zGA.woff) format('woff');
}
Já está tudo explicado no código. Agora, para o menu aparecer, só colar o código a seguir abaixo de </head>:
<div class='bar_top'>
<div class='bar_topd'>
<ul class='menu_barrax'>
<li><a href='link' title='Título da Tooltip'>Nome do Link</a></li>
<li><a href='link' title='Título da Tooltip'>Nome do Link</a></li>
<li><a href='link' title='Título da Tooltip'>Nome do Link</a></li>
<li><a href='link' title='Título da Tooltip'>Nome do Link</a></li>
<li><a href='link' title='Título da Tooltip'>Nome do Link</a></li>
</ul></div></div>
Espero que tenham gostado!

Bjos!

2 comentários:

Oie! Pro favor comentem nos posts, e por favor não xinguem nem sejam mal educados. Aceito críticas, ideias, elogios e tudo mais, mas com educação! E sigam o blog pf minha meta é de 100 seguidores, ajudem pf...

Be happy!

웃 ღ ♥ ♡ ❤ ❥ ❦ ∴ △ ∞ ☆ ★ ✖ 。◕‿◕。®™ ✾
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿
✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷ ♥
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖ ●••●♪♫♩♫♭♪ ʚĭɞ ☁
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●