Tutoriais do blog / Parte 1

Ooolá!
Como vocês queriam saber das coisinhas que mudei no meu blog.
Estou criando esse post! 
Essas coisinhas vão ficar do mesmo jeitinho como no meu blog.
Acompanhem..

Cabeçalho.. 

Antes eu estava com outro desenho no cabeçalho, mais aí mudei..
Saiba como criar seu cabeçalho no post Mudei meu template!
Fundo do Gadget..

Aquele meu fundo rosa
Copie o código abaixo e cole em HTML JavaScript:

<style>
/*Títulos dos gadgets personalizados by Cat Girl*/
.sidebar h2 {
font-family: monotype corsiva; /* Fonte */
font-style: italic; /* Estilo da fonte, pode mudar para italic */
font-size: 16px; /* Tamanho da fonte */
text-align: center; /* Alinhamento do texto pode mudar para center ou right */
color: #FFFFFF; /*Cor da fonte*/
background:  #FF69B4; /* Cor do fundo */
padding-left: 12px;
margin-bottom: 5px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
/*Fim dos títulos dos gadgets personalizados, não retire créditos*/
}
</style>

Você pode mudar a fonte, o formato da letra, tamanho,
no centro ou lados.. enfim. ;)
Marcadores com Duas Fileiras..

Coloquei o título CATEGORIAS.
Primeiro seu gadget marcadores deverá estar marcado em LISTA
Depois vá no seu Html
(Modelo / Editar Html)
Aperte Ctrl+F e cole esse código  ]]></b:skin>
Em cima desse código, cole o código abaixo:

/* Marcadores personalizados - goimagines.blogspot.com */ 
#Label1 ul li{ 
float: left;
width: 45%;
font-family: 'Dosis', sans-serif; /* fonte, se preferir troque */
font-size: 14px; /*tam. da fonte*/
background: #fff; /*fundo*/
border-bottom: 2px solid #ccc; /* borda de baixo do marcador */
margin: 5px;
font-weight: normal;
list-style-type:none;
}
#Label1 ul li:hover{ 
background: #EAEAEA; /*fundo hover*/
border-bottom: 2px solid #FF51A8; /* borda de baixo do marcador hover */
}

Prontinho! Esse tuto está no blog Go Imagine
Créditos a ela! hehee
Data do Blog..


Vá no seu Html..
Aperte Ctrl+F e procure por </head>
Abaixo desse código cole:

<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 linha desse código:

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

 Abaixo, cole esse outro código:

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

Procure por:

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

Você irá encontrar mais de um, então substitua todos por esse código:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div> 

Por último, procure por ]]></b:skin>
Acima, cole:

#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;
}

Cole a URL da imagem que você desenho para sua data.
     

Créditos ao blog Simplesmente

         
Centralizar Título da Postagem..


No seu Html procure por:

/* Posts
----------------------------------------------- */

E abaixo, cole:


h3.post-title {

text-align: center;

E prontinho! É só salvar.


Como esse post ficou enoooooorme, eu dividi ele..
Veja a Parte 2 dessa postagem aquiiiii


Facebook      Instagram   ღ   Twitter      YouTube

8 comentários:

  1. Seus tutoriais sõa bem simples e explicativos, tem uns que a gnt acaba se confundindo mais e mais... adorando as dicas e aprendendo muito aqui...
    Tem um selo de premiação pra vc lá no meu blog, da uma psaadinha lá depois..beijoss
    http://aesperadeumaprincesaheloise.blogspot.com/2014/09/selo-de-premiacao.html

    ResponderExcluir
    Respostas
    1. Obrigada Camila! Adorei receber seu selo de Premiação!
      Muito Obrigada mesmo! Bjs :*

      Excluir
  2. oi eu queria colocar o tutorial do fundo dos gadgets, mais não estou conseguindo achar HTML JavaScript, como faço?

    ResponderExcluir
    Respostas
    1. Olá Alana, o HTML/JS vc encontra Em Layout-> aii clica em Adicionar um Gadget -> e procure por Html/JavaScript... esta escrito em amarelo. e cole o código na caixa maior do JavaS. :)
      espero ter explicado claramente. :*

      Excluir
  3. Adorei as dicas! =) Beijo
    http://blognathalialaurindo.blogspot.com.br

    ResponderExcluir