Meio nada ver mas, eu tava pensando se vocês vão sentir minha falta quando eu for para Hogwarts...vai ser triste abandonar meu pc pela minha varinha!!
Oiieee minhas bonequinhas de porcelana, a titia louca chegou. Tudo bem?!
Desculpem a falta de postagens e comunicação, mas hoje eu trouxe um tuto bem legal e procurado, de como deixar a sidebar do lado do cabeçalho, enfim, o modelo certo ou que indico de um blog...vamos ver!?
Nesse post, irei ensinar:
♥ Fazer a sidebar ficar ao lado do cabeçalho, como aqui no Pincelando;
♥ Personalizar área das postagens;
♥ Personalizar sidebar e gadgets;
Só. Depois eu volto com alguns tutoriais indicados e bem legais...pedidos?!
Só. Depois eu volto com alguns tutoriais indicados e bem legais...pedidos?!
Bom pessoal, acho que muita gente no início fica em dúvida de como colocamos a sidebar ao lado do cabeçalho, como aqui no Pincelando. É bem simples: ajustar o cabeçalho no tamanho da área das postagens e trazer a sidebar para cima, e é isso que eu vou ensinar.
Primeiro, usaremos um cabeçalho teste e que eu deixo para vocês depois. O tamanho dele é 815x350, ideal e indicado por mim.
-webkit-border-radius: 10px
Aqui vão dois modelos de cabeçalhos!!
Primeiro, usaremos um cabeçalho teste e que eu deixo para vocês depois. O tamanho dele é 815x350, ideal e indicado por mim.
É só colocar o cabeçalho normal, e pronto.
Depois, para deixar sua sidebar mais para cima, vá em Editar HTML ~> Dê um Ctrl+F e procure por :
.main-inner .column-left-outer { - Se sua sidebar for na esquerda
.main-inner .column-right-outer { - Se sua sidebar for na direita
.main-inner .column-right-outer { - Se sua sidebar for na direita
Achou?Depois, abaixo, coloque:
margin-top: -100px;
Visualize, e vá trocando o 100 pelo número desejado: quando maior, mais para cima a sidebar ficará.
Que tal bloquear seu cabeçalho contra cópias? É muito simples, segue o print!
Pronto! Chegamos a parte de personalizar sua sidebar.
Primeiro, se você quiser separar os gadgets para ficar mais fofo e organizado, faça o seguinte:
vai em Editar HTML ~> Dá um Ctrl+F ou F3 e procure pelo seguinte código:
/* Widgets
Você irá achar assim:
/* Widgets
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}
Antes da última chave, adicione:
background: #ffffff;
Se quiser arredondar, antes de fechar a chave ainda, coloque:
-webkit-border-radius: 10px
-moz-border-radius: 10px;
border-radius: 10px;
Lembre-se: no modelo do Blogger, sua sidebar deve estar programada para ter fundo transparente e sem moldura.
Agora, vamos personalizar o título da sidebar, do jeito fácil, para iniciantes.
Vá em Layout ~> Adicionar um Gadget ~> HTML Java Script e cole:
<style>
CÓDIGO DA SUA PERSONALIZAÇÃO
</style>
Personalize do seu jeito!
.sidebar h2{
font-family: Coloque aqui a fonte do seu título
text-align: Aqui o Alinhamento do seu título
border-bottom: Quer borda abaixo do título? Coloque aqui cor, expessura e tipo(dashed,dotted,solid...)
color: Cor do título;
}
E aí você pode adicionar sombra, hover, o que quiser.
Use fontes personalizadas do Google Web Fonts!
Não sabe usar?! É BEM simples.
Escolha a fonte no Google Web Fonts e clique em Quick-use!
Copie o 1º código ~> Vá em Editar HTML ~> Dê um Ctrl+F e pesquise por:
<head>
Acima desse código cole o da sua fonte, e não se esqueça de adicionar no final </link> (ou não irá funcionar).
Feito isso, é só usar o 2º código aonde quiser! Exemplo:
.sidebar h2{
font-family: font-family: 'Sail', cursive;
Vamos agora aprender a arredondar e até a separar a área das postagens.
Vá em Editar HTML ~> Dê um Ctrl+F e procure por:
.main-inner .column-center-outer {
Depois, logo abaixo,cole:
.post-outer {
margin: 3px 8px 15px;
background:#fff;
padding: 5px 5px;
padding: 5px;
border-radius: 10px;
}
Bem simples não? Aprenda mais sobre esse código aqui!
Se você quiser só arredondar, pesquisa pelo mesmo código( .main-inner .column-center-outer { ) só que coloque:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
Quer colocar uma bordinha?
Junto, antes de fechar a chave, cole:
border:1px solid #00000;
O código é fácil de entender. No 1px altere a expessura da borda, no solid altere o estilo da borda e no #00000 a cor da borda!
Personalize o título do seu post!
Vá em Editar HTML ~> Dê um Ctrl+F e procure por:
* Posts
Você irá encontrar assim:
/* Posts
----------------------------------------------- */
h3.post-title {
E mais algumas coisinhas aqui(é que o meu já tá personalizado)
}
Depois de h3.post-title {
Cole qualquer personalização, exemplo:
text-align: center;
border-bottom: 1px solid #00000;
color: #696969;
text-shadow:01px 1px #00000 ;
Etc...aí é só substituir o necessário!
-----------------------------------------------------------------------------------------------------------------------
Mas Giih, como eu coloco fonte personalizada no título da postagem?
Faça todo procedimento como no título da sidebar:
Escolha a fonte no Google Web Fonts e clique em Quick-use!
Copie o 1º código ~> Vá em Editar HTML ~> Dê um Ctrl+F e pesquise por:
<head>
Acima desse código cole o da sua fonte, e não se esqueça de adicionar no final </link> (ou não irá funcionar).
Mas o 2º código você faz o seguinte:
Procure ainda no seu HTML, o seguinte código:
<Group description="Post Title" selector="h3.post-title a">
Irá encontrar depois:
<Variable name="post.title.font" description="Font" type="font"
default="normal bold 20px 'Sofia', cursive;" value="normal 20px'Sofia', cursive"/>
Troque a parte em negrito pela metade do 2º código, ou seja só o código da fonte, sem o "font-family"(no caso 'Sail', cursive;)
Aqui vão dois modelos de cabeçalhos!!
Fontes que eu indico no Google Web Fonts:
Sofia ♥ Sail ♥ Lobster Two ♥ Euphoria Script ♥ Great Vibes ♥ Allura ♥ Sue Ellen Francisco ♥ Vibur
Agora, alguns seletores de cores, para achar cores ideias ao seu layout, borda, etc...
Agora, o post terminou!
Mas essa era a primeira parte, semana que vem eu venho com a segunda!
Agradeço ao Kawaii World pelos materiais dos cabeçalhos, e ao Jackie Dream por um dos tutoriais. O resto foi tudo de "lembrança minha", ou seja, o código existe em outros blogs, mas eu quem fiz e alterei, por isso não lembro o original, se for seu, por favor me avise!
Beijos e mais beijos :3
Bom final de semana ;]
Ai ai, fofuras no ar em pleno sábado. Já conheciam minha companhia de Hogwarts?!
PS:>ele é só meu entenderam, meeeeeeeeu!!
Oi Gih... Gostaria de saber qual é essa fonte que varios blog andam usando... Essa que você tem no blog.... Acho linda... Mas não sei qual o nome ou como baixa ;(
ResponderExcluirBeijos!
Amei a big tutorial,bem útil
ResponderExcluirbeijos
Que sou amore? Ele é MEU U.U shuashuashuashua
ResponderExcluirHarry seu lindoo
Seguindo adorei o blog
Kisses
sonhosdeumagarota123(.blogspot.com.br)
Adorei o blog querida, muito divo u.u
ResponderExcluirBjiiim
imperfectsmiles - nathi.blogspot.com
Que legal <33 Amei o estilo que vc escolheu para personalizar \o Ah, ja sabe da novidade? O Teen Style voltou mas como Sweet Cloud. To muito feliz de voltar :) Queria muuito que vc me ajudasse a reconstrui-lo! ja to seguindo ok? Conto com vc <3
ResponderExcluirsweetcloud-oficial.blogspot.com/
Amei os tutos, principalmente o de subir a barra lateral! procurei feito louca por esse tuto u_u mas consegui fazer tranquilamente <3
ResponderExcluirEstou usando ele no layout do meu blog de encomendas, ok?
Beijos!
myacidblackcherry.blogspot.com
amei fica super lindo!
ResponderExcluirAdolescente Nerd