ttnovo: Personalizar blog

Mostrando postagens com marcador Personalizar blog. Mostrar todas as postagens

16 de abril de 2015

Tutorial - Perfil do autor abaixo da postagem

abril 16, 2015 Por Géssica Marques 14 Comentários

Olá pessoal! Depois de um bom tempo sem trazer tutoriais cá estou! Não sei repararam, mas antes todos os meus posts tinham o meu perfil abaixo da postagem, mas agora não tem como para vocês verem, pois eu retirei, mas ficará assim:

Caso queira aprender a colocar isso no seu blog continue lendo.

E todos os créditos vão para o blog Reino Kawaii!

Primeiramente, aperte Ctrl+F e procure pela seguinte tag: ]]></b:skin>

Antes dela cole o seguinte código:

/**************perfil do autor*******/
@import url(http://fonts.googleapis.com/css?family=Lobster+Two);
.aboutme{
float: left;
padding: 15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff; /** cor do texto**/
width: 670px;
background: rgb(255, 210, 210);
margin: 0 10px 5px 0;
border: 1px solid #FFABAB;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
text-shadow: 1px 1px #FFABAB;
position: relative;
}
.aboutme:before {
content: "";
position: absolute;
bottom: -5px;
left: -1px;
width: 6px;
height: 5px;
background: #FFABAB; /**** cor do fundo***/
border-left: 1px solid #FFABAB;
border-right: 1px solid #FFABAB;
box-shadow: 0px 1px 1px #FFABAB;
}
.afoto{
width: 100px;
float: left;
padding: 0;
border-radius: 100%;
border: 1px solid;
margin: 0px 5px -5px 0px;
}
.tituloo{
font-family: 'Lobster Two', cursive; /**fonte**/
font-size: 28px; /**tamanho da fonte**/
margin: -140px 140px 0px 0px;
text-align: center; /***alinhamento do texto**/
}
/*********fim do perfil do autor******/

Após isso procure pelas seguintes tags:

<div class='post-footer'>

<div class='post-footer-line post-footer-line-3'/>

E antes, cole o seguinte código:

<b:if cond='data:blog.pageType == "item"'>
<div class="aboutme">
<p><img class='afoto' src="URL-DA-SUA-FOTO"/><span class='tituloo'>Postado por vc</span> Escreve, escreve, escreve.</p>
<p>Escreve, escreve, escreve.</p>
</div></b:if>

Prontinho!! Agora é só salvar e ver se está tudo certo! Qualquer dúvida, comente!!
Até a próxima! E caso queiram ver algum tutorial aqui é só comentar que tentarei trazer!

Continue lendo

10 de março de 2015

Personalizar blog Seleção colorida

Tutorial: Seleção colorida

março 10, 2015 Por Géssica Marques 2 Comentários

Hey galerinha! Hoje eu venho lhes trazer um tutorial de como personalizar a seleção do blogger. Vocês poderão colocar a cor da seleção de sua preferência.

Irá ficar assim:

Imagem ilustrativa

Clique em leia mais para poder ver o tutorial.

Bom, antes de começarmos faça um backup do seu blog, pois as vezes pode dar problema, e é sempre bom ter um backup.

Agora, você deverá procurar pela seguinte tag:

]]></b:skin>

E antes desta tag você deve colar o seguinte código:

/*--- Selecao Colorida ---*/
::-moz-selection {
background:#45BCFC; /*Cor do fundo*/
color:#333333; /*Cor da fonte*/
}
::selection {
background:#45BCFC;/*Cor do fundo*/
color:#333333; /*Cor da fonte*/
}
/*---Fim da seleção colorida---*/

Os códigos não são os mesmo da cor do meu, este ai eu mudei para azul. Os códigos se repetem, tá?

Deixem seus comentários!

Continue lendo

9 de março de 2015

Personalizar barra de rolagem Personalizar blog

Personalizar a barra de rolagem do Blogger

março 09, 2015 Por Géssica Marques 2 Comentários

Olá gente. Outro tutorial, mas desta vez é do blog SSD Layout. Todos os créditos são de lá. Estou apenas reblogando.

E lembrem-se: antes de fazer qualquer alteração no seu HTML faça um backup!

Vocês já repararam na minha barra de rolagem? Se não, olhe para ela. Diferente, né? Quer personalizar? Então clique em leia mais e veja o tutorial.

O resultado será este, mas você poderá alterar as duas cores.

É essa rosa com fundo preto

