12 novembro 2013
Como personalizar a data do blog
Oi gente, hoje eu vou postar um tutorial de como personalizar a data do seu blog.
É bem simples, no seu blog você vai em Configurações> Idioma e Formatação> e marca a penúltima opção.
Pra quem não entendeu tenho essas imagens do Cherry Bomb:
Marque a penúltima opção:
Agora você tem que editar o HTML do seu blog, vá em Editar HTML>Proseguir, depois marque a caixinha "Expandir modelos de widget".
Aperte CTRL+F no seu teclado e procure por </head>
Abaixo de </head> cole o seguinte código:
<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>";
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>";
anio = "<div class='fecha_anio'>"+da[2]+"</div>";
document.write(dia+mes+anio);
}
</script>
Depois procure pela primeira linho do seguinte código:
<b:if cond='data:post.dateHeader'><h2 class='date-header'><span><data:post.dateHeader/></span></h2></b:if>
Logo abaixo desse código cole o seguinte:
<a expr:name='data:post.id'/>
Vai ficar assim:
Logo depois procure pelo seguinte código:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Talvez você encontre mais de um, então substitua todos que encontrar por esse:
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
Pra terminar você procura por ]]></b:skin> e logo acima dele você cola o seguinte código:
#fecha {
color: #464646; /*Edite a cor da data*/
padding-top: 5px; /*Margem interna superior da data*/
padding-right: 5px; /*Margem interna direira da data*/
padding-left: 5px; /*Margem interna esquerda da data*/
padding-bottom: 5px; /*Margem interna inferior da data*/
margin-right: -0px; /*Margem externa direita */
margin-left: -0px; /*Margem externa esquerda*/
float:left;
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
background: url('URL AQUI') no-repeat; /*Imagem de fundo*/
height: 30px; /*Altura da imagem*/
width: 30px; /*Largura da imagem*/
}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px; /*Altura da Linha*/
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:9px; /*Altura da Linha*/
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:8px; /*Altura da Linha*/
display:block;
}
Agora você pode alterar o que quiser. Aumente os valores de margin destacados no início do código para alinhar a data onde você quiser. Onde tem URL AQUI, você coloca o URL da imagem
Aqui tem umas imagens, más você pode usar a sua própria.
Créditos: THE PARADISE
Como remover o fundo cinza da sidebar modelo viagem
Bom pessoal, depois do tutorial de como remover o fundo cinza do corpo do blogger no modelo viagem, agora vamos remover também das barras laterais, tanto para quem usa na esquerda ou na direita dependendo do layout de cada um.
Muita gente procura este tutorial, pois a maioria só ensina como remover o fundo cinza que fica no corpo do blog e acaba ficando nos gadgets laterais este fundo horrível, veja na imagem acima.
Vamos lá:
1- Como sempre, antes de editar o seu código, faça um backup para ter problemas depois;
2- Entre no blog, modelo, editar html e pressione CTRL + F;
3- Para remover o fundo da lado direito, procure por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
4- Para remover o fundo do lado esquerdo procure por:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
5- Depois de achar esta parte do código você vai remover esta parte do código, depois da palavra background:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-left: $(content.padding);
background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
Tanto faz do lado direito como do lado esquerdo, o código será o mesmo.
Clique em visualizar, se deu tudo certo, salve e pronto.
Créditos: Blog Com a Gente
Como retirar o fundo cinza do modelo Viagem do Blogger
Entre no blogger, vá em modelo, editar html;
Você verá uma tela como esta abaixo:
"Atenção: este é o código de todo o seu blog, qualquer linha ou vírgula que você alterar ou apagar errado, pode comprometer totalmente o seu blog, por isso é altamente recomendado que você faça um backup do arquivo xml antes de aplicar alterações aqui"
Aperte CRTL + F para abrir uma caixa de pesquisa no seu navegador e procure por estas linhas:
content-outer .content-cap-top {
Você vai encontrar um texo parecido com este abaixo:
.content-outer .content-cap-top { height: $(content.imageBorder.top.space); background: transparent $(content.imageBorder.top) repeat-x scroll top center;}
.content-outer { margin: 0 auto; padding-top: $(content.margin);}
.content-inner { background: $(content.background); background-position: left -$(content.imageBorder.top.space); background-color: $(content.background.color); padding: $(content.padding);}
.main-inner .date-outer { margin-bottom: 2em;}
.content-outer { margin: 0 auto; padding-top: $(content.margin);}
.content-inner { background: $(content.background); background-position: left -$(content.imageBorder.top.space); background-color: $(content.background.color); padding: $(content.padding);}
.main-inner .date-outer { margin-bottom: 2em;}
Apague somente a parte que está em vermelho, preste bastante atenção para não remover as vírgulas!
Clique em visualizar, veja se tudo ocorreu como deve e salve! Qualquer dúvida moçada, postem aqui nos comentários. Até a Próxima!
Créditos: Blog Com a Gente
Assinar:
Postagens (Atom)
Encomendas
