Underground Fearless ∞ : novembro 2012

Personalizando a data em hover

Vá em Modelo > Editar HTML > Ctrl + F e procure por:

.main-inner h2.date-header {

font: $(date.font);

color: $(date.text.color);

}

Substitua o código acima por esse:

.main-inner h2.date-header {
float: left; /** data no lado esquerdo, pode mudar para right **/
width:55px;/** largura **/
height:55px;/** altura **/
overflow:hidden;
font-size:15px;/** tamanho da fonte **/
color: #fff !important;/** cor da fonte **/
text-align:center;/** alinha o texto **/
margin-bottom: -65px; /** desce **/
margin-left: -80px; /** margem pra esquerda **/
padding: 8px 2px 0px 2px; /** espaço interno: topo, direito, embaixo, esquerdo **/
-webkit-border-radius: 5em; -moz-border-radius: 5em; /** borda redonda **/
background: #xxxxx; /** cor do fundo **/
}
.main-inner h2.date-header:hover {
background: #xxxx; /** cor do fundo hover **/
}

Faça as alterações necessárias e visualize, se estiver tudo certo, salve.

Criando um Lay Simples

Heey bloguiro\Blogueira , vamos criar um lay simples mas que dá uma "base" legal ? Legoo !

1) Vá em Modelo >Personalizar e escolha Viagem, no modelo Travel , o segundo ok ?

2) Vá em Plano de Fundo e clique em remover imagem

3) Vá em Ajustar larguras, e deixe a largura do blog em 980 e a da barra lateral em 350 , esse é o tamanho "normal" de um blog .

4) Vá em Layout e deixe assim:

5) Vá em avançado e em Plano de fundo deixe as duas opções em transparente

6) Vá em Título do blog e na cor transparente

7) Vá em Plano de fundo da postagem e deixe branco

8) Vá em Plano de fundo da Barra lateral, deixe a moldura transparente e edite a cor do plano de fundo como quiser

9) Personalize os links , e baáh .

10) Retirando a "borda" do template :

Pressione Ctrl + F e procure por:

content-outer .content-cap-top {

- Apague o trecho que está em rosa

Isso é o basicão mesmo , então se quizer um lay mais completo , procure mais tutoriais , Espero ter ajudado , até o proximo post (:

Retirando navbar do blog

1) Vá no Painel do Blogger > Modelo > Editar HTML e procure pelo código abaixo:

" <body expr:class='"loading" + data:blog.mobileClass'> "

Se não encontrar, procure por esse:

" <body class='loading'> "

2) Depois de encontrar um dos códigos acima, cole o código abaixo antes dele:

" 
<script type='text/javascript'>
<![CDATA[

]]>
</script>
 "

3) Visualize, se estiver tudo certo, salve!

Primeiro tutorial - Avatar de anony com imagem

Sabe quando um anony comenta e fica sem foto , aquela imagem cinza\azul ?

Então esse tutorial é para colocar uma imagem , aqui estão algumas :

Vamos lá , procure por ]]></b:skin> e colar logo acima:

div.avatar-image-container {background:url(URL_DA_IMAGEM) no-repeat center center; }

div.avatar-image-container img {display:none;}
div.avatar-image-container img.delayLoad {display:block; }

espero ter ajudado ;*

11.11.12

Personalizando a data em hover

Criando um Lay Simples

Retirando navbar do blog

Primeiro tutorial - Avatar de anony com imagem