Teste de cores

Aqui aparecerá o texto que você definir.
Aqui aparecerá o texto que você definir.
Aqui aparecerá o texto que você definir.
Jangan selalu mengikuti arus, jadilah diri sendiri.
Aqui aparecerá o texto que você definir.

Como usar fontes personalizadas baixadas da internet no blog?

CÓDIGO @FONT-FACE:
(cole acima de ]]></b:skin>)

@font-face {
    font-family: 'NOME DA FONTE';
    src: url('URL FORMATO EOT');
         url('URL FORMATO WOFF2') format('woff2'),
         url('URL FORMATO WOFF') format('woff'),
         url('URL FORMATO TTF') format('truetype');
    }


PARA USAR A FONTE PERSONALIZADA NOS TÍTULOS DOS POSTS

/* Posts
----------------------------------------------- */
h3.post-title {
  margin-top: 20px;
font-family: 'NOME DA FONTE';/* NOME DA FONTE PERSONALIZADA  */
font-size: 40px; /* TAMANHO DA FONTE  */
  color: $(post.title.text.color);
}

h3.post-title a {
font-family: 'NOME DA FONTE';/* NOME DA FONTE PERSONALIZADA  */
font-size: 40px; /* TAMANHO DA FONTE  */
  color: $(post.title.text.color);
}

h3.post-title a:hover {
font-family: 'NOME DA FONTE';/* NOME DA FONTE PERSONALIZADA  */
font-size: 40px; /* TAMANHO DA FONTE  */
 color: $(link.color);
  text-decoration: none;
}


PARA USAR A FONTE PERSONALIZADA NOS TÍTULOS DOS GADGETS

/* Headings
----------------------------------------------- */
h2 {
font-family: 'NOME DA FONTE';/* NOME DA FONTE PERSONALIZADA  */
font-size: 30px; /* TAMANHO DA FONTE  */
  color: $(widget.title.text.color);
}


Se quiser usar a fonte em texto do blog localize esse trecho e altere:

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}



Botões para seguir nas redes sociais


BOTÃO DO INSTAGRAM- MODELO 1

<center><style>.ig-b- { display: inline; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-16 { width: 16px; height: 16px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-16.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-16 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-16@2x.png); background-size: 60px 178px; } }</style>
<a href="https://www.instagram.com/NOMEDEUSUARIO/" class="ig-b- ig-b-16"><img src="//badges.instagram.com/static/images/ig-badge-16.png" alt="Instagram" /> <b>siga no Instagram</b></a></center>


BOTÃO DO INSTAGRAM- MODELO 2

<center><style>.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-v-24 { width: 137px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-v-24 { background-image: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24@2x.png); background-size: 160px 178px; } }</style>
<a href="https://www.instagram.com/NOMEDEUSUARIO/" class="ig-b- ig-b-v-24"><img src="//badges.instagram.com/static/images/ig-badge-view-24.png" alt="Instagram" /></a></center>


BOTÃO SEGUIR NO BLOGLOVIN

<center><a class="blsdk-follow" href="https://www.bloglovin.com/blogs/NOMEDEUSUARIO" target="_blank" data-blsdk-type="button">Follow</a><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s);js.id = id;js.src = "https://www.bloglovin.com/widget/js/loader.js?v=1";fjs.parentNode.insertBefore(js, fjs);}(document, "script", "bloglovin-sdk"))</script></center>


Como colocar bordas com diversos estilos nas imagens dos posts?

<style type="text/css">
.post-body img {
outline: 1px solid #ffffff;
outline-offset: -12px;
}
</style>

ONDE MARQUEI EM VERMELHO É O CÓDIGO CSS. ALTERE PARA MUDAR CORES E ESTILOS, CONFORME EXPLICO NO TUTORIAL.


Exemplo de código CSS para borda branca, sólida:

<style type="text/css">
.post-body img {
outline: 1px solid #ffffff;
outline-offset: -12px;
}
</style>


Se quiser borda groove marrom e laranja:

<style type="text/css">
.post-body img {
outline-style:groove;
outline-width:7px;
outline-color: #FF8D3C;
outline-offset: 4px;
}
</style>


Para finalizar, uma dica extra:
Vamos supor que você, assim como eu, prefira usar só um estilo de borda em todas as imagens dos posts, automaticamente, sem precisar inserir manualmente em cada post.
Tem jeito, claro!
Basta colar este código:

.post-body img {outline: 1px solid white;outline-offset: -12px;}

Acima da tag ]]></b:skin> de fechamento no código fonte de seu template e salvar.
Altere a cor, espessura e estilo das bordas como preferir, de acordo como expliquei no tutorial.

Código do box Google+

<div id="google_plus_div">
<div style="float: left; margin: 10px 10px 10px 0;">
<div class="g-plus" data-action="followers" data-height="303" data-href="https://plus.google.com/+ElaineGasparetoParada/" data-source="blogger:blog:followers" data-width="300">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'pt-br'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>  </div>
</div>

Dividir espaço do gadget em 3 colunas

<div style="float:left;padding:2px;text-align:center">ESQUERDA</div>
<div style="float:right;padding:2px;text-align:center">DIREITA</div>
<div style="clear:both;padding:2px;text-align:center">EMBAIXO</div>



Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage