Adivinha que blog maroto voltou com um novo layout, novas parcerias e sorteios de brindes como bicicletas, carros e uma casa no valor de 150 mil reais???
Primeiramente, gostaria de explicar de forma bem rápida para todos os nossos leitores imaginários sobre a nossa ausência: vestibular, preguiça, vestibular, vida corrida, vestibular. Acho que é isso, pardon moi.
Sobre o post de hoje:
Como os nossos assíduos leitores puderam perceber, mudamos o visual do blog (para ver o visual antigo é só clicar aqui), apesar de eu ter uma imensa paixão por aquele layout, achamos que já estava na hora de trocar. Ao tentar usufruir as minhas antigas habilidades proibidas de HTML e CSS que há muito tempo eu não usava, recorri aos inúmeros tutoriais para o Blogger que existe na internet. Entretanto, eu tive uma surpresa: hoje em dia esse tutoriais não estão tão numerosos assim.
Lembro que há um tempo atrás, quando ter um blog do Blogger estava na moda, o que não faltava na internet eram tutoriais de como colocar menus, mudar template e adicionar gadgets. Hoje em dia, entretanto, parece que essa antiga magia está sendo perdida, o que me deixa muito triste. Portanto, resolvi começar a reescrever alguns tutoriais sobre essa maravilhosa magia que não pode acabar.
Hoje eu vou ensinar como colocar um menu igual o do atual layout, eu achei ele no blog Enjoy Things, lá tem alguns tutoriais bem didáticos e ele é visualmente muito gostoso (lembra algodão-doce).
Primeiramente, gostaria de explicar de forma bem rápida para todos os nossos leitores imaginários sobre a nossa ausência: vestibular, preguiça, vestibular, vida corrida, vestibular. Acho que é isso, pardon moi.
Sobre o post de hoje:
Como os nossos assíduos leitores puderam perceber, mudamos o visual do blog (para ver o visual antigo é só clicar aqui), apesar de eu ter uma imensa paixão por aquele layout, achamos que já estava na hora de trocar. Ao tentar usufruir as minhas antigas habilidades proibidas de HTML e CSS que há muito tempo eu não usava, recorri aos inúmeros tutoriais para o Blogger que existe na internet. Entretanto, eu tive uma surpresa: hoje em dia esse tutoriais não estão tão numerosos assim.
Lembro que há um tempo atrás, quando ter um blog do Blogger estava na moda, o que não faltava na internet eram tutoriais de como colocar menus, mudar template e adicionar gadgets. Hoje em dia, entretanto, parece que essa antiga magia está sendo perdida, o que me deixa muito triste. Portanto, resolvi começar a reescrever alguns tutoriais sobre essa maravilhosa magia que não pode acabar.
Hoje eu vou ensinar como colocar um menu igual o do atual layout, eu achei ele no blog Enjoy Things, lá tem alguns tutoriais bem didáticos e ele é visualmente muito gostoso (lembra algodão-doce).
Primeiramente, você deve apagar o menu já existente no seu blog, caso você tenha um, geralmente, alguns templates prontos do blogger possuem o menu, você deve apagá-lo.
Caso não saiba como fazer isso, você pode clicar com o botão direito em cima do menu e depois em inspecionar, ao lado aparecerá o código dele, preste atenção onde ele começa e onde termina e depois apague-o.
Feito isso, você deve adicionar o seguinte código no CSS do seu blog, geralmente, ele fica escondido dentro do template, para achá-lo, basta clicar em ►<b:skin>...</b:skin> , vai aparecer váaarias novas linhas em azul, adicione o código logo ANTES do </b:skin>.
/* --- Menu -------- */
.widget-content { width:100%}
#PageList1 {background: #; width: 100%;height: 44px; line-height:20px; margin-bottom: 38px; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; text-transform:uppercase; }
#PageList1 ul li a {font-family: 'Open Sans Condensed', sans-serif; color:#737373; text-decoration: none;
font-size: 24px; padding: 05px; font-weight: 300; -webkit-transition-duration: .50s;-moz-transition: 50s; -o-transition: 50s;}
#PageList1 ul li a:hover {color:#9f9f9f;text-decoration: none;}
/* --- Fim do Menu -------- */
"Para posicionar o menu antes das postagens encontre a tag <body> e procure por ''<div id='content-wrapper'>" e logo depois dessa linha cole este código (click no link)." --> o post original dizia isso, entretando, eu não encontrei o código em negrito devido ao tipo de template que uso, eu colei o código logo ABAIXO de "<div class='main-outer'>" e deu certo.
Personalizando o menu:
border (bottom / top) - linha do menu;
font-family - tipo da fonte;
font-weight - normal, bold, bolder, lighter, 100, 200, 300, 400;
font-style - estilo da fonte, suas variações são oblique, initial, inherit.
text-transform: uppercase - texto maiúsculo, suas variações: none: texto normal, capitalize: todas as primeiras letras do texto em maiúsculas, lowercase: todas as letras do texto em minúsculas ;
#PageList1 ul li a - cor do link, tipo de fonte, tamanho, padding (espassamento);
#PageList1 ul li a:hover - cor do link quando clicar;
#PageList1 - width (tamanho total do menu), height (altura do menu), aqui você pode adicionar cor no fundo em 'background'.
(Fonte que ela utilizou: <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>)
Por último, vá até Layout > Adicionar um Gadgets > Páginas e configure as páginas que você quer que apareçam no seu menu e pronto.
Por último, vá até Layout > Adicionar um Gadgets > Páginas e configure as páginas que você quer que apareçam no seu menu e pronto.
até logo galerinha blogueira
~rod
p.s.:obrigado Bruna Borges, do blog Enjoy Things, você é fodona.
Ahhhhh cada layout! Um mais lindo que o outro <3
ResponderExcluirQue leitor imaginário o que, eu sou leitora aqui hahahahahah