Olá gatinhos, tudo bem? Sintam-se a vontade e sejam bem vindos ao meu cantinho, este bloguinho foi criado em julho de 2012 e até hoje é direcionado a área de html e css. E se desejarem algo não exitem e peçam pela ask! beijinhos, bye ♡

19.12.13

Modelo de sidebar igual ao do blog ✿

Olá goxtosos =3 quanto tempo neh? pois eh eu sei, estou muito sem tempo por causa do trabalho e quase não me sobra tempo para mexer no blog, tipo até tive algum tempinho a noite mas usava para fazer o layout da menina que ganhou o sorteio de natal, e todo mundo sabe que quando começo uma coisa eu tenho que me focar só naquilo em que estou fazendo se não meus neurônios começam a dar tics nervosos UAHSUShaushsa, eu me foco naquilo e vou até o fim  quem me conhece sabe que sou muito dedicada  quando o assunto é layout. E para quem quiser conferir como ficou o resultado do layout da ganhadora podem clicar aqui ❤  acredito que ela gostou desse modelo ;)

Bem, agora falando sobre o post é bem complicado pra mim conseguir tempo de criar algo bem explicadinho e mais elaborado pois precisa de tempo para poder fazer, e como estou com 1 hora de intervalo do trabalho não consigo fazer muita coisa. Mas então por falta de opções eu resolvi postar como se faz o modelo de sidebar com o fundo como está aqui e não com faixinhas tipo é lindo ver como cada blog mostram pra nós modelos bem lindos e diferentes de boxside ou até mesmo as faixinhas colocadas pelo html, mas o problema de muitos é a maldita preguiça de criar algo, então fazem coisas mais simples assim como eu rsrs, no fim ficam fofas e mesmo simples ficam bem delicadas !

Então vá no seu modelo e clique em editar modelo dentro do html procure por: .sidebar .widget { apague o que estiver abaixo dela e cole o seguinte código: 

.sidebar .widget {
outline: 1px solid #COR;
outline-offset: -5px;
padding: 10px;
margin: 15px -35px;
Background:#fff;
box-shadow: inset 0px 0px 8px  #COR;
font-family:  georgia;
font-size: 13px;
color:#COR;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition-duration: .50s;
}
.sidebar h2 {
width:206px;
height:10px;
z-index: 200;
background-color: #COR;
box-shadow: inset 0 0 6px #COR, 0px 1px 1px #COR;
text-align: center;
margin-top: -1px;
margin-bottom: 10px;
padding: 10px;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 15px;
margin-left: -5px;
margin-top: -5px;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 18px;
color:#COR;
text-shadow: 0 1px #COR;
line-height: 10px;
-webkit-transition-duration: .80s;
}

Mude o que for necessário, no caso,  as cores, fontes e bordas, gente é claro que o modelo está adequado ao tamanho da minha sidebar, então altere os valores como: altura, largura, margens, tamanho de fontes e alinhamento de textos ok? Qualquer dúvida é só perguntar pode ser por ask ou por comentários mesmo ok? Beijos para todos e prometo que quando eu voltar ao normal as postagens também voltarão ao normal.

18 comentários:

  1. Ficou muito lindo o layout da vencedora *u*
    Esse modelo de side é bem legal :3

    Beijos ~
    garotas-cupcakes

    ResponderExcluir
  2. Muito divo, acho que irei usar

    http://s2mysecretsmyworld.blogspot.com.br/

    ResponderExcluir
  3. O layout da vencedora ficou muito perfeito, bem original *_*. O modelo é lindo, realmente, mas não iria combinar com meu próximo layout :c

    htmlandresources.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Uhum bem fofo, mas acho que se eu fosse fazer pra você iria ser diferente pode ter certeza UHSUHSUAHSs kissus ;)

      Excluir
  4. Muito lindo esse modelo de Sidebar, adorei.


    Abraços || sevendays-official.blogspot.com.br

    ResponderExcluir
  5. Mto linda , muito kawaii , perfeita *u*
    Primeira vez q visito , seguindo 0/

    geekegirlie.blogspot.com

    ResponderExcluir
  6. Nossa o lay dessa menina ficou divo -não,pera rs
    Eu amei o Lay Roh,obrigado novamente u.u
    Modelo de side legal *u*
    Kissus
    tudoparaseuphotoscapeface.blogspot.com

    ResponderExcluir
    Respostas
    1. De nada boba UAHSUAHushush fico muito feliz que tenha gostado ;)

      Excluir
  7. A sidebar daqui é muito linda, muito mesmo. Que ótimo que você postou. Eu não vou usar, por preguiça.

    etcforme.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada amore, kkkk preguiça? eu nem sei o que é isso USHUASHUASHUS Le preguiça falando ~

      Excluir
  8. Awh que lindo, lindo, lindo demais!
    AH, Tive uma idéia, vou fazer um layout pro meu blog baseado nos tutoriais daqui,pode ser?
    É uma forma de homenagem haushasu! Aeeh, amo esse blog!
    teenagethiings.blogspot.com.br

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)

LAYOUT E CODIFICAÇÃO POR ROH A. RAMOS OS DIREITOS ESTÃO RESERVADOS | Tecnologia do Blogger © 2017