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!!!
64 comentários
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.
ResponderExcluirhttp://duasepocas.blogspot.com.br/
ÉÉ sim bem útil :D Fico feliz que tenha gostado querida!
ExcluirObrigada por sua visita...Beijocas e volte sempre que puder!
Gostei bastante do tutorial,
ResponderExcluirOlha 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/
Fico muito feliz que tenha gostado Talyta *--* irei com toda certeza no seu!
ExcluirObrigada por sua visita...Beijocas e volte sempre!
Muito bom, vou tentar...mas o meu não ta aceitando...
ResponderExcluirBeijos
http://meninadivadamodaoficial.blogspot.com.br/
Tenta que você consegue :)
ExcluirObrigada por sua visita...Beijocas e volte sempre!
Adorei a dica! Beijinhos
ResponderExcluirhttp://www.blogpontoevirgula.com/
Fico muito feliz Gabriela :D
ExcluirObrigada por sua visita e cometário...Beijocas e volte sempre que puder!
Adorei,muito obrigada querida,vou colocar no meu blog ☺ .
ResponderExcluirBeijoos.Bye ♥.
http://mxmbeleza.blogspot.com/
*---* que bom que gostou Samara!
ExcluirFico realmente feliz !! Obrigada por sua visita e comentário!
Beijocas e volte sempre que puder :3
Ótimo tutorial!
ResponderExcluirBeijos.
* Blog Sem Fronteiras
* Fan Page
Muito obrigada guria ^^
ExcluirBeijocas e volte sempre :3
Amei o tutorial,
ResponderExcluirSempre 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
Fico muito feliz que tenha apreciado Raisa! Realmente meu objetivo é facilitar a vida de vocês hahahaha
ExcluirIrei sim com toda certeza ao seu cantinho :)
Beijocas e volte sempre que puder!
Adorei o tuto, barras assim são muito fofas ♥
ResponderExcluirBeijinhos
Instagram
Facebook do blog
conversando-com-a-lua.blogspot.com.br
Verdade *--* da um efeito bem descontraído no blog :D
ExcluirObrigada por sua visita querida e fico feliz que tenha gostado!
Beijocas e volte sempre que puder!
Hilda,
ResponderExcluirAdorei 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/
hahahaa usa mesmo rodrigo ^^
ExcluirObrigada por sua visita...Beijocas e volte sempre que puder!
Ei Hilda, de nada flor eu amo aqui. Ás veses fico horas e estou muito feliz por seu carinho.
ResponderExcluirE 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 *-*
Obrigada Rosimara pelo carinho, fico muito grata ^^
ExcluirSeu blog também é lindo!
Obrigada pela visita e espero te ver sempre por aqui :)
Beijocas! :3
É legal, eu tinha isso no meu blog passado. Gostavam disso e também das estrelinhas saindo do mouse =)
ResponderExcluirHilda, minha leitora *-* venha cá
pequena-priincesa.blogspot.com
hahahaha eu gosto desse efeito *-* deixa o blog fofuxo kkkkkkkk estou indo Brenda kkkkk
ExcluirObrigada por sua visita guria :3
Beijocas e volte sempre que puder!
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.
ResponderExcluirbjs linda
UhUmm salvei seu pedido em breve ele será feito ^^
ExcluirObrigada por comentar querida.
Beijocas e volte sempre que puder!
hilda voce sabe como colocar menu css
ResponderExcluirAcho que sim ^^ anotei mais este pedido de tutorial kkkkkkkkkk
ExcluirEm breve farei ele aqui no blog!
Obrigada , beijocas e volte sempre que puder querida!
nao intendi
ResponderExcluireu achei o tag e eu tenho que fazer outro tag depois copiar e colar esse codigo que esta nun quadrado
Sim querida ^^ você acha a TAG e em seguida cola o código acima dela mudando o que deseja ...cores etc...
ExcluirObrigada por sua visita ^^
Beijocas e volte sempre que puder :3
Ótima dica!
ResponderExcluirAdoro 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!
Compreendo perfeitamente ^^ ultimamente o tempo esta muito corrido
Excluirhahaha
Obrigada pelo carinho e por suas visitas e comentários querida!
Beijocas e volte sempre que puder :3
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!
ResponderExcluirJá 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 .
ExcluirBeijocas querida.
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
ResponderExcluirBeijos
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!
ExcluirBeijocas e volte sempre que puder! Irei agorinha ver sua barrinha :3
Oi flor, citei você la no meu blog pelos créditos da barrinha que ensinou a fazer, depois da uma olhadinha lá? Beijos
ResponderExcluirhttp://bellaedelicada.blogspot.com.br
Ounw *-* que linda ..Obrigada querida!
ExcluirClaro irei agorinha lá!
Beijocas e volte sempre que puder :3
Fica uma fofura e bem diferenciado :)
ResponderExcluirBeijos e, fique com Deus :*
PHANNY TEEN
http://leticiac04.blogspot.com.br/
ÉÉ sim *---* dá um charme todo especial hahaha
ExcluirObrigada por sua visita querida!
Beijocas e volte sempre que puder :3
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
ResponderExcluirhttp://mylove4everbr.blogspot.com.br/
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
ExcluirMuito legal sua dica obrigada!
ResponderExcluirbeijos!!
http://superdicasdagaby.blogspot.com.br/
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 :(
ExcluirObrigada e parabéns pela ajuda as suas leitoras.
ResponderExcluirse puder siga o meu e chame as amigas. Beijo.
http://blogdegarotasmimadas.blogspot.com.br/
*--------------*
ExcluirNossa simplesmente amei. Me ajudou muito. Olha como tá lindo:
ResponderExcluirhttp://blogdegarotasmimadas.blogspot.com.br/
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
ExcluirPS: Desculpe pela demora em responder o seu comentário, o blog passou por um hiatus e só voltou agora :/
- comigo naaum funcionou , oqe eu fiz de errado ? :/
ResponderExcluirOlá 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
Excluirpoxa tentei 2 vezes e nao consegui: (
ResponderExcluirOlá, 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 :)
ExcluirAmei o tutorial. Muito bom (:
ResponderExcluirhttp://batepapodecolega.blogspot.com.br/
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
ExcluirPffv, Não Sei se Ja Tem Mais , Ensina a Colocar Favicon No Blog , PFV?
ResponderExcluirOlá 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:
Excluirhttp://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 :)
Amei seu blog muito lindo, com tutorias ótimos.
ResponderExcluirMeu blog ta mais lindo com sua ajudar
Da uma olhadinha por favor e diz o que acha..
http://dicas-das-bff.blogspot.com.br/
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
Excluiru.u me ajudou muito visita: http://anndressah.blogspot.com.br/
ResponderExcluirOlá 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
ExcluirAmei 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/
ResponderExcluirOlá 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
ExcluirOwn, valeu! Há um tempão estava tentando colocar *-*
ResponderExcluirhttp://maahcoala.blogspot.com
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
ExcluirObrigada me ajudou mt amr!
ResponderExcluirOi 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.