Follow Us @soratemplates

segunda-feira, 16 de outubro de 2017

Bordas Personalizadas com Imagens

outubro 16, 2017 0 Comments

Algumas vezes tentei adicionar bordas diferentes a algumas áreas dos layouts (como nas postagens) que usei aqui no blog e, para isso, personalizava planos de fundo no Photoshop para inserir no HTML depois, como mostrei aqui e aqui.
Dando uma olhada no Codepen, encontrei que existe uma forma de se fazer isso de maneira mais rápida e fácil, só que sem chance de ficar tortinho, como acontecia algumas vezes comigo...
Isso porque existe uma propriedade (?~é assim que se diz) para adicionar aos estilos (CSS) de um template/layout chamada border-image. Ela permite que você insira um código no seu HTML em que no lugar da borda em forma de linha, pontilhados ou pontinhos como normalmente a gente vê por aí, irá aparecer uma imagem e o navegador vai mostrar essa imagem como uma borda, daí você pode decorar quase toda área que quiser com bordas em forma de ondas, serrilhadinhos, rendas... usando imagens como gifs e pngs, por exemplo, para deixar mais bonitinho. Testei no Firefox e Chrome e deu certim.
O resultado é que nem esse abaixo:

Exemplo com plano de fundo colorido. Adicione cor ao background.
Exemplo para usar com imagens png, sem plano de fundo, acho que fica mais bonito.
Ok. Agora, como usar? Só acrescentar border-image:url(url-da-imagem) 32 round round; ao código da área que deseja modificar, antes de /b:skin.

Aí vc escolhe onde quer que apareça :3 Por exemplo, na área de postagem (veja como personalizar essa área aqui):
 /**area da postagem**/
@import url('https://fonts.googleapis.com/css?family=Bad+Script');
.post{
font-family: 'Bad Script', cursive;
width: 600px;
color: #a1a1a1;
font-size: 12px;
text-shadow: 1px 2px 3px #eee;
text-align: justify;
border-image-width: 100px;
border: 32px solid transparent;
border-image:url('https://2.bp.blogspot.com/-8jCe-HJ14Mc/WeUEMsSeKUI/AAAAAAAARa4/VwLXFPl1X6MKzfyoa9asqCqjA2cX72DjgCLcBGAs/s1600/lace.png') 38 round round;
padding-right:10px;
padding-left: 10px;
margin:10px 0;
} 
Ou como blockquote:
 blockquote {
    border: 32px solid transparent;
    border-image: url('https://2.bp.blogspot.com/-8jCe-HJ14Mc/WeUEMsSeKUI/AAAAAAAARa4/VwLXFPl1X6MKzfyoa9asqCqjA2cX72DjgCLcBGAs/s1600/lace.png') 50 round round;
    border-image-width: 100px;
    font-family: 'Bad Script', cursive;
    font-size: 20px;
    color: #cab0b2;
    margin: 0;
    padding: 5px;
    text-align: center;} 
 #ID-DO-WIDGET {
    border: 32px solid transparent;
    border-image: url(https://2.bp.blogspot.com/-8jCe-HJ14Mc/WeUEMsSeKUI/AAAAAAAARa4/VwLXFPl1X6MKzfyoa9asqCqjA2cX72DjgCLcBGAs/s1600/lace.png) 32 round round;
    background: transparent !important;
    width: 350px;
 } 
Ou para decorar alguma coisa... vá no HTML de seu template/tema/modelo e cole esse código antes de /b:skin:
 @import url('https://fonts.googleapis.com/css?family=Bad+Script');
.divider {
  border: 32px solid transparent;
  border-image:url('https://2.bp.blogspot.com/-8jCe-HJ14Mc/WeUEMsSeKUI/AAAAAAAARa4/VwLXFPl1X6MKzfyoa9asqCqjA2cX72DjgCLcBGAs/s1600/lace.png') 38 round round;
  background-color: #f3dbdc;
  font-family: 'Bad Script', cursive;
  font-size: 20px;
  color: #cab0b2;
  margin: 0;
  padding: 5px;
  text-align: justify;
} 
No código acima, aparece um background colorido, se quiser que fique só a borda com plano de fundo transparente, especifique um tamanho:
 @import url('https://fonts.googleapis.com/css?family=Bad+Script');
.divider {
    border: 32px solid transparent;
    border-image: url('https://2.bp.blogspot.com/-8jCe-HJ14Mc/WeUEMsSeKUI/AAAAAAAARa4/VwLXFPl1X6MKzfyoa9asqCqjA2cX72DjgCLcBGAs/s1600/lace.png') 50 round round;
    border-image-width: 100px;
    font-family: 'Bad Script', cursive;
    font-size: 20px;
    color: #cab0b2;
    margin: 0;
    padding: 5px;
    text-align: justify;} 
Você pode alterar os valores 32px, 100px, 38 e 50, mudando a borda conforme preferir. E onde quiser que apareça, cole isso:
 <div class='divider'>
