Desafixar o cabeçalho do template dinâmico

 DEMO

Eu até acho legal e tals, o template ter o cabeçalho (header) fixa no blog mas também acho que toma espaço quando o leitor começa a ler o blog e sabem o que penso: o leitor é um cliente de seu empreendimento na internet, por isso, ele vem em primeiro lugar entre um layout lindo e o seu conforto (não estou dizendo que o layout tem que ser deixado de lado).
Para resolver este probleminhja nos templates dinâmicos, eis a solução:




Vá até o "Modelo de seu blog", clique em "Personalizar"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Dinâmico, do novo Blogger, implementado em julho de 2011

Ao abrir essa janela, vá em Avançar -------> Adicionar CSS 

Cole no local indicado o código abaixo:

/*Desafixar cabeçalho--------------------------------------------*/
#header .header-drawer.sticky, #header .header-bar, #header .header-drawer{
top: 0px !important;
margin-top: 0px !important;
position: relative !important;
}
body.sidebar #main.hfeed #sidebar{
position: absolute !important;
}

#header{
position: relative !important;
}
#header #views{
position: absolute;
}
#header #pages{
left: 110px
}

»»Leia mais...

Cor de fundo na sidebar do template dinâmico

DEMO

Continuando a série de tutoriais para modificar o template dinâmico do Blogger, aí mais uma dica importante, mudar a cor de fundo da sidebar.

Vá até o "Modelo de seu blog", clique em "Personalizar"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Dinâmico, do novo Blogger, implementado em julho de 2011

Ao abrir essa janela, vá em Avançar -------> Adicionar CSS 

Copie então o código abaixo e cole no local indicado

/*Cor de fundo na sidebar----------------------------------------------*/
body.sidebar #main.hfeed #sidebar .item{
background: #E2653E; /*cor de fundo sidebar*/
}

»»Leia mais...

Modificar cor dos balões dos comentários do template dinâmico

 

Modifique as cores dos balões de comentário no Blogger. Dá pra ter um sim, um template do modelo dinâmico, nativo do Blogger  todo incrementadão, cheio de chinfra e coisetes. Basta ir modificando, colocando com a apar~encia que mais gostar. Dá trabalho, sim dá, mas vale a pena ter um layout pra chamar de seu. :-)

Vá até o "Modelo de seu blog", clique em "Personalizar"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Dinâmico, do novo Blogger, implementado em julho de 2011

Ao abrir essa janela, vá em Avançar -------> Adicionar CSS 

Copie o código abaixo e insira no local indicado

/*Modificações templates e acessorios -----------------------------------------------------*/
.bubble.comments-count{
background-color: #5D4141 !important;/*cor de fundo*/
border-color: #381E1E !important; /*cor borda*/
color: #ffffff !important; /*cor letras*/
}
.bubble .bubble-tail, .bubble.empty .bubble-tail:after, .ss{
border-color: #381E1E transparent transparent !important; /*cor parte inferior balão*/
}

»»Leia mais...

Retirar os links da barra do template dinâmico

Para quem escreveu-me e pediu um tutorial que ensinasse a retirar os links da barra dos modelos dinâmicos, com as inscrições onde o leitor muda a lay do Blogger, eis aqui a dica. É bem fácil de executar a tarefa e acaba aquele lenga-lenga de ficarem achando que nosso blog é brinquedo. #prontoFalei !


Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por: ]]></b:skin>  

Acima dele, cole o código abaixo:

#Classic.ss, #views ul li:first-child ,
#Flipcard.ss, #views ul li:nth-child(2),
#Magazine.ss, #views ul li:nth-child(3),
#Mosaic.ss, #views ul li:nth-child(4),
#Sidebar.ss, #views ul li:nth-child(5),
#Snapsnot.ss, #views ul li:nth-child(6),
#Timeslide.ss, #views ul li:nth-child(7)
{
display: none !important;
}

Salve e pronto !

»»Leia mais...

Mudar ícones no menu lateral do template dinâmico

Querendo seu template dinâmico todo personalizado devemos também modificar o menu lateral modificando não só a cor de fundo mas também os ícones. Para isso é necessário atenção pois, a maneira que disponibilizei o código os widgets terão que seguir uma ordem, e será necessário te-los em seu blog, a não ser que você modifique o código.

Veja a ordem dos widgets

