Meu Blog de Códigos

Visitante troca as cores de fundo do blog, outras maneiras.

Buscar por: Trocar cor do Blog, Mudar cor do Blog

É só copiar o modelo de sua preferência e cole no HTML/Javascript.

Este modelo

<div style="text-align:center;">Troque a cor do blog</div><br /><center>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjksU2bsy63-hSmK-aPu5NBx0yV3dtnA-9eK-bfySvnsucRf_n8yHB-Kz8LHSb7S1Re1XAjePcPCZxbzdXksdk2JJvn3skjSmx01GHjynXsB6clWoeIgQ3jOuBNBVHLtSQRtx_Lzc0mRM9J/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYcDK4BkJJxbX79f9iHuydJarHVJOTWkSWlo2ZsbOJVtb6k-maWcGuDjyrGtRFJDFye5VDQ8lR8ARAC4IfPcgDujE6Rt69AWqfUvdqxvLnJ19jsm7d-m52HtoM8gLH84zS_k_x43it_IcX/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE52kLzv_EHaQ3i6YUCU0KXoj_fn7cNlkz70k2B0vN88VhxAlWgIkwbHu1t7L2PUuH4KTgAknlPOCUzarwqZhYwZoQu7-lIG6LAykeg0jPeifSBlTeEULKvydtdwGcvy4kRVtpMhNWM0LF/s200/body-verde.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimfYWcHMmPz7Mat33Tk4LKgGHYMZcCRrM9mfNUGToTf1Se9wcq_vVuIXrPGvQqd-f9bVofF-AXvfKL9xfxPafIIUJhEfXpZpxoyQ7RaMN7IyadRdFNzYF5_u-uUe7CzcOEWn43rjjhZw5B/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOc6f45gx-KpYtJaed-GFxXlfOeMJISQQt9SdZs1px49_AregIUvCFfIncoCEC5AZ7mdKFB6PUnU92BTkmP08Xx1FxH-dEYe3oIPpeiLN66EaCVJ_mHid4dLrTprSy6irTSuvaqasKKWL-/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg18cLgmyG-DKV4e_LL4WPjmErN2FiYZIDfZbXZZaYWrFDiWgsi66rpgQakq6xteeRQTrazVxofNPE_PDQrLvhXJMWkn4P-88td9ovjc8tzF0Kw46swhqS14VhPXaYhhSjO8fPpnVe6dXvD/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE0RKleL2dMWb1l3bjY2mu5UagDE7ASNgr9AdZcRtRlQ-6DeLmiFRG25hP3HK8k_RTyWu-3O71oqiFkPah60Ct6Fxorq5oHeG7nSrkZrGNH3SqK8RYqDdMwUvo_pr-Rbj-w_ZZqOA6rEkk/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU8gwDpPrhT46S5vc68Ze6YbViF01Hm7ZDxV0nqXdytT8he09cr3caEqV0zfG2d60sJe0On5zRsNKzSMeCiLC2PVcww03p4Vc05reJmLdAIwxnxjvSUXd8nu_yPcMwTDwlpXbZ_FBwsCJk/s200/body-blanco.png" /></a>
</center>

Este modelo

Troque a cor de fundo

<div style="text-align:center;">Troque a cor do blog</div><br /><center>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';">Roxo</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';">Amarelo</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';">Verde</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';">Azul</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';">Marrom</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';">Rosa</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';">Preto</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';">Branco</a>
</center>

Qualquer duvida é só perguntar !

via: templates & acessórios

Leia Mais ►

Personalizando a Data do seu Post

Buscar por: Mudar formato de data, Data das Postagens

Para a data do seu post ficar como está aqui no "Sou Nerd BR", siga os passos descritos neste post.

» Essas configurações demandam algum conhecimento em códigos HTML e CSS.
PORTANTO:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Baixar modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

1º- Passo:

Clique em Configurações » Idioma e formatação » Altere o formato da data

► Em Formato da Data escolha o formato:06 Novembro 2012

Veja as imagens:

►Clique em Salvar configuração

2º- Passo:

Vá em Modelo » Editar HTML

► Encontre a linha:

</head>

Cole ABAIXO desta linha o código:

<!-- JavaScript Personalizando a Data do Post-->
<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>
<!-- Fim JavaScript Personalizando a Data do Post-->

Salve seu template clicando em Salvar modelo

3º- Passo:

Marque a caixinha Expandir modelos de widgets.

» Antes você vai colocar a data ao lado do título do post.

Encontre e selecione estas linhas abaixo:(Selecione as primeiras que aparecerem)

 <b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Cole estas linhas abaixo da linha:

<a expr:name='data:post.id'/>

(Se esta linha aparecer 2 vezes coloque abaixo da primeira que aparecer quando procurar com o Ctrl+F)

