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