Vá até o "Modelo de seu blog", clique em "Personalizar"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Dinâmico, do novo Blogger, implementado em julho de 2011

Ao abrir essa janela, vá em Avançar -------> Adicionar CSS 

Copie e cole este código abaixo, depois clique em "Aplicar ao blog"

/*Icones sidebar --------------------------*/
.ss, #gadget-dock>div:nth-of-type(1) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(2) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(3) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(4) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(5) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(6) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(7) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(8) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(9) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(10) .gadget-icons img
{
display: none !important;
}

#gadget-dock>div:nth-of-type(1) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS7mLXmwOKtM3EOM465dBfPnfKNbxOzFyKvkZCmM0FagpJExg7kta_GWUxHGBqb-GYtCTWkEHNNrtWD7AEbv3hdH56LpVNd4WdNnV5ZmA3kllsoGnv5CAPQwD_LTlDa4AY5bVn_lYzVm5a/s1600/User.png) no-repeat center !important; /*perfil*/
}

#gadget-dock>div:nth-of-type(2) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNFBMvZrselC509SrbRotrU7NVL48ouP2dWdel0_k32lXRDrUFFG5rYs0MQuIHZBQhq71-bnxChlbHTZ4JrkJZ_VX1cvOWJP7Pr58iY_fGXMV69rcmC4C28PrT9V6X5oMz5N2_ld1CGX3X/s1600/Bookmarks+2.png) no-repeat center !important; /*marcadores*/
}

#gadget-dock>div:nth-of-type(3) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtPE0p4WJoNCNlcO16MgyLav90l4RcWIt3Ss6d3lnhiJ20QWrj8fhYY6mm01fyQI9wkCqjqoR0zNTC_lNJjSQJcP9CSrPGRleVIgadzMXqJJFhdVWwdeLWlMetFQRPegdN2nuaFQeu9IOB/s1600/Link.png) no-repeat center !important; /*blogs favoritos*/
}


#gadget-dock>div:nth-of-type(4) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOScs7U3qtgxuKFtWhd6S1Smyste0q5hCQhYmoIdWU7bsEHihuyswYd2sWXrd1qvyGIrSh9HymlwrUGDVGc9RWnzoMEGCyQeSJ8no0VZbBt_XjrI_vrFlYyYNIOcbYHVIFBM4zSHt9VjPZ/s1600/Button+Load.png) no-repeat center !important; /*seguidores*/
}
#gadget-dock>div:nth-of-type(5) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxfnoFDd2wqcH5kDRdM6b4P4xfd62RMq550YJqGitB9H7M9H3gUu37JvgglDtlP579bcSEK-3LOyFPEBPDiAWTDEcSlLhvVAmyAmKm52Jrd7GSbB8Rbp89TieqweF2d5WCubShUqsbII5q/s1600/Magic+Wand.png) no-repeat center !important; /*tradutor*/
}

#gadget-dock>div:nth-of-type(6) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNWQKGTKTfw-SIPbLClWJuLDjMeNT37BMcHiaojYVdlm8OSdskhk3roWr9RJehpWISnEKWpBbJKGGd1PcjAfFr14kz1s1EGveVRktnPw5sGD5n16fSX-Erkq22CKDMFaRRrWpPtuP0lMrG/s1600/32x32.png) no-repeat center !important; /*google plus*/
}

#gadget-dock>div:nth-of-type(7) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrLtWnzicHyYTiSUypNLCJiuKTFN7T5l1RSLUnKvWODLyu1j8q4_vMBE05a_iBgrkrvRpZjQzovbsk9iU03w8N3vEH9CH4tQ412ua4ICqa8FFl4V5mOAEt2unpiL2sbDLWO7hjC_zxiRVg/s1600/Drawer+Closed.png) no-repeat center !important; /*arquivo*/
}


#gadget-dock>div:nth-of-type(8) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimuuHAfYcyzZcxRc9WnFS3dBzj_qRBHytK7NRGkNDcM68AWlwHiR5A1ipsIUgNiFUjmYsaEtocqRQfEK_cMprSVfs69KPJGQTSlS2eXZ8YrZD8vMUZjbdcPgoEj6HlF8yQ-E_RiCRgsZTl/s1600/News+Add.png) no-repeat center !important; /*links favoritos*/
}