Escreva Aqui
</div> 
E é isso!! Nesse site tem imagens fofas para usar: Asterism. Mas você mesmo pode criar suas próprias formas em programas de edição de imagem, dando um toque especial ao seu blog.
Imagem início do post: weheartit

terça-feira, 10 de outubro de 2017

Gatinho Animado feito com HTML, Css e Fofura!

outubro 10, 2017 3 Comments
Encontrei no Codepen um código super fofo para criar um gatinho animado usando apenas html e css; ele mexe bigodes e orelhas e parece respirar :3 Há como usá-lo de diversas maneiras. Resolvi adicionar ao código um menu com opções para voltar ao topo, atualizar a página e uma caixa de pesquisa que aparecem ao passar o mouse sobre o felino. Se quiserem adicionar ao blog de vocês, cole este código no html do seu template antes de </body>
Para mudar as cores do gato e dos links, troque onde houver #000 pela cor que preferir, alguns lugares para modificar destaquei lá no código. Deixei o meu gatinho preto em homenagem ao Bigode, um gato de verdade com o maior bigodon que já vi na vida! Ele aparece aqui em casa, principalmente na hora do almoço... (jantar, café da manhã, lanche ou qualquer hora em que a gente estiver comendo alguma coisa 😝). Aquela bola de pelinhos me faz adorar ainda mais os gatos!💖

domingo, 1 de outubro de 2017

sexta-feira, 29 de setembro de 2017

Caixa de Códigos com Opção para Copiar e Imprimir

setembro 29, 2017 0 Comments
Há algum tempo postei sobre como usar a caixa de códigos SyntaxHighlighter e prometi trazer esse tutorial com a função copiar.
Pois então, é isso que faremos nesse post; a caixa de códigos funciona assim: quando você posicionar o mouse sobre ela, vão aparecer 3 imagens, as estrelas que vocês verão no exemplo, cada uma serve para: copiar todo o código, imprimi-lo e ver os créditos ao autor. Veja o resultado aqui.
1. Cole o código abaixo antes de </body> no html do seu template:
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody
{
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: none !important;
    color: #f9cccc !important;
    text-align: left !important;
    float: none !important;
    vertical-align: baseline !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    width: auto !important;
    line-height: 1.1em !important;
    font-family: &quot;Consolas&quot;, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, Courier, monospace !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 14px !important;
    min-height: inherit !important; /* For IE8, FF  WebKit */
    min-height: auto !important; /* For IE7 */
}
 
.syntaxhighlighter
{
    width: 99% !important;
    margin: 1em 0 1em 0 !important;
    padding: 1px !important;
    overflow: auto;
    position: relative !important;
}
 
.syntaxhighlighter .bold
{
    font-weight: bold !important;
}
 
.syntaxhighlighter .italic
{
    font-style: italic !important;
}
 
.syntaxhighlighter .line
{
    background: #fff4f4 !important;
}
 
.syntaxhighlighter .no-wrap .line .content
{
    white-space: pre !important;
}
 
.syntaxhighlighter .line table 
{
    border-collapse: collapse !important;
}
 
.syntaxhighlighter .line td
{
    vertical-align: top !important;
}
 
.syntaxhighlighter .line .number
{
    width: 3em !important;
}
 
.syntaxhighlighter .line .number code
{
    width: 2.7em !important;
    padding-right: .3em !important;
    text-align: right !important;
    display: block !important;
}
 
.syntaxhighlighter .line .content
{
    padding-left: .5em !important;
}
 
.syntaxhighlighter .line .spaces
{
}
 
/* Disable border and margin on the lines when no gutter option is set */
.syntaxhighlighter.nogutter .line .content
{
    border-left: none !important;
}
 
.syntaxhighlighter .bar
{
    display: none !important;
}
 
.syntaxhighlighter .bar.show
{
    display: block !important;
}
 
.syntaxhighlighter.collapsed .bar
{
    display: block !important;
}
 
/* Adjust some properties when collapsed */
 
.syntaxhighlighter.collapsed .lines
{
    display: none !important;
}
 
.syntaxhighlighter .lines.no-wrap
{
    overflow: auto !important;
    overflow-y: hidden !important;
}
 
/* Styles for the toolbar */
 
.syntaxhighlighter .toolbar
{
    position: absolute !important;
    right: 0px !important;
    top: 0px !important;
    font-size: 1px !important;
    padding: 8px 8px 8px 0 !important; /* in px because images don&#39;t scale with ems */
}
 
.syntaxhighlighter.collapsed .toolbar
{
    font-size: 80% !important;
    padding: .2em 0 .5em .5em !important;
    position: static !important;
}
 
.syntaxhighlighter .toolbar a.item,
.syntaxhighlighter .toolbar .item
{
    display: block !important;
    float: left !important;
    margin-left: 1px !important;
    margin-top: -5px !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    text-indent: -5000px !important;
}
 
.syntaxhighlighter.collapsed .toolbar .item
{
    display: none !important;
}
 
