Como separar sidebar no template ''Janela de Imagem''
Bem, o modelo que falarei aqui é o segundo dos modelos do Template ''Janela de Imagem''
Ensinarei uma maneira que encontrei para separar a sidebar da post desse modelo , como não existe esse tutorial na Web, e mesmo meu blog não sendo de tutorias vou compartilhar com vocês mesmo assim, para aqueles que tem esse modelo, querem modificar a sidebar e tem pena de se desfazer do template do blog, tenho certeza que irá te ajudar muito :)
Obs: Depois da sidebar separada, também tem como subir ou desce-la e claro é um outro método também, porque as atuais não irá funcionar nesse template, o lugar é outro.
Vejam só no tutorial, para entenderem melhor.. Let's go! Yea! 。◕‿◕。
Obs: Ainda não testei nos outros dois tipos desse modelo, caso funcione também, avisarei aqui. Tentarei até nos outros templates também ^.^
O Template ele é assim (apenas o plano de fundo e cabeçalho, as postagens de teste que não tem kk~), como podem perceber a sidebar é junta com um fundo transparente-esbranquiçado da postagem.
Eu escolhi esse template pois os posts ficavam já separados dos posts seguintes, o fundo do cabeçalho não era junta da postagem (já é assim transparente e prontinha para colocar qualquer tipo de cabeçalho) e tb achei ele mais bonito que os outros, eu não tinha noção nenhuma do mundo blogger, e percebi que muitos tutoriais são para o modelo Simples e Travel, claro que muitas consegui até colocar nesse meu modelo, mas com o passar do tempo pode se tornar chato a sidebar ser transparente, fazendo com o que os planos de fundo mais detalhados, bolinhas, corações, bonequinhos também apareça na sidebar e muitas vezes dificultando a leitura dela. Eu já até me acostumei com ela assim (transparente) , descobri a solução de separar e colocar fundo nela, mas no final acabei deixando do jeito atual mesmo.
Mesmo assim como já falei a cima irei compartilhar meu método com vocês.
Antes de tudo: Façam o backup do seu template atual, porque caso der algo errado terá como voltar ao seu antigo template, ok?
Agora..
Vão em ''Modelo'' e depois ''Editar HTML''
Agora aperte Ctrl+F e procure por /* Main
Caso não enchergem clique na imagem para ampliar ok? :) Continuando..
Selecionem toda essa parte do /* Main destacada na imagem acima e substitua por :
.main-outer {
-moz-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
-webkit-border-top-left-radius: $(main.border.radius.top);
-webkit-border-top-right-radius: $(main.border.radius.top);
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-goog-ms-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
.main-inner {
padding: $(content.padding) 0;
}
}
.main-inner .column-left-inner,
.main-inner .column-right-inner {
padding: 15px 0;
}
Visualize, se ficou desse jeito como na imagem abaixo, salve:
Percebam que ficou sem fundo aquele fundo meio transparente da primeira imagem.
Agora vamos colocar um fundo na Sidebar ...
Abram a barra de pesquisa do HTML novamente e procurem por /* Widgets
Substitua ele todo (igual o primeiro passo)
por:
.sidebar .widget {
border-bottom: 2px solid
padding-bottom: 10px;
margin: 10px 0;
Background: #cccccc;
background: #fff;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 20px;
padding-top: 5px;
border-radius: 5px;
box-shadow: 1px 3px 15px 2px #ccc;
}
Se ficou assim:
Salve! Prontinho, temos uma sidebar com fundo e separada do post *-* . Legal não?
Agora para aqueles que gostam da sidebar mais para cima ou para baixo.. procurem por ''/* Main'' novamente , e lá no finalzinho dele terá ''padding: 15px 0;'' , abaixo dele colem:
margin-top: -100px;
e ficará assim:
Notaram que a sidebar subiu né? Agora se quer subir mais que isso aumente a numeração por exemplo -200 , -300 e por aí vai.. se você quiser que fique mais para baixo, tire o sinal de menos, e coloque o tamanho da distância que mais lhe preferir.
Então é isso pessoal,
Espero que o tuto ajude muita gente por ai,
se forem postar em seus blogs/sites e etc..
Por favor coloquem os créditos no final da postagem.
Eu quebrei minha cabeça para achar essa solução e tive minha boa vontade
de compartilhar com vocês já que não existe um tutorial na Web, então levem em consideração okay?
~Oh leseira quebrei a cabeça pra no final de tudo não usar ~.~ , tvlz algum dia eu use kk, pelo menos a tuto já estará aqui caso eu esqueça :P~
Por hoje é só
Ja ne! ^.^