Mostrando postagens com marcador Tutorial Blogger Nível: Intermediário. Mostrar todas as postagens
Mostrando postagens com marcador Tutorial Blogger Nível: Intermediário. Mostrar todas as postagens

13 de setembro de 2015

Plano de fundo aleatório para o Blogger

Tem blogueiro que vive trocando de template, não aguenta ver o blog com a mesma cara por muito tempo. Fazer a troca de template é um processo um pouco chato, toma tempo, alguns gadgets precisam ser salvos manualmente, etc. Ter um fundo aleatório no blog seria uma boa opção para quem quer ver o blog sempre de um jeito diferente.

O fundo aleatório funciona da seguinte forma: a cada atualização ou mudança de página o fundo é trocado automaticamente. Isso acontece após termos instalado um código indicando as imagens que devem aparecer no fundo e com o comando aleatório. Confira a seguir um passo-a-passo ensinando como instalar esse código.


Vá na aba Design > Editar HTML e encontre o seletor body. Adicione um fundo  para ser o fundo padrão, pode ser uma imagem ou uma cor. Exemplos:
Cor
Imagem
body {
background: #000000;
}
body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfsHjxaI3AQ6DTb6CoTy1zRPFx0fSbG1KW8n9tEGe7OGOMcgeCPgar4y6BuMB3QV1Q8a3Cu9LzRMWy2e2iQAi70gYTxXYw3VQu4gLbdb01gSbCUw8silm6tcdUp9v5orFnjRxC1H45_T0/s1600/glitter_backg
round_02.gif);
}

Para a imagem ir se repetindo por todo o fundo do blog adicione o comando repeat. Para a imagem não se repetir, ou seja, aparecer uma vez só, adicione o comando no-repeat acompanhado da posição. Exemplos:

Se repetir

body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfsHjxaI3AQ6DTb6CoTy1zRPFx0fSbG1KW8n9tEGe7OGOMcgeCPgar4y6BuMB3QV1Q8a3Cu9LzRMWy2e2iQAi70gYTxXYw3VQu4gLbdb01gSbCUw8silm6tcdUp9v5orFnjRxC1H45_T0/s1600/glitter_background_02.gif) repeat;

Não repetir


Você também pode querer que a imagem se repita apenas na horizontal, para isso use o comando repeat-x. Porém se desejar que a imagem se repita na vertical use repeat-y.
Salve o modelo e vá na aba Design > Elementos da página. Clique em Adicionar um gadget e escolha o elemento HTML/JavaScript. Não coloque nenhum título. Em Conteúdo cole o seguinte código:
<script type="text/javascript">
var banner= new Array()
banner[0]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[1]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[2]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[3]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[4]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[5]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[6]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[7]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[8]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[9]="AQUI O ENDEREÇO DE SUA IMAGEM"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") repeat center center;');
document.write(" }");
document.write("</style>");
</script>

Você pode inserir até 10 fundos diferentes para serem trocados de forma aleatória. Insira os endereços das imagens em seus devidos lugares. A parte destacada de vermelho é a posição que as imagens ficarão no fundo, elas irão se repetir centralizado tanto na vertical, quanto na horizontal.
Salve o gadget e visualize seu blog. Carregue a página várias vezes para ver o efeito.

Via fulaninhaentretenimentos

Publicado por Administrador19:09

20 de abril de 2014

Colocar anúncios do Adsense dentro das postagens no Blogger

O Google Adsense é o sistema de monetização de blogs mais usado em todo o mundo, iniciantes ou não. Isso se deve principalmente pela facilidade em que é possível se inscrever no mesmo, e isso faz com que ele seja muito usado por blogueiros novatos. Porém ganhar dinheiro com o sistema não se trata de uma tarefa tão fácil, inclusive muitas pessoas dependendo do tráfego recebido, acabam por esperar por alguns meses para enfim receber seu primeiro salário.

Uma das estratégias que uso e recomendo é inserir anúncios em espaços estratégicos, ou seja, que esteja bem visível ao leitor, e que não prejudique a leitura.

INSERINDO ANÚNCIOS DENTRO DAS POSTAGENS NO BLOGGER


Foto: Divulgação/Como Blogar 

Antes de tudo, é altamente recomendável que você faça um rápido backup do seu template, dessa forma, caso ocorra algum erro, você poderá voltar seu template da mesma maneira em que estava antes do tutorial.

