CBBlogers

Dicas Tech

Personalizando o LinkWithin

por Graziela Forti em Dicas Tech, Gadget

maio 28, 2014 7

Personalização, LinkWithin, postagem relacionada, CBBlogers

No meu último post, mostrei um tutorial para colocar as postagens relacionadas logo abaixo de um post, para conferir clique aqui. Hoje vou ensinar como formatar a ferramenta que usamos nesse tutorial para que fique com a cara do seu blog.

Vamos lá:

Passo 1 – Já logado no blogger, vá até a opção “Modelo” e clique em “Editar HTML”.

Passo 2 – Pressione o ctrl + F e, na barra de pesquisa que apareceu, procure por: ]]></b:skin>

Passo 3 – Antes desse código, cole o código a seguir:

 /* LinkWithin personalizado

———————————————– */

.linkwithin_div {

background: #FFA500; /* Cor de fundo */

padding: 0 10px;

}

.linkwithin_text {

font-size:22px; /* Tamanho do título do gadget */
color:#FFAEB9; /* Cor do título do gadget */

font-family: ‘Sofia’, cursive; !important;

}

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: 560px !important; /* Tamanho do gadget */

}

.linkwithin_posts a {

border: 0 !important;

padding-right: 28px !important;

}

.linkwithin_posts a:hover {

background: #FFFACD !important; /* Cor de fundo ao passar o cursor */

-webkit-border-radius: 10px !important;

-moz-border-radius: 10px;

border-radius: 10px;

}

.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 redondeadas */

-webkit-border-radius: 10px !important;

-moz-border-radius: 10px;

border-radius: 10px;

border-style: dashed !important;

}

.linkwithin_title {

color: #000000 !important; /* Cor dos títulos das postagens */
font-family: ‘Sofia’, cursive; !important; /* Tipo de fonte dos títulos das postagens */
font-size: 13px !important; /* Tamanho dos títulos das postagens */

line-height: 10px !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;

}

Pronto é só realizar as mudanças conforme o próprio código já diz o que deve ser feito.

Não tem segredo é bem simples.

CBBlogers By Grazi Martins

Facebook / Twitter Pinterest Instagram

Comentários

  1. Não consigo achar o código no meu

    Responder
    • Foto de perfil de Graziela Forti

      Olá Thais, tente da seguinte forma: no editor HTML do seu blog, clique dentro da caixa dos códigos e pressione Ctrl + F para abrir a caixa de buscas. Dentro dessa caixa de buscas, procure por .

      Responder
  2. Olá!
    Você poderia dar dicas para a plataforma wordpress também.
    Um abraço,

    Responder
  3. BOA NOITE;

    Não consigo personalizar a frase, segui todos os passos deixado por esse tutorial, achei a palavra ]]> coloquei o código indicado antes da palavra e o linkwithin continua com a frase em inglês. Por favor m ajuda, pois tudo certinho e ja tentei todas as formas de personalizar essa frase para deixar em português igual a sua e não consigo.

    Desde já agradeço

    Responder

Deixe um comentário

O seu endereço de email não será publicado.


*


#CNB2018 - VÍDEO OFICIAL
  
Pular para a barra de ferramentas