Tutorial: Aprenda a fazer uma barra de rolagem personalizada para o seu blog

sexta-feira, outubro 25, 2013




~Yoo Galera~

Olá guris e gurias como estão? Espero que estejam bem, e também preparados para a postagem de hoje que é dedicada aos “TUTORIAIS” ...O pedido de hoje é da leitora “Samara Shelda”  do blog “Máxima Beleza” que faz um pedido de tutorial que eu julgo ser bem útil para quem quer deixar o visual mais personalizado e com uma pitada original....


Confiram o pedido dela abaixo:



Para ler a postagem completa click em “Mais Informações” abaixo!





Como puderam notar ela pediu um Tutorial explicando como fazer a barra de rolagem do blog personalizada...Para quem não sabe o que seja supostamente a barra de rolagem é esta aqui:




Para que a sua barrinha de rolagem fique com o estilo personalizado que você deseja basta seguir os passos a seguir:


1º) Click sobre nome do seu Blog;

2°) Após abrir a parte com as opções do seu blog click em “MODELO”;

3º) Após abrir a página click na opção “Fazer Backup/Restaurar”, então quando abrir a janela click em “Fazer download do modelo completo” daí é só esperar seu modelo do blog ser baixado para o seu computador para começarmos com as modificações...Inicialmente essa etapa do tutorial não será usada, porém é de extrema importância que você faça pois caso o resultado final não fique do seu agrado basta você repetir o processo da etapa 1 e depois o processo da etapa 2 trocando o “Fazer download do modelo completo” por “Escolher Arquivo” então você escolherá o que baixou e poderá voltar para o que estava antes sem preocupações ou perturbações.

4º) Após a etapa 3 retorne para “MODELO” (na etapa 2) e click então em “Editar HTML”;

5º) Quando abrir a área com os códigos , dê um simples click dentro da área e aperte as teclas Ctrl + F depois quando abrir a busca cole a seguinte TAG dentro do espaço e dê enter ]]></b:skin>  


þ Caso você não ache de primeira tente então colocar um pedaço da TAG por exemplo assim ]]> , porém quando achar certifique-se que o que você achou completo fique assim  ]]></b:skin>


6º) Quando encontrar cole o seguinte código ACIMA da TAG (pode dar um enter para ter espaço acima caso não tenha) que você encontrou na etapa 5, depois modifique os números antecedidos de “#” (código de cores) pelas cores desejadas (os de cor rosa abaixo)


/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background: #253037; /*Cor da barra que irá se mover*/
border: 1px solid #ffffff; /*Se desejar borda altere colocando cor*/
height:50px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background-color:#253037; /*Cor da barra que irá se mover*/
border: 1px solid #ffffff; /*Se desejar borda altere colocando cor*/
height:10px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
 }
/*** Parte fixa da rolagem (fundo imóvel) ***/
::-webkit-scrollbar {
height:10px;
width:15px; /*Largura que você deseja para sua barra de rolagem*/
 background: #2b2d2f; /*Cor da parte fixa, que fica no mundo*/
border: 1px solid #; /*Se desejar borda altere colocando cor*/
}
                                          

7º) SALVE e prontinho.

.
OBS

Para obter os códigos com as cores para mudar o visual da sua barrinha click AQUI!
                              

PS: Não fui eu que criei este código, apenas modifiquei algumas pequenas coisas para melhor entendimento dos leitores, como não me lembro de onde achei esse código porque esta salvo no computador não coloquei os créditos, porém se foi você que criou me avise que colocarei os devidos créditos, grata!




Bom galera, esta foi a postagem de tutorial de hoje...Espero realmente que tenha sido útil para vocês e que vocês tenham aprovado, qualquer dúvida não deixe de perguntar...Beijocas de Morango em todos!!!




You Might Also Like