1° passo: Acesse o painel do Google Adsense e gere o código do seu anúncio como você já está acostumado a fazer. O mais recomendável é que o tamanho do anúncio seja 300 x 250, mas você pode colocar o tamanho que desejar.

2° passo: Após gerar o código do anúncio, é necessário que você o converta para que ele funcione em seu blog. Para fazer isso, clique aqui, cole o código gerado no formulário e clique em “Convert”. Automaticamente será gerado um novo código, copie e cole no bloco de notas pois precisaremos dele no 4° passo.

3° passo: Agora acesse o painel do blogger, escolha o blog que você deseja instalar, selecione a opção modelo, clique em “Editar HTML”.

4° passo: Agora usando o Ctrl + F, procure pela tag <data:post.body/>, e insira o seguinte código acima dela:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;padding:2px'>
CÓDIGO DO ANUNCIO CONVERTIDO
</div></b:if>

5° passo: Substitua o texto em vermelho pelo código que você colocou no bloco de notas.

Automaticamente o anúncio ficará do lado direito do artigo, se você quiser colocar do lado esquerdo basta substituir o trecho float:right, por float:left.

Obs.: Os anúncios aparecem apenas nas páginas dos artigos, e não na página inicial.

Espero que vocês tenham gostado, e até o próximo tutorial. 

Publicado por Administrador13:51

25 de março de 2014

Caixa de pesquisa incrível em CSS3 no Blogger

    Instale em seu blog uma caixa de pesquisa com um visual agradável e totalmente personalizável. 
       Para instalar esta caixa de pesquisa css basta escolher um dos modelos (com bordas redondas ou com bordas quadradas ) e realizar os passos citados abaixo.



1 - Acesse a página Editar HTML ;

2 - Encontre a linha ]]></b:skin> ;

3 - Escolha um dos modelos abaixo e cole o código acima da linha citada no passo 2;

BORDAS REDONDAS:
#pesquisafsm-caixa { background: #eee; padding:10px; border-radius:10px 0 0 10px; border:0 none; width:150px; } #pesquisafsm-botao { border: 1px solid #222; color: #eee; padding-left:10px; padding-top:10px; background: #4591fa; border-radius: 6px; margin-left: -3px; color:#fff; font: 'trebuchet ms', trebuchet; padding:10px 20px; border-radius:0 10px 10px 0; border:0 none; font-weight:bold; } #pesquisafsm-botao:hover { color: #eee; border: 2px solid #bbb; padding-left:8px; padding-top:8px; background: #4591fa; border-radius: 6px; margin-left: -3px; color:#fff; font: 'trebuchet ms', trebuchet; padding:8px 18px; border-radius:0 10px 10px 0; font-weight:bold; }
BORDAS QUADRADAS:
#pesquisafsm-caixa { background: #eee; padding:10px; border:0 none; width:150px; } #pesquisafsm-botao { border: 1px solid #222; color: #eee; padding-left:10px; padding-top:10px; background: #4591fa; margin-left: -3px; color:#fff; font: 'trebuchet ms', trebuchet; padding:10px 20px; border:0 none; font-weight:bold; } #pesquisafsm-botao:hover { color: #eee; border: 2px solid #bbb; padding-left:8px; padding-top:8px; background: #4591fa; margin-left: -3px; color:#fff; font: 'trebuchet ms', trebuchet; padding:8px 18px; font-weight:bold; }



4 - Para finalizar esta etapa clique em Salvar Modelo;


5 - Agora vá para página Layout e adicione um gadget(widget)  HTML/JavaScript

6 - No gadget HTML/JavaScript adicione o código:

<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="pesquisafsm-caixa" name="q" placeholder=" Faça sua busca aqui...." size="40" type="text" />
<input id="pesquisafsm-botao" type="submit" value="Buscar" />
</form>

PS: Para mudar a cor do botão substitua a cor destacada em vermelho.
      Para mudar a cor do botão com o mouse sobre substitua a cor destacada em azul.
      Para mudar a cor da caixa de texto substitua a cor destacada em verde.

Publicado por Administrador17:25

14 de março de 2014

Botões css para Blogger




Aprenda como utilizar um botão css em vez de imagens, além de ser mais leve tem um aspecto mais profissional e caso venha trocar de template você pode modifica-lo, que a alteração será aplicada em todos os posts com ele. 




  Criar um botão css se tornou muito mais fácil e rápido com o site Button Maker do CSS-Tricks
  
1 - Acesse o site Button Maker;
2 - Personalize seu botão da forma que deseja (Confira a função de cada ferramenta na imagem 2);
3 -  Após personalizar seu botão, clique sobre o mesmo, e copie o código;
4 -  Para adicionar o código, vá para página Editar HTML e procure a linha ]]></b:skin> ;
5 - Acima dela cole o código que copiou do Button Maker;
Ps:  Caso deseje mudar a cor do link do botão e remover o sublinhado, adicione o código abaixo acima da linha ]]></b:skin> :
Ps²:  Na linha vermelha insira a cor que deseja;

.button a{
color:#fff;
text-decoration:none;}
.button a:hover{
color:fff
text-decoration:none;}
6 - Para usar o botão você deve entrar na parte HTML do post e colar a tag <div class="button"> acima do texto ou link que ficará dentro do botão e finalizar com a tag </div>

Exemplo:

<div class="button">  
 download
</div>

Resultará no botão:

download



Ferramentas do Button Maker (Imagem 2)

Fonte: fsmdesign.blogspot.com

Publicado por Administrador18:17

31 de julho de 2013

Marcadores do Blog em Forma de Menu Suspenso

Muitas vezes utilizamos muitos marcadores em nosso blog e acaba ficando feio e ocupando um grande espaço no blog.

Uma forma de reverter a situação sem perder a elegância do blog é substituir os marcadores de texto por marcadores em forma de menu suspenso.

Gênero: Tutoriais Blog
Nível: Intermediário

Como Colocar Marcadores em Forma de Menu Suspenso no Blog

Lembrando, antes de começar a editar o Modelo do blog, faça um backup do template.
Como Fazer o Backup?

Acesse painel clique “Modelo”, “Fazer backup/Restaurar”, “Fazer download do modelo completo”.

Como Colocar Widget no Blog?

Após fazer o backup na mesma página “Modelo”, clique em “Editar HTML”, “Prosseguir” e selecione “Expandir modelos de Widgets”.

Procure pelo código (CTRL + F).
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li class='guiarapido'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>

Após localizar o código acima apague o trecho:

<ul>
<b:loop values='data:labels' var='label'>
<li class='guiarapido'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
</li>
</b:loop>
</ul>
E logo em seguida cole esse código no lugar:

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecione um marcador</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>
Clique em visualizar, veja se o código realmente funcionou e salve clicando em “Salvar Modelo”.

Em <option>Marcadores</option>, onde está escrito Marcadores, você pode colocar qualquer nome que você quiser.

Publicado por Administrador18:14

21 de julho de 2013

Como remover a mensagem 'Assinar: Postagens (Atom)' do blogger

Pessoal irei ensinar a vocês a como remover a mensagem 'Assinar: Postagens (Atom)' do footer do seu blog. Aprendi isso no site IceBreaker Design.

Gênero: Tutorial Blog
Nível: Intermediário

Veja na imagem abaixo um exemplo da mensagem...


(clique na imagem para amplia-la)

1° passo: Entre no painel do seu blog
2° passo: No menu esquerdo clique em 'Modelo' e depois 'Editar HTML'
3° passo: Marque a caixinha 'Expandir Modelo Widgets' no 'Editar HTML'

4° passo: Aperte a tecla 'F3' do seu teclado e procure por '<b:include name='feedLinks'/>'
5° passo: Depois de encontrar '<b:include name='feedLinks'/>' apague o mesmo
6° passo: Visualize, se der tudo certo clique em 'Salvar Modelo'


É somente isto, espero que tenham gostado e comentem!

Publicado por Administrador19:16

1 de julho de 2013

Como adicionar o Gadget "Poderá também gostar de" no seu Blog!!

Gênero: Tutorial Blogger
Nível: Intermediário

 Uma ótima e importante ferramenta para seu blog é o LinkWithin, com essa ferramenta seus leitores poderão navegar mais facilmente pelo seu blog, a ferramenta fica no rodapé de todas as postagens contendo nomes e imagens de postagens relacionadas, vale a pena experimentar, confira o tutorial!



1° passo: Acesse o site clicando nesse link!


