01/06/12

Tutorial - Posts e gadgets separados


Oi, a maioria das pessoas sabe separar os posts e os gadgets por html. Mas eu descobri um código no Candylland onde podemos separar isso só adicionando um novo "html/javascript" Eu peguei o código base desse blog mas personalizei à minha maneira. Os códigos, além de separarem os posts/gadgets também tem personalizações como fontes personalizadas, bordas arredondadas...

Para separar os gadgets

Vai ao esquema do blog, e escolhe um novo gadget "html/javascript"
Depois, cola este código lá :

<style>
/**Separação de sidebar by Cat Girl **/
.sidebar .widget {
width:100% !important;
background:#fff;
margin:10px 0 !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
overflow:hidden
}

.sidebar .widget h2 {
background:#fee /** COR DO FUNDO DO TITULO **/;
color:#f9b /** COR DO TITULO **/;
font-size:17px /** TAMANHO DO TITULO **/;
margin-top:-10px;
margin-left:-10px;
margin-bottom:10px;
padding:5px;
width:107%;
overflow:hidden
}
/** FIM DA SIDEBAR BY Cat Girl **/
</style>

Não retires os créditos

Para separar posts

Faz a mesma coisa, com este código :

<style>
/** Cat Girl POSTS DIVIDIDOS **/

@font-face {font-family:'Salsa';font-weight:400;src:url('http://themes.googleusercontent.com/static/fonts/salsa/v3/A4KcPjUX7Ams2Jqasy0vzQ.woff') format('woff')}

.main-inner .column-center-outer {
background:transparent none !important;
_background-image: none;
}

/** post **/
.date-outer{
background:#fff;
margin-bottom:25px; /* espaço entre os posts */
padding:15px !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

/** título do post **/
h3.post-title a, h3.post-title{
font: normal 25px Salsa; /** fonte **/
color: #f9b !important; /** cor **/
margin-left:5px !important;
}

/** Posts dividos por Cat Girl**/
</style>



P.S- Quando separares os gadgets, vai ao designer de modelos - fundo da barra lateral - deixa transparente.

Podes personalizar as cores e tudo o que quiseres. As instruções já lá estão.
Gostaste ?
Este tutorial foi pedido por 2 leitoras há algum tempo... se quiseres pede um também :)

16 comentários:

  1. Hooy eu adorei o tutorial e queria perguntar se vovê pode ensinar como fez esse gadget "extras"
    beijão
    caandydream.tk

    ResponderEliminar
  2. de novo,ou o gadget status,estou louca para aprender...

    ResponderEliminar
  3. Você é Portuguesa, fala tão bonitinho.. *--*
    beijoos

    http://euemeujardimsecreto.blogspot.com.br/

    ResponderEliminar
  4. Tutorial perfeitooo *OO*
    Obrigada por retirar e desculpe a encrenca toda por causa de uma imagem, mais é só pra não ficar igual! Beijos.
    Garota do Olhar Sincero || Face do blog

    ResponderEliminar
  5. Exelente e útil o tutorial muito bom!
    http://ladyalen.blogspot.com

    ResponderEliminar
  6. Que perfeito *0*
    É muito melhor do que mexer no HTML, sério, você faz coisas perfeitas *0*
    Seguindo com certeza, mas com a conta do twitter, pois o do blogger está bugada :s

    Beijos :* ~> http://gatinhomustache.blogspot.com/

    ResponderEliminar
  7. Obrigado, funcionou perfeitamente!

    ResponderEliminar
  8. Oi estava dendo seu blog e queria saber como você colocou o cabeçalho como um plano de fundo e ainda um plano de fundo em todo o blog (esse cinza). Como você fez isso?

    ResponderEliminar
    Respostas
    1. Coloquei um plano de fundo normalmente (modelo > personalizar). O cabeçalho é png, ou seja é transparente, é por isso que fica "por cima" do plano de fundo. Espero ter ajudado :)

      Eliminar
    2. Oi sim ajudou, mas que tamanho de cabeçalho, quer dizer plano de fundo você usou para cobri todo o blog? O que você fez para ficar no blog todo!

      E mais uma pergunta, você sabe como colocar um background diferente em cada marcador do blog?

      Eliminar
    3. O cabeçalho é 950x300, acho eu. Quando o plano de fundo é colocado fica a cobrir o blog todo automaticamente.

      Não sei, desculpe :(

      Eliminar
  9. Me ajudou bastante, seu blog é tão perfeito que os modelos de gadget vieram até com faixinhas :D . Obrigada!

    ResponderEliminar
  10. Desculpa atrapalhar.. Mais a muito tempo, eu tava querendo e procurando Tutoriais de como colocar uma data tipo a sua. Pode ajudar? Se não puder, obrigada assim mesmo :D

    ResponderEliminar
  11. Eu simplesmente amo o Blog e nada aqui da errado

    Liinda :)

    ResponderEliminar

-Não coloques o link do teu blog para ele não ser excluído. Retribuo mesmo que deixes só "Cat Girl".

-Comentários do género "Seguindo, segue de volta", "Adoro seu blog", "Novo concurso..." não serão respondidos.

-Fala alguma coisa sobre o post, senão não retribuo.

-Aceito críticas construtivas, nada de palavrões ou coisas do género.

Beatriz


Layout by Beatriz D. ~ Cat Girl | Proibido cópias