Vá em Modelo>Editar HTML e procure pela seguinte tag:

]]></b:skin>

E antes desta tag cole o seguinte 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*/
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:#ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:10px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
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*/
}

/***Fim da barra de rolagem***/

Mude o que achar necessário. Na frente do códio está explicando o que ele faz. Só altere os outros se souber o que está fazendo. Os códigos das cores vocês poderão ver AQUI.

Não esqueçam de deixar suas opiniões.

Continue lendo

8 de março de 2015

Personalizar blog Personalizar o Gadget do Tradutor do Google

Personalizar o Gadget do Tradutor do Google

março 08, 2015 Por Géssica Marques 0 Comentários

Hey galerinha linda! Trazendo mais um tutorial para vocês, e desta vez é para personalizar aquele Gadget do Google Tradutor.

E novamente, este tutorial veio do blog Reino Kawaii. Credite ela! Estou reblogando da minha forma. Clique em Leia mais para ver o tutorial.

Ele irá ficar assim, ou da cor que você quiser:

Primeiramente, você deverá colocar o Gadget do Google tradutor do seu blog. Vá em Layout>Adicionar Gadget e siga as instruções a seguir:

Coloque o título que quiser, mas deixe o Estilo em vertical! Feito isso vá em Modelo>Editar HTML e procure pelo seguinte código:

]]></b:skin>

E cole o seguinte código antes desta que você localizou:

/*****Personalizar tradutor*****/
.Translate .goog-te-gadget {/*texto com creditos ao google*/
margin: 4px 40px;/*posicionar*/
font-family: 'Delius Swash Caps', cursive;/*tipo de fonte*/
font-size: 12px;/*tamanho da fonte*/
color: #09BCCC;/*cor do texto*/
white-space: nowrap;
}
.Translate .goog-te-gadget a:link.goog-logo-link {/*personaliza o link*/
font-size: 12px;/*tamanho do texto*/
font-weight: bold;/*negrito*/
color: #D46D6D;/*cor do texto*/
text-decoration: none;
}
.goog-te-gadget .goog-te-combo {
margin: 4px 10px;/*posiciona a caixinha de selecione o idioma*/
}
.goog-te-gadget .goog-te-combo {/*personaliza o texto selecione o idioma*/
color: #fff;/*cor do texto*/
font-family: 'Delius Swash Caps', cursive;/*tipo da fonte*/
font-size: 14px;/*tamanho do texto*/
text-align: center;/*alinhamento*/
background: #FFAEB9;/*cor do plano de fundo*/
border-radius: 10%;/*borda arredondada*/
border: none;/*sem borda*/
text-shadow: 1px 2px 3px #a1a1a1;/*sombra do texto*/
padding: 1px;
}
/****fim do tradutor****/

Se o seu tradutor ficar muito para a direita ou esquerda altere o seguinte valor que es´ta destacado: margin: 4px 40px. Para as cores você poderá verificar os códigos neste site.

O código está explicativo, altere os valores que julgar necessário.

Alterado tudo, salve e visualize.

Pronto! Seu Tradutor do Google está personalizado! Deixem comentários!

Continue lendo

Baixar ícones de redes sociais Botões compartilhar personalizado

Personalizar botões compartilhar + site para baixar ícones

março 08, 2015 Por Géssica Marques 10 Comentários

Olá pessoal! Estou trazendo mais um tutorial para vocês! Sabe aqueles botões de compartilhar que ficam abaixo do post? Então, irei ensiná-los a personalizá-los! Lembrando que eu estou usando o modelo Viagem (Travel).

Este tutorial eu vi no Reino Kawaii e funcionou, tanto até que uso aqui no blog. É este aqui:

São os botões de Facebook, Twitter, e Google+

Clique em Leia mais para ver o tutorial ~>

Primeiramente, salve um backup do seu template, depois você já deverá ter escolhido os ícones para colocar, não é mesmo? Mas onde você poderá encontrar este ícones. Você poderá baixar alguns ícones que eu coloquei NESTA postagem, ou acessar o site SoftIcons que só tem ícones. Na barra de pesquisa você colocar o nome da Rede social, por exemplo, que você quer procurar. Você digita "Facebook" e irá aparecer um monte de ícones do facebook e você irá escolher o de sua preferência.

Eu sugiro que baixe o tamanho 32x32px, os outros tamanhos são muito grandes.

Agora que você tem o ícone, o que resta é implementá-lo no seu blog, não é mesmo?