2° passo: Preencha o formulário na pagina inicial com as informações necessárias.


Obs. Onde está escrito Plataforma NÃO ESCOLHA BLOGGER escolha OTHERS, pois se você não fizer assim, o widget não funcionará!
Em largura, escolha quantos box (caixas com artigos) você quer de acordo com a largura do seu blog, o normal é 4, se seu blog tiver o fundo escuro marque a opção!

3° passo: Você será redirecionado para esta pagina:

4° passo: Acesse o painel do blog, clique em ''Modelo'' em seguida clique em ''editar HTML'' aperte Ctrl+F e procure por <data:post.body/> , antes dele cole o código fornecido pelo LinkWithin visualize, se estiver tudo em ordem, clique em salvar!


Inicialmente, o gadget vai aparecer assim:

 E depois de personalizar assim:
  Bem melhor, né? Pra fazer, é só abrir o seu blog em Modelo, clicar em Editar HTML, teclar ctrl+F e procurar por:
]]></b:skin>
 Quando achar, cole o código abaixo acima do encontrado.
/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #FFFFFF; /* Cor de fundo */
padding: 0 10px;
}
.linkwithin_text {
font-size:18px; /* Tamanho do título do gadget */
color:#000000; /* Cor do título do gadget */
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none; /* Com isto eliminamos o link */
}
.linkwithin_posts {
width: 700px !important; /* Tamanho do gadget */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #ccc !important; /* Cor de fundo ao passar o cursor */
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 {
/* Bordas arredondadas */
-webkit-border-radius: 80px !important;
-moz-border-radius: 80px;
border-radius: 80px;
border:0 !important;

}
.linkwithin_title {
color: #000000 !important; /* Cor dos títulos das postagens */
font: normal 13px "Calibri", cursive !important; /* Fonte dos títulos das postagens */
line-height: 14px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #FF1493 !important; /* Cor dos títulos ao passar o cursor */
font-weight: bold !important;
}
 Se você não quiser as bordas arredondadas, é só excluir a parte em negrito do código.
Modelo Azul 
Print acima de como fica

/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #FFFFFF; /* Cor de fundo */
padding: 0 10px;
}
.linkwithin_text {
font-size:18px; /* Tamanho do título do gadget */
color: #1E90FF; /* Cor do título do gadget */
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none; /* Com isto eliminamos o link */
}
.linkwithin_posts {
width: 700px !important; /* Tamanho do gadget */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.linkwithin_posts a:hover {
background: #F8F8FF !important; /* Cor de fundo ao passar o cursor */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 {
-webkit-border-radius: 80px !important;
-moz-border-radius: 80px;
border-radius: 80px;
border:0 !important;
box-shadow: inset 0 0 15px #dcdcdc, 0 0 3px #dcdcdc;
}
.linkwithin_title {
color: #1E90FF !important; /* Cor dos títulos das postagens */
font: normal 13px "Calibri", cursive !important; /* Tipo de fonte dos títulos das postagens */
line-height: 14px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #87CEEB !important; /* Cor dos títulos ao passar o cursor */
font-weight: bold !important;
}

 Modelo Rosa 
Print acima de como fica

/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #FFFFFF; /* Cor de fundo */
padding: 0 10px;
}
.linkwithin_text {
font-size:18px; /* Tamanho do título do gadget */
color: #FF69B4; /* Cor do título do gadget */
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none; /* Com isto eliminamos o link */
}
.linkwithin_posts {
width: 700px !important; /* Tamanho do gadget */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.linkwithin_posts a:hover {
background: #FFE4E1 !important; /* Cor de fundo ao passar o cursor */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 {
-webkit-border-radius: 80px !important;
-moz-border-radius: 80px;
border-radius: 80px;
border:2px dashed #FF69B4 !important;
box-shadow: inset 0 0 15px #dcdcdc, 0 0 3px #dcdcdc;
}
.linkwithin_title {
color: #FF69B4 !important; /* Cor dos títulos das postagens */
font: normal 13px "Calibri", cursive !important; /* Tipo de fonte dos títulos das postagens */
line-height: 14px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #FF69B4 !important; /* Cor dos títulos ao passar o cursor */
font-weight: bold !important;
}


Tenho certeza que esta ferramenta te ajudara a crescer! Sucesso!

Créditos das personalizações: PCookie

Publicado por Administrador20:41