♦ Tutorial ~ Sidebar modelo Bbox


Hey Pessoal
  Deveria ter postado ontem, mas minha internet estava uma bosta. Então passei o dia todo no PhotoShop, testando minhas habilidades ou na cama lendo O Resgate do Tigre, e caramba, que livro bom. Tem vários momentos que você fica "OMG, sério que isto está acontecendo?". Mas infelizmente o livro acabou, e agora comecei a ler A Culpa é das Estrelas, e estou gostando da história.
  Mas o assunto do post é o tutorial de um modelo de sidebar que eu criei para o layout passado, mas eu fui muito burro e não tirei prints do layout, então criei uma ilustração para demonstrar do que se trata o tutorial, espero que entendam o que eu estou dizendo. 



No seu blogger, vá em:
Modelo >> Editar Html
E pesquise por
]]></b:skin>
Em cima dele cole este código
.sidebar .widget {
background:#fff;
padding:5px;
margin-left:15px;
margin-top:10px;
margin-bottom:40px;
border-top:solid 40px #d4456b;
}
.sidebar .widget h2 {
text-align:center;
text-transform: uppercase;
font-family: 'Wire One', sans-serif;
text-shadow:0px 0px 1px #555;
font-size:24px;
width:120px;
color:#333;
background:#fff;
padding:5px;
margin-top:-60px;
margin-left:-20px;
margin-bottom: 20px;
box-shadow:0px 0px 1px #ddd, 0px 1px 1px #d1d1d1;
}
E para mudar a cor da barra (aquela rosa) é só alterar o #d4456b no border-top
Agora pesquise por 
<head>
E cole este código
<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css'/>
Visualize e salve

3 comentários:

  1. Quantos tutoriais ótimos, Byel.
    Adorei
    Adorei o blog e voltarei mais vezes. Aguardo a sua visita. Caso goste de lá e siga, me avise; nós retribuiremos.
    M&N | Desbrava(dores) de livros

    ResponderExcluir
  2. Já alguma vez tinha dito que adoro esse modelo? E que o lay atual do CeC está espetacular? Eu realmente ESTOU APAIXONADA, como é que conseguiu reunir um design de site, uma sidebar tão linda e senhor dos anéis num lay só?!

    Ja nee ^^

    ResponderExcluir
  3. ahhhhhh eu quero MUITO ler esses livros dessa série da Maldição do Tigre :D
    nossa, eu amei esse modelo! sério, ele ficou super criativo, que nem esse blog, esse layout ficou muito diferente de vários que eu já vi!

    já segui aqui, se gostar de meu blog, pode me seguir também? | www.quirky-tree.com | ♥

    ResponderExcluir