Vá em Modelo>Editar HTML. Clique dentro do quadro do HTML e aperte Ctrl+F. Na caixinha de busca que aparecer, você irá procurar o seguinte código:

<div class='post-footer-line post-footer-line-3'/>

Se você não conseguir encontrar este código acima, procure assim:

post-footer-line-3

O meu por algum motivo, eu só acho se eu digitar o código acima. Bom, depois de ter achado o código, você irá colar abaixo dele, o seguinte código:

<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-FACEBOOK' title='Facebook'/></a>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-TWITTER' title='Twitter'/>
</a> <a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-GOOGLE' title='G+'/></a>

No site que passei para vocês, ele dará a opção de baixar o ícone, então hospede-o em algum site. Pode até hospedar em um blog de testes mesmo.

Com o código acima, os botão irão ficar do lado direito, assim:

Mas se você quiser que os botões fique centralizado, então coloque o seguinte código:

<center> /****depois de share buttons no início***/

</center> /****antes de share buttons no final***/

Salve e visualize se está tudo correto. E pronto! Seu botão compartilhar está personalizado. Ah, eu não sei os links das outras redes sociais, então se alguém souber e quiser me passar eu agradeço.

Não esqueçam de comentar!

Continue lendo

7 de março de 2015

Baixar ícones de redes sociais Perfil do Autor no Gadget

Tutorial - Perfil do autor no Gadget + ícones de redes sociais

março 07, 2015 Por Géssica Marques 0 Comentários

Não resisti em colocar a imagem do Gancho de Once Upon a Time

Hello People! Tudo bem? Eu sim! Bom, como eu havia dito antes, estarei postando aqui tutoriais para que vocês personalizem o blog de vocês para ficarem lindos!

Este tutorial eu encontrei no Reino Kawaii. Então os devidos créditos são deles. E estarei postando aqui como vocês deverão fazer para ficar com o perfil do autor no gadget, assim como o meu.

Clique em Leia mais para saber!

O resultado será este aqui:

Gostaram? Então veja os passos de como colocar isto no seu blog. Vá em Layout>Adicionar Gadget>HTML/JavaScript e cole o seguinte código:

style>
.otitulo {/* texto welcome */
color: #C0F6F6;/* cor do texto */
font-family: 'Rouge Script', cursive;/* tipo de fonte */
font-size: 55px;/* tamanho da fonte */
text-shadow: 1px 2px 3px #1CD4D5;/* sombra do texto */
text-align: center;/* centralizado */
padding: 40px;/* posiciona o texto */
}
.afoto {/* foto do perfil */
border-radius: 50% 50% 50% 50%;/* arredondar bordas */
max-width: 300px; /* largura maxima */
height: auto;/* altura */
}
.otexto {/* descricao */
color: #AAAAAA;/* cor do texto */
font-family: 'Delius Swash Caps', cursive;/* fonte */
font-size: 14px;/* tamanho da fonte */
text-align: justify;/* justificado */
width: 300px;/* largura */
padding: 8px;
background: white;/* plano de fundo */
border: 1px dashed #C0F6F6;/* borda */
}
</style>
<div class='otitulo'>SEU TÍTULO AQUI</div>
<center><img class='afoto' src='URL-DA-FOTO-DE-PERFIL'/></center>
<center>
<div class='otexto'>
SUA DESCRIÇÃO AQUI.
<center>
<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a>
<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a>
<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a></center></div></center>

O próprio código já está auto-explicativo. Se o seu perfil ficar saindo para fora do Gadget aumente a largura dele em: Modelo>Personalizar>Ajustar Larguras>Barra Lateral Direita.

Caso o título fique enorme demais, é só você diminuir o tamanho da letra em Font-size, e alterar a fonte, em font-family.

Mas vocês devem ter reparado que eu não uso este título, não é mesmo? Eu uso o título do próprio Gadget.

Se quiser tirar o título apague os seguintes códigos:

.otitulo {/* texto welcome */
color: #C0F6F6;/* cor do texto */
font-family: 'Rouge Script', cursive;/* tipo de fonte */
font-size: 55px;/* tamanho da fonte */
text-shadow: 1px 2px 3px #1CD4D5;/* sombra do texto */
text-align: center;/* centralizado */
padding: 40px;/* posiciona o texto */
}

E depois este:

<div class='otitulo'>SEU TÍTULO AQUI</div>

Para ver códigos de cores, vocês podem consultar este site AQUI, super recomendo. Uso ele sempre!