#gadget-dock>div:nth-of-type(9) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxXMdJJH2gXfFo4L3xb7J12DMNG9aEMMRa4FDD924bPllxAuswafKkT8Hdq_1wCd23UvLMcfAR2BvoFNyELBXaVDV-k2XoWS0wF1TNpQqCxNL-QIRecCMMILFdx0gHujrBmaJegmPxXi4M/s1600/025.ico) no-repeat center !important; /*feed*/
}

#gadget-dock>div:nth-of-type(10) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisz2FFXHLiJTRFA4OrvkLzaKGEYM7Abrlna4to1crmZjEreE2EVVnIFxeXaa7UM8qVrAjMN4Jxq7Up5vsd0ylur5Fp2t7DRKpPEhA0BlUNnpt3Xq8i3QIv9KIuytZ2JeHleu6-QKGH8KBU/s1600/Document+2+Edit.png) no-repeat center !important; /*increva-se*/
}

»»Leia mais...

Colocar imagem de fundo ou cor nos posts dos templates dinâmicos

DEMO

É possível colocar uma imagem de fundo ou uma cor na área de postagem do blog para quem usa o template dinâmico, com muita facilidade, acompanhe as explicações...


Vá até o "Modelo de seu blog", clique em "Personalizar"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Dinâmico, do novo Blogger, implementado em julho de 2011

Ao abrir essa janela, vá em Avançar -------> Adicionar CSS 

Copie e cole este código abaixo, depois clique em "Aplicar ao blog"


Para colocar imagem de fundo no post (mude o código em azul para o endereço da imagem escolhida. Aprenda aqui a conseguir endereço de imagens)

/*Fundo posts com imagem ------------------------------------------*/

#items li, .article, .overview-wrap, .overview-inner, #content, .item.hentry.selected,  .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content  {
background:  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-YxSGcoVYgOB41Eb7fUs_cpJeY0I0Um6XPEjIC5WFyMAw9YSxG_P-f1ilXFD_QUgX04YHCzduVciJbQEl3trBL14fARM05L1QN3BobSKKkmtyc89PJjbRV9eD8hhpzHQhc3GFTjrKiAT/s1600/BVS+beautiful+paper04.jpg') repeat  !important;
}

.items.hfeed{
background: transparent !important;
}

Para modificar cor do post (mude o código em azul para a cor escolhida. Aqui, tabela de cores)

/*Fundo posts com cor ------------------------------------------*/

#items li, .article, .overview-wrap, .overview-inner, #content, .item.hentry.selected,  .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content  {
background: #cc0000  !important;
}

.items.hfeed{
background: transparent !important;
}

»»Leia mais...

Imagem no cabeçalho do template dinâmico

Coloque sua logo ou qualquer outra imagem na header de seu template dinâmico, assim você ficará de fato com um template exclusivo além de deixa-los esteticamente mais profissional. Veja aqui as modificações que fiz em um destes templates.


Vá até o "Modelo de seu blog", clique em "Personalizar"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Dinâmico, do novo Blogger, implementado em julho de 2011

Ao abrir essa janela, vá em Avançar -------> Adicionar CSS 

Copie e cole este código abaixo, colocando no local indicado o endereço de sua imagem (em azul),  depois clique em "Aplicar ao blog" (se quiser que o título de seu blog apareça, apague a parte que está em vermelho)

#header .header-drawer.sticky, #header .header-drawer  {
top: 134px;
}

#header.header .title a h1, #header.header .title h3{
display: none;}


#header-container #header.header .header-bar span.title{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwIPJ6cao2xzcqMQID5fD0sMUxf3Lux3qoJnSssMSme-XHg9pgJGFh04NrLML3josbPBT0TQw0_hg_Tc3_XHxWvnOGA8t7Zq8e_NE80vrlbYO0ESG1d9ZCfa8jopSh9pn1soPyiWq8OHI8/s1600/1.png)
no-repeat center;
margin-left: auto !important;
margin-right: auto !important;
height: 165px;
}


#header .header-bar{
height: 165px;
}
 
#header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
top: 165px;
}
 
#header-container {
height: 205px;
}
 
.viewitem-panel .viewitem-inner {
top: 100px;
padding-bottom: 120px !important;
height: auto !important;
}
 

»»Leia mais...

Remover imagem de carregamento do template dinâmico