64 comentários

  1. Hmmm, essa dica realmente é muito legal, pois não tinha visto ainda... gostei ainda mais da página com os códigos das cores, já é uma grande mão na roda na hora de editar o blog.
    http://duasepocas.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. ÉÉ sim bem útil :D Fico feliz que tenha gostado querida!

      Obrigada por sua visita...Beijocas e volte sempre que puder!

      Excluir
  2. Gostei bastante do tutorial,
    Olha flor primeira vez que vim no seu blog e eu amei ele *_*
    Pois os posts daqui são ótimos belo trabalho você está fazendo!
    Quero convidar você e suas leitoras para conhecerem meu cantinho,
    e se gostarem seguirem, retribuo!
    http://talytaxavier.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico muito feliz que tenha gostado Talyta *--* irei com toda certeza no seu!

      Obrigada por sua visita...Beijocas e volte sempre!

      Excluir
  3. Muito bom, vou tentar...mas o meu não ta aceitando...
    Beijos
    http://meninadivadamodaoficial.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Tenta que você consegue :)

      Obrigada por sua visita...Beijocas e volte sempre!

      Excluir
  4. Adorei a dica! Beijinhos
    http://www.blogpontoevirgula.com/

    ResponderExcluir
    Respostas
    1. Fico muito feliz Gabriela :D

      Obrigada por sua visita e cometário...Beijocas e volte sempre que puder!

      Excluir
  5. Adorei,muito obrigada querida,vou colocar no meu blog ☺ .
    Beijoos.Bye ♥.

    http://mxmbeleza.blogspot.com/

    ResponderExcluir
    Respostas
    1. *---* que bom que gostou Samara!

      Fico realmente feliz !! Obrigada por sua visita e comentário!

      Beijocas e volte sempre que puder :3

      Excluir
  6. Respostas
    1. Muito obrigada guria ^^

      Beijocas e volte sempre :3

      Excluir
  7. Amei o tutorial,
    Sempre achei que html era um bicho de 7 cabeças, você explicou muito bem flor!
    Adorei seu cantinho, queria te convidar tambem para conhecer o meu e se possivel seguir e comentar!
    Muito sucesso, você merece!
    Blog: http://raisaoliveira.blogspot.com.br/
    Fanpage: http://www.facebook.com/blograisaoliveira

    ResponderExcluir
    Respostas
    1. Fico muito feliz que tenha apreciado Raisa! Realmente meu objetivo é facilitar a vida de vocês hahahaha

      Irei sim com toda certeza ao seu cantinho :)

      Beijocas e volte sempre que puder!

      Excluir
  8. Adorei o tuto, barras assim são muito fofas ♥
    Beijinhos
    Instagram
    Facebook do blog
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Verdade *--* da um efeito bem descontraído no blog :D

      Obrigada por sua visita querida e fico feliz que tenha gostado!

      Beijocas e volte sempre que puder!

      Excluir
  9. Hilda,
    Adorei sua dica e amei seu blog como sempre radicalizando e amando aqui.
    Ah! acho que vou fazer a dica que você colocou na sua postagem hoje (Risos).

    Beijos
    http://rodrigobandasoficial.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. hahahaa usa mesmo rodrigo ^^

      Obrigada por sua visita...Beijocas e volte sempre que puder!

      Excluir
  10. Ei Hilda, de nada flor eu amo aqui. Ás veses fico horas e estou muito feliz por seu carinho.
    E pode deixar que se eu precisar coto sim, a mesma forma você conte comigo sempre!
    Parabéns e muito sucesso pois além de uma ótima profissional é dona de um lindo carisma!
    Beijos
    Blog *-* / Fanpage *-*

    ResponderExcluir
    Respostas
    1. Obrigada Rosimara pelo carinho, fico muito grata ^^

      Seu blog também é lindo!

      Obrigada pela visita e espero te ver sempre por aqui :)

      Beijocas! :3

      Excluir
  11. É legal, eu tinha isso no meu blog passado. Gostavam disso e também das estrelinhas saindo do mouse =)

    Hilda, minha leitora *-* venha cá

    pequena-priincesa.blogspot.com

    ResponderExcluir
    Respostas
    1. hahahaha eu gosto desse efeito *-* deixa o blog fofuxo kkkkkkkk estou indo Brenda kkkkk

      Obrigada por sua visita guria :3

      Beijocas e volte sempre que puder!

      Excluir
  12. hilda voce pode fazer um tutorial de como colocar essa imagem grande que tem aí no seu blog em cima do menu é que eu vi o blog de uma pessoa que antes era meu blog favorito (pq eu copiava umas coisitas)em vez de uma imagem só tinha 3 era tipo um slide mas só que bem grande.
    bjs linda

    ResponderExcluir
    Respostas
    1. UhUmm salvei seu pedido em breve ele será feito ^^

      Obrigada por comentar querida.

      Beijocas e volte sempre que puder!

      Excluir
  13. hilda voce sabe como colocar menu css

    ResponderExcluir
    Respostas
    1. Acho que sim ^^ anotei mais este pedido de tutorial kkkkkkkkkk

      Em breve farei ele aqui no blog!

      Obrigada , beijocas e volte sempre que puder querida!

      Excluir
  14. nao intendi
    eu achei o tag e eu tenho que fazer outro tag depois copiar e colar esse codigo que esta nun quadrado

    ResponderExcluir
    Respostas
    1. Sim querida ^^ você acha a TAG e em seguida cola o código acima dela mudando o que deseja ...cores etc...

      Obrigada por sua visita ^^

      Beijocas e volte sempre que puder :3

      Excluir
  15. Ótima dica!
    Adoro seus tutoriais, vc explica direitinho...
    Eu sumi daqui, por que tou sem net flor, ando entrando pelo cel, e é muito lento!
    Mas sempre que der eu venho ver as novidades!

    detudoumpouco28.blogspot.com.br/

    Bjs!

    ResponderExcluir
    Respostas
    1. Compreendo perfeitamente ^^ ultimamente o tempo esta muito corrido

      hahaha

      Obrigada pelo carinho e por suas visitas e comentários querida!

      Beijocas e volte sempre que puder :3

      Excluir
  16. Ooi flor, por favor peço desculpas ja exclui o blog e por peço que retire aquela postagem sobre min até criei um novo blog! Me arrependi do que fiz, por favor! O blog já foi excluído!Se ler me responda!

    ResponderExcluir
    Respostas
    1. Já aceitei suas desculpas mas não posso deletar a postagem porque tem um tutorial integrado e o "poderá também gostar de" ainda ficaria escrito mas editei lá o contexto e avisei do seu arrependimento ^^ fico feliz que tenha mudado . Não precisava ter deletado , apenas apagado o que plagiou .

      Beijocas querida.

      Excluir
  17. Obrigada por esse post, adorei e coloquei no meu blog... Amei mesmo... estou seguindo seu blog. Quando puder dá uma passadinha lá para ver como ficou a barrinha que eu fiz? http://bellaedelicada.blogspot.com.br

    Beijos

    ResponderExcluir
    Respostas
    1. Olá Paulinha *-* fico muito feliz que tenha conseguido te ajudar...Obrigada por comentar e por sua visita querida...Espero te ver mais vezes por aqui!

      Beijocas e volte sempre que puder! Irei agorinha ver sua barrinha :3

      Excluir
  18. Oi flor, citei você la no meu blog pelos créditos da barrinha que ensinou a fazer, depois da uma olhadinha lá? Beijos

    http://bellaedelicada.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Ounw *-* que linda ..Obrigada querida!

      Claro irei agorinha lá!

      Beijocas e volte sempre que puder :3

      Excluir
  19. Fica uma fofura e bem diferenciado :)

    Beijos e, fique com Deus :*
    PHANNY TEEN

    http://leticiac04.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. ÉÉ sim *---* dá um charme todo especial hahaha

      Obrigada por sua visita querida!

      Beijocas e volte sempre que puder :3

      Excluir
  20. Adorei e vou fazer . Bem eu gostaria que você ensinasse a fazer PLAYLIST♫ para colocar no blog tipoh a que você faz a e visite meu blog

    http://mylove4everbr.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi Duda! Desculpe por estar te respondendo somente agora, o blog deu uma pausa e só estou retornando com ele agora. Estou organizando os tutoriais e estudando as possibilidades, em breve novidades. Farei uma visita ao seu blog com prazer. Espero te ver mais vezes por aqui :3

      Excluir
  21. Muito legal sua dica obrigada!
    beijos!!
    http://superdicasdagaby.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi Gabriela, obrigada por comentar, fico feliz que tenha aprovado as dicas. Espero que possa vir mais vezes por aqui :3 desculpe pela demora em te responder, o blog passou por uma temporada fora do ar mas já está de volta. Tentei visitar o seu blog, mas não o encontrei :(

      Excluir
  22. Obrigada e parabéns pela ajuda as suas leitoras.
    se puder siga o meu e chame as amigas. Beijo.

    http://blogdegarotasmimadas.blogspot.com.br/

    ResponderExcluir
  23. Nossa simplesmente amei. Me ajudou muito. Olha como tá lindo:

    http://blogdegarotasmimadas.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi Larissa!!! Obrigada por comentar e por sua visita. Fico muito feliz em poder ter te ajudado a compor o seu blog.Que eu te encontre outras vezes por aqui :3 ... Visitarei o seu com muito prazer :D

      PS: Desculpe pela demora em responder o seu comentário, o blog passou por um hiatus e só voltou agora :/

      Excluir
  24. - comigo naaum funcionou , oqe eu fiz de errado ? :/

    ResponderExcluir
    Respostas
    1. Olá Mayra! obrigada por seu comentário, as vezes é um BUG da plataforma Blogger...Alguns conseguem e outros não, no meu blog até o momento continua funcionando mas testando em outro não funcionou...O mesmo para algumas blogueiras. Tente o procedimento outra vez, muitos conseguiram, talvez você esteja esquecendo alguma etapa ou não colando todo o código...Verifique com calma, não esqueça de fazer o backup. Espero ter te ajudado, desculpe pela demora em responder, o blog passou por um período de hiatus mas já está voltando a ativa :D espero te ver mais vezes por aqui :3

      Excluir
  25. Respostas
    1. Olá, desculpe a demora em te responder...O blog passou por um período longo de pausa, mas já está de volta! Tente com calma, as vezes é um BUG da plataforma blogger ou do seu template. Espero que tenha conseguido. Obrigada por comentar. Espero que possa vir mais vezes por aqui :)

      Excluir
  26. Amei o tutorial. Muito bom (:

    http://batepapodecolega.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Olá Jordana! Obrigada por comentar ^-^ Desculpe pela demora em te responder, o blog estava parado mas já voltou a ativa novamente. Espero te ver mais vezes por aqui. Darei uma passada no seu blog :3

      Excluir
  27. Pffv, Não Sei se Ja Tem Mais , Ensina a Colocar Favicon No Blog , PFV?

    ResponderExcluir
    Respostas
    1. Olá Giovanna :) obrigada por comentar! Desculpe pela demora, mas o blog deu uma pausa um tempo e já está retornando \õ/. Olha, aqui no blog eu já fiz um tutorial sobre isso:

      http://sorriso-jovem.blogspot.com.br/2013/04/como-colocar-icone-representando-seu.html

      Espero que te ajude! Que voce^possa vir e comentar mais vezes :)

      Excluir
  28. Amei seu blog muito lindo, com tutorias ótimos.
    Meu blog ta mais lindo com sua ajudar
    Da uma olhadinha por favor e diz o que acha..
    http://dicas-das-bff.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Olá Analyne! Obrigada pelo seu comentário, fico muito feliz que o blog foi útil para você! Desculpe pela demora em te responder, o blog estava parado mas já está de volta...Visitei o seu blog mas parece que ele também está parado, espero que possa voltar também :3

      Excluir
  29. u.u me ajudou muito visita: http://anndressah.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Olá Andressa! Obrigada por seu comentário e a sua visita! Fico muito feliz que tenha sido útil para você, Dei uma passada no seu blog mas ele não está sendo encontrado :/ Espero que você não tenha parado, só tenha mudado o link. Espero te ver mais vezes por aqui :3

      Excluir
  30. Amei seu blog e tudo que pesquizei em seu blog eu modifiquei o meu ta de parabéns..visite o meu http://tudkins.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Olá Dieise! Obrigada por ter deixado um comentário no meu blog, fico muito feliz em poder te ajudar :D! Desculpe por ter demorado tanto em te responder, mas o blog passou por um período de hiatus e só agora voltei a atualiza-lo. Visitei o seu , mas infelizmente ele não foi encontrado, espero que não tenha parado de blogar. Que você possa aparecer mais por aqui e deixar o novo link, caso o tenha, para que eu visite com prazer. :3

      Excluir
  31. Own, valeu! Há um tempão estava tentando colocar *-*

    http://maahcoala.blogspot.com

    ResponderExcluir
    Respostas
    1. Oie Maila! Obrigada por sua visita, fico feliz que tenha conseguido e que o blog foi útil para você. Desculpe pelo tempo que demorei a te responder, o blog passou por um período de hiatus mas já está de volta. Visitei o seu blog, mas vi que você também pausou o seu, espero que possa voltar logo e me visitar mais vezes :3

      Excluir
  32. Respostas
    1. Oi Maristela, desculpe pela demora em te responder, o blog deu uma loooonga pausa mas já está de volta. Fico feliz de ter de ajudado. Espero que você possa aparecer mais vezes por aqui e deixar o seu comentário :3

      Excluir

~REGRAS PARA COMENTAR~

-Não desrespeite ninguém.
-Não xingue ou use palavras de baixo calão.
-Sempre que puder comente é uma forma de incentivar a trazer sempre novidades.

Related Posts Plugin for WordPress, Blogger...

Subscribe