Se você quiser que apareça os ícones de Facebook, Google+, etc. Você deverá preencher os campos abaixo do "Sua descrição aqui".

Em nome do link, por exemplo você coloca o link do seu Facebook ou da sua página, e na URL da Imagem, você coloca o link do ícone que você quer que apareça.

Se você quiser mais redes sociais do que apenas três, repita o seguinte código abaixo dos outros:

<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a></center></div></center>

Caso você não queira que apareça as redes sociais, apague o seguinte código:

<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a>
<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a>
<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a></center></div></center>

E de brinde eu irei deixar aqui alguns ícones para vocês usarem no perfil de vocês! E não se esqueçam de comentar!

Continue lendo

13 de fevereiro de 2015

Cabeçalho Personalizar blog

Tutorial: Personalizar Cabeçalho ocupando toda a largura do blog

fevereiro 13, 2015 Por Géssica Marques 22 Comentários

Hey galerinha, neste tutorial irei mostrar para vocês como personalizar o cabeçalho do blog de vocês, ocupando toda a largura, com e sem fundo.

Esta é a largura do blog.

Para personalizar o seu blog a imagem deve ter 1920 x 500 pixels. Este tamanho pode aumentar ou diminuir depende do seu blog, mas creio que irá funcionar. Após personalizar a imagem como quer, você deve fazer upload dela, já vou avisando para não fazer upload em um blog de teste, pois ele corta a imagem, e não deixa ela no tamanho original. Ah, e no seu cabeçalho é melhor que já deixe o nome do seu blog, ou não irá funcionar.

Eu usei este site AQUI para fazer o upload da minha imagem. Agora com o cabeçalho que você quer pronto, o que resta agora é colocar no blog.

Tem duas maneiras de fazer isso:

1. Postar o cabeçalho, mas ficar sem plano de fundo.

2º Postar o cabeçalho e ficar com o plano de fundo.

Então vamos lá.

Cabeçalho sem plano de fundo.

Já vou avisando que sua imagem não deve ter mais de 300 kb, se tiver mais que isso não tem como, então você deve diminuir o tamanho da imagem, geralmente eu faço isso usando o photoshop. Na hora de salvar a imagem, ele te mostra o tamanho dela, ai você pode aumentar ou diminuir.

Você deve ter o seu cabeçalho pronto, e uma imagem transparente, isso mesmo sem nada! Este transparente deve ter as mesmas medidas que o cabeçalho que você fez.

Com a imagem transparente, você irá em Layout > Cabeçalho > Fazer upload da imagem transparente.

Marque a opção "Em vez de título e descrição".

Salve.

Feito isso, agora você irá em Modelo>Personalizar>Imagem de fundo > Carregue o cabeçalho que você quer que apareça, o que você personalizou, e marque a opção Não dividir em blocos quando terminar de carregar.

Prontinho, seu cabeçalho sem plano de fundo irá funcionar!

Cabeçalho com plano de fundo

Agora com o plano de fundo, assim como no anterior você deve ter duas imagens, a transparente, e a com imagens, brushes e outras coisas que você queira. Lembrando que a transparente deve ter as mesmas medidas que o cabeçalho que você quer.

Agora para colocar o cabeçalho no blog vá em Modelo > Editar HTML > Clique dentro da caixa do HTML e aperte Ctrl+F. Na caixinha de pesquisa que aparecer, pesquise pelo seguinte código:

body {

Assim que pesquisar, você vai encontrar o seguinte código:

body {
font: $(body.font);

color: $(body.text.color);

background: $(body.background);
}

Apague o código e substitua por este:

body, html {

height: 400px;

margin: 0;

padding: 0; }

body {

background: url("URL do cabeçalho") no-repeat; }

html {

background: url("URL do background") repeat; }

Preste bastante atenção agora, onde está escrito URL do cabeçalho você vai colocar o URL (link) do cabeçalho que você hospedou em algum site.

E no em URL do background você vai colocar o link da imagem de fundo que você quer.

Depois de ter feito tudo isso, e salvar, provavelmente o seu cabeçalho será tampado pelo blog, não vai ficar aquele espaço dele, não é mesmo? Então, é agora que você irá usar a imagem transparente do seu cabeçalho.

Vá em Layout > Cabeçalho > Upload de Imagem > Carregue a imagem transparente com as mesmas medidas do seu cabeçalho, e não esqueça de marcar a opção "Em vez de título e descrição" e salve.

Prontinho! Agora seu cabeçalho está funcionando perfeitamente. Qualquer dúvida deixem nos comentários!!

Continue lendo

Gadget Personalizar blog

Tutorial: Personalizar o título dos gadgets

fevereiro 13, 2015 Por Géssica Marques 5 Comentários

Oi galerinha! Venho lhes trazer um tutorial que é de muito interesse para várias pessoas. Afinal, como personalizar os títulos dos Gadgets sem mudar o HTML do blog?

Não sabe o que é gadget? É isso aqui ó.

Clique na imagem para aumentar o tamanho

Entendeu agora? Então vou lhes ensinar uma maneira rápida e simples de deixar o gadget do seu blog lindo. É a mesma forma que usei no meu, é rápido e simples, e o melhor: não precisa editar no HTML. Peguei este tutorial do blog Borboleta Rosa Vaidosa, é um blog bem legal e interessante, depois deem uma olhada lá.

Vá em Layout > Adicionar Gadget > HTML/JavaScript > Dentro dele você vai colocar os códigos de sua preferência, e pronto! Seu blog estará personalizado.

Neste site AQUI você pode ver os códigos das cores para trocar.

Aqui está o Gadget do meu blog, eu quem personalizei.

<style>

/*Títulos dos gadgets personalizados by Cat Girl*/

.sidebar h2 {

font-family: arial; /* Fonte */

font-style: italic; /* Estilo da fonte, pode mudar para normal */

font-size: 14px; /* Tamanho da fonte */

text-align: center; /* Alinhamento do texto, pode mudar para left ou right */

color: #FFFFFF; /*Cor da fonte*/

background: #FF69B4; /* Cor do fundo */

padding-left: 12px;

margin-bottom: 5px;

-webkit-border-radius: 100px;

-moz-border-radius: 100px;

border-radius100px;

/*Fim dos títulos dos gadgets personalizados, não retire créditos*/

}

</style>

<style>

/*Títulos dos gadgets personalizados by Cat Girl*/

.sidebar h2 {

font-family: trebuchet ms; /* Fonte */

font-style: normal; /* Estilo da fonte, pode mudar para italic */

font-size: 14px; /* Tamanho da fonte */

text-align: center; /* Alinhamento do texto pode mudar para left ou right*/

color: #FFFFFF; /*Cor da fonte*/

background: #FF69B4; /* Cor do fundo */

padding-left: 12px;

margin-bottom: 5px;

-webkit-border-top-left-radius: 20px;

-webkit-border-top-right-radius: 20px;

-moz-border-radius-topleft: 20px;

-moz-border-radius-topright: 20px;

border-top-left-radius: 20px;

border-top-right-radius: 20px;

/*Fim dos títulos dos gadgets personalizados, não retire créditos*/

}

</style>

<style>

/*Títulos dos gadgets personalizados by Cat Girl*/

.sidebar h2 {

font-family: verdana; /* Fonte */

font-style: normal; /* Estilo da fonte, pode mudar para italic */

font-size: 14px; /* Tamanho da fonte */

text-align: left; /* Alinhamento do texto pode mudar para center ou right */

color: #FFFFFF; /*Cor da fonte*/

background: #FF69B4; /* Cor do fundo */

padding-left: 12px;

margin-bottom: 5px;

-webkit-border-bottom-right-radius: 50px;

-moz-border-radius-bottomright: 50px;

border-bottom-right-radius: 50px;

/*Fim dos títulos dos gadgets personalizados, não retire créditos*/

}

</style>

Bom, galera. Comigo funcionou e creio que com vocês irá funcionar também. Espero que tenham gostado do tutorial. Estarei trazendo outros tutoriais de personalização de blog para vocês.

Continue lendo

16 de abril de 2015

Tutorial - Perfil do autor abaixo da postagem

10 de março de 2015

Tutorial: Seleção colorida

9 de março de 2015

Personalizar a barra de rolagem do Blogger

8 de março de 2015

Personalizar o Gadget do Tradutor do Google

Personalizar botões compartilhar + site para baixar ícones

7 de março de 2015

Tutorial - Perfil do autor no Gadget + ícones de redes sociais

13 de fevereiro de 2015

Tutorial: Personalizar Cabeçalho ocupando toda a largura do blog

Tutorial: Personalizar o título dos gadgets

Sobre

Fundadora

Colaboradores

Popular

Facebook

Siga o blog!

Advertising

Últimos vídeos

Anuncie

Instagram