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á?
31 comentários via Blogger
Dias online
Postagens
comentários
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?
Excluir