» Agora você vai configurar a data para o formato vertical.

Substitua a linha:

<h2 class='date-header'><data:post.dateHeader/></h2>

Obs: Se código acima estiver desta forma: <h2 class='date-header'><span><data:post.dateHeader/></span></h2> você pode substituí-lo sem problema.

Pelo código abaixo:

<div id='fecha'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='fecha'>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
<script>remplaza_fecha(ultimaFecha);</script>
</div>

OBS: As datas vão se repetir em todos os posts com este código.

4º Passo:

Para configurar a imagem ou bloco da data copie este código CSS abaixo e cole acima da tag: ]]></b:skin>

#fecha {
color: #464646; /*Edite a cor da data*/
padding: 0px 0px 0px 0px; /*Altere as margens internas da data*/
margin-right:5px; /*Margem externa direita*/
float:left;/*Localizado à esquerda do Título- Se quiser do outro lado (direito) mude left para right*/
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
background: url('AQUI O ENDEREÇO DE SUA IMAGEM') no-repeat;
}
.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;
}

Configurando o CSS da Data:

Onde está AQUI O ENDEREÇO DA SUA IMAGEM você pode colocar a imagem de uma folha de calendário, por exemplo.
Aqui são alguns links de onde encontrar as imagens de folhas de calendário:
Link 1
Link 2
Se você precisar colocar cores diferentes para o dia, mês ou ano acrescente a linha:color: código hexadecimal; /*Edite a cor da data*/ nos blocos de códigos correspondentes para o dia, mês e ano e apague do #fecha.
Veja: Como identificar cores
Preste atenção para os blocos de códigos [.post h3{] e [.post h3 a, .post h3 a:visited, .post h3 strong { ] caso o título do seu post fique acima da data configure os comandos margin e padding destes blocos de códigos para que tudo fique alinhado.

♦Mas como fazer isso? Altere e vá visualizando os resultados.

Dica: Experimente em .post h3{ inserir a linha: margin-left:35px;

Qualquer duvida é só perguntar !

via: Templates para você

Leia Mais ►

Barra de Rolagem Colorida !

Buscar por: Imagem da Barra, Mudar Barra de Roalgem

O tutorial é bem fácil, vamos lá:

1. Vá em Design, depois em Editar HTML, dê Ctrl+F e procure por:

]]></b:skin>

2. E ANTES dele, cole:

*{
scrollbar-face-color:#FF0000;
scrollbar-highlight-color:#FF0000;
scrollbar-3dlight-color:#343434;
scrollbar-darkshadow-color:#343434;
scrollbar-shadow-color:#FF0000;
scrollbar-arrow-color:#343434;
scrollbar-track-color:#343434;
}

::-webkit-scrollbar {width: 12px; height: 4px; background:#343434; }
::-webkit-scrollbar-thumb { background: #FF0000; }

Visualize, se estiver tudo certinho, salve.

Observação: Os códigos destacados em vermelho representam a cor da barra, e os destacados em verde representa a cor de fundo. Se quiser, você pode mudar as cores, basta substituir os códigos destacados. Essa tabela tem várias cores. Não funciona no Firefox.

Qualquer duvida é só perguntar

via: menina nerd

Leia Mais ►

Como colocar assinatura com imagem no final dos posts

Buscar por: Assinatura, Imagem no final das postagens

Exemplo de assinatura de posts com imagem:

1º Faça sua assinatura e hospede-a no Imageshack ou em qualquer outro site;

2º Vá em Design, depois em Editar HTML e marque a caixinha "expandir modelos de widgets";

3º Agora dê Ctrl+F e procure por:

Se for só você que posta no blog, cole logo acima dele o seguinte código:

Coloque a url da sua imagem na parte destacada do código. Depois visualize, se aparecer tudo certinho, salve.

Se mais autores postam no blog, o código é esse:

</b:if>

<b:if cond='data:post.author == "ESCREVA_AQUI_O_NOME_DO_AUTOR2"'>

</b:if></div>

Faça as alterações nas partes destacadas. Depois visualize, se aparecer tudo certinho, salve.

Alguma dúvida? Qualquer coisa é só perguntar.

via: menina nerd

Leia Mais ►

Como inserir caixa de comentários do Facebook no Blogger

Buscar por: Caixa de Comentário Facebook, Facebook, Comentário Facebook

1) Modelo > Editar HTML > Prosseguir > Expandir modelos de Widget
2) Procura o </head> , abaixo dele vai tá abrindo o body
3) Cola logo abaixo do <body> antes de tudo que vier

ps: no meu caso não tinha apenas a tag <body> tinha <body expr:class='"loading" + data:blog.mobileClass'> mas o que importa é que estava abrindo o body (colar o código abaixo exatamente após)

