E chegamos ao 3º tutorial da Série Como personalizar o blog passo a passo.
Já modificamos a estrutura básica do tema-base, personalizamos a área dos posts e hoje vamos trabalhar a sidebar, ou coluna lateral, se preferir.
Vamos também inserir e personalizar alguns gadgets básicos.
Vamos começar?
Acesse a página com os códigos necessários ao tutorial de hoje:
E, como sempre, aperte o play e veja a execução em vídeo de tudo que faremos. Assim fica mais simples entender e fazer junto, né?
Se inscreve no canal, ele serve de apoio aos tutoriais do blog, e assim você não perde os vídeos extras que publicarei apenas lá.
Inscreva-se!
Personalizar títulos e fundo dos gadgets
Assim como fizemos com a área dos posts vamos dividir a sidebar em caixas, e personalizar o título dos gadgets.
Vamos começar acessando a aba Layout do blog onde estamos trabalhando.
Clique em Adicionar um gadget e vá adicionando os seguintes elementos:
- Pesquisa de blogs do Google;
- Arquivo (configure como Menu suspenso);
- Marcadores (configure como Cloud);
- Follow by email;
- Postagens mais visitadas (configure 5 posts, e sem snippets);
Mas para as personalizações que vamos fazer serão esses por enquanto, ok?
Gadgets instalados e posicionados?
Vamos personalizar!
Dividir sidebar em caixas e personalizar os títulos:
Na barra de busca digite /* Widgets e localize.
Selecione até encontrar /* Mobile e substitua todo o trecho selecionado pelo código PERSONALIZAR SIDEBAR E TÍTULOS DOS GADGETS.
Salve.
Você verá que a sidebar está separadinha em caixas, os títulos dos gadgets estão centralizados e com a cor de fundo.
Essa cor de fundo é a mesma que usaremos na cor do menu que vamos inserir em breve.
A personalização dos títulos será aplicada também aos gadgets do footer do template.
Personalizar gadgets básicos nativos do Blogger
Caixa de pesquisa personalizada:
Agora vamos personalizar a caixa de pesquisa nativa do Blogger.
Sem personalizar ela estará assim:
Para personalizar os marcadores acesse esse tutorial:
Arquivo do blog personalizado:
Cole o CÓDIGO ARQUIVO PERSONALIZADO acima de ]]></b:skin> e salve.
Caso prefira outra opção de Arquivo personalizado pode usar este tutorial:
Marcadores em formato de nuvem colorida:
Para conseguir esse efeito eu segui o tutorial abaixo:
Acesse, siga exatamente como explico, personalize cores como desejar e depois de pronto, salve.
Fica legal usar tons contrastantes como está no tutorial, mas também fica fofo usar tons pastéis que combinem entre si, como eu fiz.
Se preferir outra forma de personalizar os marcadores veja esse tutorial:
Follow by email personalizado:
Cole o CÓDIGO PERSONALIZAR SEGUIR POR EMAIL acima de ]]></b:skin> e salve. A seguir localize a linha:
E troque a palavra Submit pela palavra que desejar.
Eu escolhi colocar Assinar agora.
Salve.
Acima dessa linha tem o termo Email adresss...
Substitua por Seu endereço de email, caso deseje.
Salve.
Postagens mais vistas:
Agora vamos personalizar os posts mais vistos.
Há, aqui no blog, uma infinidade de opções.
Veja:
Escolha qual deseja usar, siga exatamente o que explico no tutorial e dará certo.
Para meu blog de testes eu escolhi usar esse modelo:
Créditos do rodapé:
Para inserir os créditos localize, no código-fonte, a linha ]]></b:skin> e acima dela cole o CÓDIGO DOS CRÉDITOS DO RODAPÉ.
A seguir localize </body> e acima dele cole o CÓDIGO HTML CRÉDITOS.
Altere com os créditos conforme deixei marcado no código e salve.
Estamos finalizando por hoje!
Nesse momento nosso template está assim:
No próximo tutorial da Série Como personalizar o blog passo a passo vamos inserir mais gadgets personalizados e importantes, colocar menu, slide e mais algumas coisas legais!
Se você tiver alguma dúvida, sugestão ou pedido para fazer diga nos comentários e eu ajudo assim que possível!
A gente se vê em breve pra continuarmos a série!
Não se atrase, tá?
Amo as suas postagens desde sempre... tenho blog desde 2011 e sempre venho aqui pra tirar minhas dúvidas!! Obrigada, de <3 !
ResponderExcluirBoa noite Elaine
ResponderExcluirEssa série já foi mais tranquila,estou me habituando a mexer nos códigos,um pouco insegura ainda.Achava que seria impossível,só você mesmo para permitir com toda sua calma.
Beijos
Oi Elaine
ResponderExcluirDesculpe,o comentário acima fui eu quem fiz,so q com o e mail do blog de teste.
Beijos
Maria, tudo bem :)
ExcluirFico feliz que esteja conseguindo.
Se sentir dificuldade pare, reveja o vídeo, e udo dará certo :)
bjssss
Bom dia Elaine !! Venho te agradecer e parabenizar pelo seu trabalho, pelo seu desprendimento em ajudar, e saiba que você tem ajudado e muito, a muitas pessoas que sequer conhece, como eu por exemplo, que te sigo a tempos, e estou sempre aqui. Montei meu primeiro blog com a sua ajuda e sempre quis deixar ele responsivo, e com a sua ajuda estou criando meu novo cantinho com todo carinho, e melhor, saber que será responsivo como eu sempre quis !! Desejo de todo coração, que o Universo lhe retribua quintuplamente tudo o que você faz por nós !! Abençoada sejas hoje e sempre !! Tudo certinho no meu até aqui, e ansiosíssima para os próximos tutoriais ! <3
ResponderExcluirLuciana, que comentário mais gostoso de ler!
ExcluirMuito obrigada!
Estamos terminando essa série e em seguida começo a outra, que será bem importante e espero que vá ajudar!
beijossss
Oi Elaine, eu precisava apenas saber em que lugar do código que eu mudo a cor da borda dos gadgets, que é preta e eu precisava que fossem outra cor, já revirei de cabo a rabo e não consigo mudar a cor, socorro !! kkkkkk
ResponderExcluirLuciana, localize no código que personaliza a sidebar essa linha:
Excluirbackground: $(tabs.background.color);
E substitua por:
background: #ffffff;
Sendo que #ffffff é o código de cor, no caso, branco.
Troque ffffff pelo código hexadecimal que preferir.
Ou altere direto no painel, a cor de fundo vai seguir a cor de fundo do menu...
Amanhã sai mais um post da série, falo exatamente do menu...
beijossss
Nossa Elaine, feliz da vida aqui, agora sim tá tudo combinando, está ficando lindiinhoo meu blog !! Gratidão imensaaa por sua ajuda, e nossa, estou aqui na 1ª fila esperando os outros tutoriais, pois estou fazendo o layout todinho com seus tutos, sempre dão certo e não causam conflito. Que o Universo te retribua sempre !! bjos !
ExcluirElaine,percebi que os botões:assinar e pesquisar só aparecem quando passo o mouse,no seu blog eles já estão fixos,roxinho.Pelo que entendi pelo vídeo,eles vão ficar com a cor do menu,quando for colocado.É isso mesmo?Obrigada.
ResponderExcluirBeijos
Sim, isso! Ao instalar o trocar a cor do menu os demais itens seguirão essa cor. O post de hoje mostra isso :)
Excluirbjsssss
Olá Elaine, o mesmo que aconteceu com a Maria F.N. Vechi, acontece comigo, mesmo depois de instalar o menu, os botões de "assinar" não aparecem, somente aparecem qd passa o mouse. Estaria faltando algo no código? Como posso corrigir? Grato.
ResponderExcluirLuiz, precisa alterar as cores no painel.
ExcluirO tutorial mais recente da série explica:
http://www.elainegaspareto.com/2018/02/adicionar-personalizar-recursos-extras.html
A parte que define as cores também pode ser alterada direto no código específico dos botões, basta trocar o comando $(tabs,selected.background) pelo código da cor que desejar.
No painel eu já havia tentado, mas os botões não mudam, mas agora mudei no código e deu certo. Obrigado.
ExcluirElaine, na parte de personalizar a caixa de pesquisa, quando eu coloco o código "personalizar a caixa de pesquisa" abaixo de ]]>, ele não funciona, não muda caixa de pesquisa? Como posso arruma? Desde então obrigado.
ResponderExcluirFreddy, não é abaixo, é acima.
ExcluirE a caixa de busca precisa já estar instalada no blog, ok?
Olá quando eu tento dar ctrl+F para pesquisar e escrevo o nome que você mandou, não aparece nada, o que devo fazer?
ResponderExcluirTente de novo, tente por trechos, por palavra, até conseguir achar...
ExcluirOla boa tarde na parte dos widget o meu está dando erro fiz tudo igual ao seu.
ResponderExcluirYngrid, a melhor dica que posso dar é que vc releia o tutorial, refaça o passo a passo e veja o vídeo; não tem outro modo de fazer, só o que mostrei.
ExcluirTalvez vc tenha esquecido algo...
muito obrigada pelo retorno meu bem percebi que fiz errado kkk
Excluirmeu bem bom dia
Excluirqual serio o código para colocarmos o instagram como link de compartilhamento?
Yngrid, não existe esse código; o IG não aceita links clicáveis, só um na bio... e não existe botão pra compartilhar lá como em outras redes...
ExcluirPrimeiro tutorial que eu tento daqui do blog e não consigo fazer. Quando vou salvar aparece a frase: Invalid variable declaration in page skin: Variable is used but not defined. Input: widget.text.color
ResponderExcluirNão consigo de jeito nenhum. :/
Poderia me ajudar?
Thamires, qual tema-base vc está usando?
ExcluirEstou usando o simples.
ExcluirThamires, esses códigos se aplicam ao tema Viagem, que é a base que estamos usando nessa série...
ExcluirPrimeiro Obrigada! O meu blog está ficando muito bom. Segundo eu não consigo colocar a cor no meu Follow by email, quando passa o mouse aparece acor mais sem passar o mouse fica branco, não consegui achar o lugar onde eu possa colocar a cor. Onde fica?
ResponderExcluirDaiane, entre no código fonte e localize o trecho que comanda esse widget.
ExcluirLá, troque o que estiver em background pelo código hexadecimal da cor que desejar.
Se não me engano o comando esta seguindo a cor do menu...
marcadores n aparecem no sidebar pra mim :/ pode me ajudar? n fiz nada errado segui seus passos mas n aparecem
ResponderExcluirPara que apareçam é preciso que os posts tenham marcadores. Eles tem?
ExcluirOlá, Elaine! Tudo bem?
ResponderExcluirComo eu havia comentado com você, estou usando um de seus templates, o da "Clarissa" e desejo personalizar os outros gadgets além dos citados nesse post, mas não estou achando em nenhum lugar como fazer. Será que você podia dar uma ajuda? Beijos!
https://www.viveraprenderfalar.com.br/
Tudo bem, e você?
ExcluirNo template-modelo tem o link, está assim:
Caso os gadgets precisem de ajustes leia para entender:
http://www.elainegaspareto.com/2018/01/como-corrigir-os-erros-das-heading-tags.html
bjsss
Elaine, do céu, menina, você me salvou a vida! Consegui arrumar o que eu queria !!! Não sei como posso agradecer depois de tanta gentileza! Deus te abençoe sempre!
ExcluirOlá! Estou tentando personalizar meu blog com suas dicas, porém não consegui que os Widgets adicionados modificassem minha caixa lateral. O que eu faço? Além disso, tem uma parte do meu blog que tem um foto gigante minha com a descrição em cima, não consigo tirar, você poderia me ajudar? Desde já, obrigada!
ResponderExcluirHadassa, essa série de tutoriais só se aplica ao tema Viagem.Está usando esse modelo?
ExcluirSe sim não há porque não funcionar, conforme vc pode ver na série...
Elaine, eu estou com uma dúvida importante.
ResponderExcluirPersonalizei meu blog praticamente todo utilizando seus tutoriais (que são maravilhosos!). Aí na hora de colocar os créditos lá no rodapé (com o código que você disponibilizou neste tutorial aqui) coloquei "Personalizado por Emoções à Flor da Pele com base nos tutoriais de Elaine Gaspareto" e deixei o link do seu blog. Está certo desta forma, não é? É que eu fiquei em dúvida em como colocar os créditos no rodapé. Fui eu que personalizei, mas não foi da minha cabeça que tirei nada, foi através das suas aulas, dos seus códigos, das dicas que você deu, então achei muito importante colocar seu nome e o link do seu blog, pois sem os seus tutoriais eu não teria conseguido fazer nada.
Deixo o link do blog (https://www.emocoesaflordapele.com) só para você confirmar para mim se eu fiz tudo certo, se dei os créditos da maneira correta.
Obrigada!
Bjs!
Luna, está certinho.
ExcluirMuito obrigada por manter os créditos dos tutoriais!
beijosss
PS: seu perfil está privado, considere deixa-lo público, ajuda na obtenção de acessos ao blog :)
Muito obrigada, Elaine! Coloquei o perfil como público agora. :)
ResponderExcluirBjs!
Olá, Elaine! Tudo bem? Eu estou tentando personalizar o título e o fundo dos outros gadgets igual aos que você fez no templete Clarissa, mas ainda não consegui. Você poderia me dizer qual código usar para personalizar o título e o fundo de cada gadget separado na sidebar? Como você fez aqui com esses? Agradeço desde já, Aguardo
ResponderExcluirEu queria ter 2 Gadgets na parte debaixo da área dos posts, porém o fundo não fica preto... como faz?
ResponderExcluirComo eu faço para aumentar as caixinhas brancas???
ResponderExcluirQuais caixinhas brancas?
Excluiroii, tudo bem? Eu coloquei o código que muda o arquivo ali do lado, mas o meu não mudou, ele continuo sendo o mesmo. Oq pode ter acontecido?
ResponderExcluirOi Elaine, como vai?
ResponderExcluirMe tira uma dúvida, fui abrir um blog novo e vem a mensagem que o feedburner esta sendo desativado.
Meu template tem um campo para ele, será que dá para reaptoveitar usando o tutorial acima (assinar email).?
Obrigada
Não da pois assinar via e-mail e o serviço que o Feedburner oferecia são coisas distintas.
Excluirbjsss