.syntaxhighlighter.collapsed .toolbar .item.expandSource
{
    display: inline !important;
    text-indent: 0 !important;
    width: auto !important;
    float: none !important;
    height: 16px !important;
    padding-left: 20px !important;
}
 
.syntaxhighlighter .toolbar .item.viewSource
{
    background-image: url(&#39;https://4.bp.blogspot.com/-30zTn2bn3ak/WcnMv6Pd83I/AAAAAAAARUw/BTUzgepPeEc5XTDXOsBUjhnRdTl3ifiGwCLcBGAs/s1600/star.png&#39;) !important;
}
 
.syntaxhighlighter .toolbar .item.printSource
{
    background-image: url(&#39;https://4.bp.blogspot.com/-30zTn2bn3ak/WcnMv6Pd83I/AAAAAAAARUw/BTUzgepPeEc5XTDXOsBUjhnRdTl3ifiGwCLcBGAs/s1600/star.png&#39;) !important;
}
 
.syntaxhighlighter .toolbar .item.about
{
    background-image: url(&#39;https://4.bp.blogspot.com/-30zTn2bn3ak/WcnMv6Pd83I/AAAAAAAARUw/BTUzgepPeEc5XTDXOsBUjhnRdTl3ifiGwCLcBGAs/s1600/star.png&#39;) !important;
}
 
 
.line.alt2 {
    background: white !important;
}
 
/* Gutter line numbers */
.syntaxhighlighter.printing .line .number
{
    color: #ffd5d5 !important;
}
</style>
<script src='https://kawaiiicode.github.io/shCore.js' type='text/javascript'/> 
<script src='https://kawaiiicode.github.io/shBrushCSharp.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
</b:if> 

Onde estiver escrito...
color ou background = altere as cores (veja uma tabela de cores aqui)
width= altere as larguras; em width: 99% !important; - mude o número para um menor caso queira diminuir a largura da caixa.
Para alterar a imagem da estrela, mude:
https://4.bp.blogspot.com/-30zTn2bn3ak/WcnMv6Pd83I/AAAAAAAARUw/BTUzgepPeEc5XTDXOsBUjhnRdTl3ifiGwCLcBGAs/s1600/star.png

Quando quiser usar em alguma postagem para compartilhar códigos, você deve inserir no HTML da postagem:
<pre class="brush: c-sharp;">SEU CÓDIGO AQUI</pre>
Na área em que você insere os códigos (seu código aqui) cole o que for compartilhar; eu geralmente uso esse site para postar o código no html e ele apareça conforme deve ser usado pelos leitores.
E é isso. Espero que gostem.

Imagem: Weheartit

quinta-feira, 28 de setembro de 2017

Hospedar Javascript e outros Arquivos para Usar no Blogger

setembro 28, 2017 0 Comments
Oi... Depois de avisos de leitores para rever alguns tutoriais que usavam arquivos javascript, css e outros que você precisa armazenar em algum site para usar, percebi que os códigos que eu havia hospedado em sites tipo tumblr, dropbox... não estavam carregando no blogger.
O motivo não sei explicar, mas parece que até esse momento o blogger aceita/carrega apenas scripts e estilos que você aplica ao tema no html mesmo, o código completo; só que nem sempre os códigos que você insere em um template de um javascript são salvos, aparece uma mensagem de erro, e aí é preciso hospedar em algum lugar para dar certo.
Procurei um site legal para hospedar arquivos estáticos e achei o github bem interessante, os scripts hospedados lá funcionam!! Vou mostrar como usar no seu blog.
1. Crie uma conta no site. Por quê? Além de ser preciso se cadastrar para usá-lo, o Github é uma super fonte de conteúdo para quem curte aprender ou compartilhar códigos e downloads feitos por pessoas de diversos lugares, sempre tem coisa interessante!
2. Depois de realizar os processos para que seu perfil fique ativo, crie um novo repositório e dê um nome a ele assim: seunomedeusuario.github.io

Essa página pode te ajudar: Github Pages.
3. Faça o upload de algum arquivo. Como exemplo, vou enviar o script que dá o efeito arco-íris nos links.
4. Digite na sua aba de endereços:
seunomedeusuario.github.io/nomedoarquivo.extensão
Exemplo: kawaiiicode.github.io/arcoiris.js
5. Aquele endereço deverá ser adicionado ao seu blog...
...se for javascript, geralmente adicionado antes de </head>:
<script src='URL-DO-JS' type='text/javascript'></script>
Exemplo: <script src='http://kawaiiicode.github.io/arcoiris.js' type='text/javascript'></script>
...se for Css/estilos, que pode ficar antes de </b:skin>:
<link href='URL-CSS' rel='stylesheet' type='text/css'/>
Mas você não precisa hospedar css se não quiser, basta colocar os códigos de estilos antes de /b:skin ou entre <style></style>...

Verifique sempre se no seu html aparece o github.io e não github.com

Em breve e aos poucos vou atualizando os links dos scripts de alguns posts passados para que vocês possam usá-los ou salvá-los como preferir ~;3

Imagem de abertura do post: weheartit.com