Como Personalizar cada Gadget da Sidebar separadamente | Quero Dicas | Tutoriais para seu blogs


Como Personalizar cada Gadget da Sidebar separadamente


No tutorial anterior, eu ensinei, uma das maneiras de Como personalizar a sidebar do blogger.
Hoje vamos aprender: Como Personalizar cada Gadget da Sidebar separadamente, seja ela com imagens ou por cores.
Quer mudar somente o fundo para cada Gadget? Mude
Quer mudar cada títulos separadamente? Mude

Vamos direto ao tutorial

     Mudando o fundo





1 - Faça um backup do seu template. Não sabe fazer um backup? Não tem problema, clique aqui e aprenda.

2 - Acesse o html no seu blog. Tecle Ctrl + F e procure pelo nome do Gadget que quer modificá-lo.
Exemplo:

3 - Cada Gadget tem um nome, como já percebeu, e para cada nome há uma Identificação (ID).
É este "ID" que queremos, para modificar o fundo de cada um. Copie o ID do seu Gadget e cole em um bloco de notas para não perder.
A minha é: " Gadget1 "


4 - Ainda no html, procure por:

 ]]></b:skin> 


5 - Acima dela cole:

 
#Gadget1 {
background: #D3D3D3;
} 


 

Agora, substitua "Gadget1" pelo ID do seu gadget. Tenha cuidado para não retirar "#" e troque "#7FFFD4" pela cor de acordo com sua preferência
Tabela de cores - ufpa.br

Caso queira colocar uma imagem.

1 - Veja a largura e o tamanho do seu Gadget. Crie e hospede sua imagem na Web.
Não sabe hospedá-la? Não tem problema, veja alguns desses posts:
► Como hospedar uma imagem gratuitamente na Web para seu blog
Como hospedar suas imagens no seu próprio blog

2 - Ao invés de usar o código anterior para adicionar somente a cor, cole o código abaixo no mesmo lugar.

 
#Gadget1 {
background:url('SUA IMAGEM') repeat;
} 

 

O procedimento é o mesmo. Troque "Gadget1", pelo seu ID e onde está escrito "SUA IMAGEM", cole a Url da sua imagem hospedada.


    Personalizando o título

1 - Entre no html do seu blog. Procure o ID relacionada para o Gadget que você quer modificar (como na imagem acima). Copie e cole no bloco de notas para não perder.

2 - Procure o código

 ]]></b:skin> 
 

3 - Acima dela cole o código disponível abaixo:

#Gadget1 h2 {background-repeat: no-repeat;
background: #53868B; /* cor de fundo dos títulos */



 

Troque "Gadget1" pelo seu ID, lembrando, tenha cuidado para não retirar "#" e troque "#53868B" pela cor de sua preferência.

Você fará este procedimento para cara Gadget. Sempre colando o ID no local indicado e trocando suas cores ou a imagem.
Tabela de cores - Flextool

Espero que tenha ajudado. Beijinhos
Me Contrate!

9 comentários

Clique e deixe seu comentários
quarta-feira, 05 agosto, 2015 ×

O que exatamente não deu? =(

Resposta
avatar
admin
segunda-feira, 14 setembro, 2015 ×

Olá Layza.
Eu sempre recomendo fazer backup caso, dê algum erro em seu template, afinal, você ira mexer no html do blog.
O backup é sua segurança.

Resposta
avatar
admin
segunda-feira, 14 setembro, 2015 ×

oi eu tentei fiz so que tipo num lado que tem os gadget no fundo que tem uma foto minha e coisas escritas no fundo ficou preto e so lá no outro lado a esquerda ne olhando para o pc ficou normal....

Resposta
avatar
admin
terça-feira, 15 setembro, 2015 ×

Layza, bom dia.
Desculpe minha amada mais, não entendi nada! :(
Mande um print pro meu e-mail contatosbiabarros@hotmail.com e vejo o que esta acontecendo e quem sabe, informando, poderei ajudá-la

Resposta
avatar
admin
domingo, 04 outubro, 2015 ×

Não consegui achar o cógido ]]>
No meu aparece outras coisas

Resposta
avatar
admin
terça-feira, 06 outubro, 2015 ×

como faço uma cx. de cadastramento de email tipo a sua pra cadastra email

Resposta
avatar
admin
terça-feira, 06 outubro, 2015 ×

Vou fazer uma postagem esta semana sobre ela e dai você poderá pegar o código. ok?
Beijinhos ♥

Resposta
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.