<div id="fb-root"></div>

<script>(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

_______________________________________________________

4) Em qualquer lugar que quiser os comentários seja no footer header ou whatever do post cola

<div class="fb-comments" data-href="data:post.url" data-num-posts="10" data-width="470"></div>

_______________________________________________________

5) se desse jeito não deu certo, cola (esse que deu certo pra mim)

<div class="fb-comments" expr:data-href="data:post.url" data-num-posts="10" data-width="470"></div>

e Voilá vai estar funcionando sua caixa de comentários do facebook o problema que você pode encontrar é que a caixa pode estar em todos os posts da sua home, para resolver esse problema tem um hack que eu usei que deu muito certo que em resumo fica assim.

<b:if cond='data:blog.pageType == "item"'>

<div class='fb-comments' data-num-posts='10' data-width='600' expr:data-href='data:post.url'/>

</b:if>

Esse código você SUBSTITUI pelo de cima que funcionou, lembrando que o número em vermelho é o comprimento da caixa de comentário você pode aumentar ou diminuir dependendo do seu template.

O meu resolvi colocar o código acima logo depois de <div class='post-footer'>, que deu o resultado...

Qualquer duvidá é só perguntar !

via: cabo do cubo

Leia Mais ►

Como alterar a cor do plano de fundo das postagem do Blog

Buscar por: Alterando Plano de fundo das postagens "Cor", Cor de Plano de fundo

Bom, Primeiro vocês vão no Painel de edição do seu blog: Em Modelo >> depois emEditar HTML >> e Prosseguir.
Estando no HTML do seu blog marque a opção "Expandir Modelo de Widgets", agora pressione as teclas Ctrl + F do seu teclado para pesquisar esse seguinte Tag:
.post {

Ao localizar o Tag, logo abaixo dele você vai acrescentar esse código:
background: #FFFFFF;

A parte que esta destacada em cor Azul você vai alterar pela cor que queira colocar no plano de fundo do blog.

E se o seu Template for um modelo diferente e não tem o Tag ".post{" Procure por esse outro código:
/* Posts

Quando encontrar acrescente esse código acime dele:

.post {
background: #FF8C00;
}

Prontinho pessoal agora é só clicar em Visualizar blog e conferir se está tudo certo, depois é só salvar.

via: Várias dicas para blog

Leia Mais ►

Fundo de papel nas postagens

Buscar por: Fundo de papel nas postagens, papel no fundo das postagens

Tutorial Corrigido!

Agora vai ficar certinho com as letras ;)

Consegui um tempinho e vim aqui postar para vocês esse tuto tão pedido. Hoje eu vou ensinar como colocar como plano de fundo da área de postagens, uma textura de papel, parecida com a que eu uso. O resultado final será assim:

Vamos começar? Então abra seu HTML. Aperte ctrl+F e procure por:

.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}

Procure pela primeira linha para facilitar. Quando achar, apague todo o código e coloque esse no lugar:

.main-inner .column-center-outer {
background: url(URL da imagem) repeat-Y;
}

Agora é substituir pela url da imagem que você quiser.
Aqui que entra a correção. Vocês viram que quando coloca a imagem, a letra do post fica por cima da beirada do papel não é? Para resolver isso, aperte ctrl+F e procure por: .main-inner .column-center-inner {
Substitua o trecho:

padding: $(content.posts.padding) 0;

por esse código abaixo:

padding: 10px 10px 10px 20px;

Você pode ter que alterar o valor em roxo de acordo com a imagem que você usar.

Abaixo tem duas imagens que você podem usar, uma menor e outra maior (para blogs mais largos). Clique nas imagens para salvar do tamanho normal e usar.

Espero que tenham gostado do tuto, e se usarem tanto as imagens como o tutorial, creditem!
Cherries, vocês votaram na enquete e a maioria que a twitcam, então eu vou fazer. Agora vou pedir só pra vocês me darem sugestões do que pode ser feito ou falado lá ok?

Todo mundo tá falando de um blog que está plagiando vários blogs, mas tudo o que eu tenho a dizer é que aquela pessoa é uma hipócrita, pouco inteligente e com sérios problemas, ou pelo menos está fingindo ter. Quero pedir pra vocês pararem de visitar e de comentar lá, porque é isso que ela quer. Esse plágio que ela está fazendo, ao meu ver não é prejudicial porque todo mundo sabe que é plágio e que não foi ela quem fez.

Se a gente parar de dar atenção e divulgar o link dela, ela vai cansar rapidinho e vai deletar aquilo. Talvez eu fale mais sobre o assunto na twitcam, se vocês quiserem.
Obrigada pelo carinho e consideração de vocês.

via: cherry

Leia Mais ►