Olá meus amores...
Vou dá continuidade aos tutoriais para blogs/blogueiras, hoje trago um tuto bem facil e simples, que é deixar a barra de rolagem na lateral colorida de acordo com o tema/cor do seu layout...
Como o meu blog ai na lateral ^^
Os creditos desse tutorial vai para Cherry Bomb
Inicialmente, clique no botão "Editar HTML" que fica em baixo da miniatura do seu blog, e clique em prosseguir no aviso que aparecer.
Aperte Ctrl+F, procure por ]]></b:skin> e cole antes esse código:
/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background: #ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background-color:#ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/}
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
width:15px; /*Largura da barra de rolagem*/
background: #000000; /*Cor da parte fixa, que fica no mundo*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
}
É isso ai meus amores, podem alterar as cores de acordo com seu gosto, depois é só visualizar, e se estiver tudo certo, salve.Se usarem creditem ♥
Olá meus amores... Saudades imensas de voces!
Depois de um tempinho sem me dedicar ao blog venho hoje com um tutorial bem simples, e que foi pedido por algumas blogueiras. Que é como personalizar os títulos dos gadgets da sidebar.
Bom os creditos desse tuto vai para Cherry Bomby
Inicialmente, no painel do blogger, clique em "Modelo" , depois em "Editar HTML" (obs: nao esqueca de fazer o backup do seu layout).
Aperte Ctrl+F e procure por h2 {
Logo abaixo do trecho que você procurou, vai ter algo parecido com isso (se nunca foi alterado):
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}
Apague toda essa parte e no lugar coloque esse código:
background: url(link_da_imagem) no-repeat center; height: 30px;/*Altura da imagem*/ width: 200px; /*Largura da imagem*/
Oláaa meu povo lindo!!! Nossa, quantas saudades!!! Peço mil desculpas pela ausencia, pois esse periodo de verão aqui na Europa é quando mais trabalhamos... alem disso ainda tenho um fila de layouts para personalizar rs e tambem desenvolvo o projeto Inifity line (aquele de doacoes mutuas - para quem quer ter uma renda extra) e põe extra nisso... 2mil reais no bolso hehe em apenas alguns dias... depois falo mais sobre isso!
Hoje vim trazer um tutorial muito bacana e que deixa o blog com um jeitinho todo especial e diferente, que é o Menu com Imagens em Hover!!!
Veja o exemplo no Blog da Fran Adorno eu mesma personalizei o layout dela.
Quer aprender como faz? Então venha comigo...
Os créditos desse tutorial vai para Go Imagine.
Vá em Design / Layout e em elementos da página adicione um gadget de HTML/JavaScript e cole o seguinte código fazendo as devidas alterações:
- Onde pede "link do seu blog" troque pelo link da página que você desejar.
- No lugar de "URL da imagem normal" é a url da imagem sem passar o mouse e onde pede "repita a URL da imagem normal" é a mesma coisa.
- Já em "URL da imagem no estado hover" coloque a imagem que você quer que apareça ao passar o mouse.
- Se você quiser o menu centralizado é só colocar as tags do começo e do fim, <center> e </center> respectivamente.
Olá meus amores... hoje vim disponibilizar um tutorial de como personalizar a area dos comentarios Modelo2, para quem não viu Clique AQUI e veja o modelo 1.
Os créditos desse tutorial vai para Aline Web Designer
O modelo de hoje como prometido, será esse aí abaixo :
Vou deixar aqui duas observações:
- Por ser um codigo longo será um pouco dificil para uma pessoa leiga no assunto codifica-lo.
- Caso o codigo nao funcione acima da linha do }]]></b:skin> , faça outra tentativa: Ctrl+F e procure por /* Comments selecione todo codigo abaixo dele ate a ultima linha acima de /* Widgets e substitua pelo codigo dessa personalização abaixo:
Olá meus amores, tudo bem?
Algumas das minhas leitoras tem me enviado emails e ate pedidos aqui nos comentarios do blog, solicitando o Tutorial do Menu Fixo sem a caixa de pesquisa (igual esse ai em cima no topo do blog).
O credito desse Tutorial vai para Elaine Gaspareto
É bem simples, mas antes tem que:
- Desativar a Navbar do Layout
- A gadged de "Paginas" tem q esta instalado normalmente abaixo do cabeçalho na estrutura do layout.
Bom entao vamos lá:
Na Opção Modelo, clique em editar HTML e dê CTRL+F e procure por:
/* Tabs e tecle enter para localizar.
Substitua tudo que estiver entre /* Tabs até /* Headings por esse codigo:
Na Opção Modelo, clique em editar HTML e dê CTRL+F e procure por:
/* Tabs e tecle enter para localizar.
Substitua tudo que estiver entre /* Tabs até /* Headings por esse codigo:
Os créditos desse tutorial vai para Elaine Gaspareto.
Então, vamos começar...
Va no painel do blog e clique na aba "Layout", a seguir clique em "Adicionar um gadget", escolha a opçao "HTML/JAVASCRIPT" e na janela que expandir cole o código:
Ola meu povo lindo, tudo bem com vocês?! Bem... como eu estou numa correria danada... vim compartilhar com vocês mais um tutorial para organizar os links do seu blog abaixo do titulo da postagem, como esta na imagem abaixo:
Os créditos vão para Cherry Bomb ♥
Entao, vamos começar:
Primeiro Passo:
Aperte Ctrl+F e procure por: <div class='post-footer-line post-footer-line-1'>
Irá mostrar dois resultados, o que queremos para este tutorial é o primeiro (1 de 2)
Você verá vários códigos depois deste que procurou. Selecione a partir de <div class='post-footer-line post-footer-line-1'> até </div> e apague.
Segundo Passo:
Agora aperte Ctrl+F novamente e procure por: <div class='post-header'>
Novamente teremos dois resultados, mas o que nos interessa é o primeiro.
Abaixo dessa linha que você procurou, cole o seguinte código:
Ola meu povo lindo, hoje vim compartilhar com voces algo que eu acho muito importante para o blog, que sao as assinaturas do autor com imagem, elas são muito importantes para o blog, principalmente se possui colaboradoras, pois assim cada uma recebe o crédito da sua postagem, ficando tudo mais facil.
O credito desse tutorial vai para Menina Nerd ♥
Então vamos começar:
Olá meus amores, hoje eu trago para vocês mais um tutorial de como colocar um Menu Fixo no Topo do Blog, igual ao meu como vocês podem conferir ai no topo...
Sempre quis coloca-lo assim, porem nao sabia como, tentei algumas vezes e dava erro nos link, mas agora funcionou e vou compartilhar com vocês.
Obs: Testei no Modelo Travel
Faça um Backup do seu layout caso alguma coisa dê errado!
Os créditos vão para Place Style
- Vá no Painel do Blogger > Modelo e procure por ]]></b:skin>
- Quando encontrar, cole acima dessa Tag:
Ola meu povo!!!
Hoje trago para vocês mais um tutorial bem simples pois não precisa mexer no html do seu blog...
Sabe aqueles ícones de redes sociais flutuantes? Pois é...
Esse tipo de Gadgets é muito bacana, porque mesmo quando o visitante do seu blog desce toda barra de rolagem os ícones descem junto, sendo sempre visualizado, tendo assim mais chances de ser seguido também pelas redes sociais.
Esse tutorial peguei no site Prodeveloper, fiz apenas algumas alteraçoes deixando apenas os icones do facebook, twitter e Google plus ( pois sao as redes mais usadas) , tirei o tumblr e o Rss... nesse codigo nao tinha o youtube.
Bom entao vamos la...
Acesse o Blogger e vá em "Layout".
Clique em "Adicionar um gadget" e escolha por "HTML/Javascript".
Dentro do conteúdo do gadget, cole o código a seguir:
Oie meninas... depois do sucesso do layout Rosa Cute muitas blogueiras me pediram o código que deixa o perfil da blogueira super organizado e bonito, com a imagem arredondada, com a descrição da blogueira e com os ícones das redes sociais... igual a imagem abaixo:
E logico, não pensei duas vezes e vim correndo ensinar para vocês, antes de mais nada você tem que hospedar sua foto de perfil para obter a URL da imagem, eu utilizo esse site aqui: TinyPic ele é gratuito e bem simples de usar.
Para personalizar seu perfil no blog é muito fácil e não precisa mexer no html do seu blog, basta adicionar o código abaixo em uma caixa Gadget na opção HTML/Java Script: