Como separar sidebar no template ''Janela de Imagem''

janeiro 29, 2015


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! ^.^

Leia também:

4 comentários

  1. Yo! Você explica bem, posta um tutorial de como fez essa ária de comentários tão fofo?
    bjos,bye!!bye!!

    http://theaangel.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Yo! ^.^ Obrigada Carolina :) .

      Bem.. essa área de comentários não foi eu mesma que inventei, é do blog Reino Kawaii
      é bem longa e meio confusa, então pode deixar que farei um tutorial explicando da melhor forma, ok? ^.^

      Obrigada por acompanhar meu blog *-*
      Ja ne!

      Excluir

© 2017 Sweet Magic. Re-Design By: Juciane Damasceno. Tecnologia do Blogger.
Eu Sou do CBBlogers