Eu não sei o que você acha deste ícone de carregamento (loading) que vem nativo nos templates dinâmicos do Blogger,  eu acho tétrico. É tão amador, tão feio que depõem contra todo o resto do layout. Quando abro um blog e vejo essa imagem a vontade que tenho é de fecha-lo imediatamente, por isso, #peloamordeDeus, retire essa aberração de seu blog, caso use o template dinâmico.

Vá até o "Modelo de seu blog", clique em "Personalizar"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Dinâmico, do novo Blogger, implementado em julho de 2011

Ao abrir essa janela, vá em Avançar -------> Adicionar CSS 

Copie e cole este código abaixo, depois clique em "Aplicar ao blog"

.ss,.blogger-gear{
display: none;
}

»»Leia mais...

Mudar cor do menu no template dinâmico

É possível modificar ainda o menu lateral do template dinãmico, nativo do Blogger, para isso siga as instruções.


Vá até o "Modelo de seu blog", clique em "Personalizar"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Dinâmico, do novo Blogger, implementado em julho de 2011

Ao abrir a janela abaixo, siga as instruções da imagem

Copie o código abaixo e cole  no local indicado, clicando depois em "Aplicar ao blog"

.gadget-icons, .gadget-title, .gadget-content, #gadget-dock, .gadget-menu, .ss{
background: #A71992 !important;
color: #fff !important;
}

»»Leia mais...

Colocar menu lateral a esquerda no template dinâmico

Vá até o "Modelo de seu blog", clique em "Personalizar"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Dinâmico, do novo Blogger, implementado em julho de 2011

Agora clique em "Avançado ----------------->  Adiconar CSS

Copie o código abaixo e cole no local indicado. Depois clique em Aplicar ao blog.

.gadget-container {
-moz-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
-webkit-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
-ms-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
-o-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
margin-right: 100% !important;
right: -100px !important;
left: 0px !important;
}
.gadget-container:hover, .gadget-item.ss:hover, .gadget-item:hover .gadget-container, .gadget-selected .gadget-container {
right: auto !important;
}
#gadget-dock:hover, #gadget-dock.gadget-notifying, #gadget-dock.gadget-opening{
left: 0px !important;
}
#gadget-dock {
-moz-transition: left 0.15s ease-in-out 0s;
-webkit-transition: left 0.15s ease-in-out 0s;
-ms-transition: left 0.15s ease-in-out 0s;
-o-transition: left 0.15s ease-in-out 0s;
left: -40px;
}

Leia aqui como deixar o menu visível permanentemente 

»»Leia mais...

Menu lateral visível permanentemente no template dinâmico

É possível deixar o menu lateral dos templates dinâmicos do Blogger para facilitar a navegação do visitante de seu blog. Para isso proceda da seguinte forma:


Vá até o "Modelo de seu blog", clique em "Personalizar"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Dinãmico, do novo Blogger, implementado em julho de 2011

Abrirá uma janela como essa abaixo.

Clique em "Avançado" -----------> "adicionar CSS"  e depois cole o seguinte código:

#gadget-dock{

position: fixed !important;

right: 0px !important;

}

Se você fez a modificação do menu e ele está a esquerda, o código então é este abaixo:


#gadget-dock{

position: fixed !important;

left: 0px !important;

}

»»Leia mais...

Imagem de fundo e cor se repetindo nos templates dinâmicos Blogger

Para quem usa os templates dinâmicos do Blogger, como este AQUI, ao instalar determinadas imagens de fundo do próprio Blogger, encontra um problema: a imagem fica apenas em parte do template e a cor de fundo não harmoniza com o resto do blog. Para mudar isso é necessário fazer uma pequena alteração em seu código, entrando no editor HTML do blog.



Vá até o "Modelo" de seu blog, clique em "Editar HTML"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Dinâmico, do novo Blogger, implementado em julho de 2011

Abrirá uma janela como essa abaixo.




Para repetir a imagem de fundo

Procure por:

 no-repeat  

Substiua-o por:

repeat

Salve e pronto



Para modificar a cor de fundo

Dependendo do modelo de imagem de fundo que você escolher, ocorre que o fundo do template ficará com uma imagem e depois uma outra cor que poderá não combinar nada com seu blog. Para modificar isso, proceda da seguinte forma:

Procure por:


#e0e0e0

e troque pelo código da cor de sua preferência

Cores aqui

»»Leia mais...