Como personalizar o LinkWithin - Postagens Relacionadas | Quero Dicas | Tutoriais para seu blogs


Como personalizar o LinkWithin - Postagens Relacionadas


Hoje eu vou ensinar como personalizar a ferramenta para ela ficar bonito. =D
Antes de começarmos faça um backup do seu template, caso você queira voltar ao estado anterior.
Não sabe fazer Backup? Não tem problema, veja este tutorial.
    Tutorial




1 - Acesse o seu blog que está o Widgets. Vá em Modelo e Editar HTML.


2 - Pressione o Ctrl + F e na barra de pesquisa, procure por:
 ]]></b:skin>


3 - Acima dela, cole o código abaixo.

 
 /* 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! Agora personalize conforme ao seu gosto e conforme o seu blog.
Lembre-se: Só personalize o que está escrito ao lado de cado código, é fácil! 
Tabela de cores - Ufpa

Se tiver alguma dúvida, me informe! =D 
E não deixe de me seguir! Beijinhos

Este código só foi testado na plataforma Blogger e os créditos são do site cbblogers Me Contrate!

2 comentários

Clique e deixe seu comentários
sábado, 14 fevereiro, 2015 ×

Gostei :D Só que eu não encontro o códico ]]>
:/ Pode me ajudar? Não tem outro nome ? Porque o meu dar erro! Obrigadaa
http://beatrizconceicao2018.blogspot.com.br/

Resposta
avatar
admin
sábado, 14 fevereiro, 2015 ×

Olá Beatriz. Creio que o código que você esteja falando é " ]]> " para você achá-lo mais facilmente em seu template , clique primeiro dentro dos códigos do template, depois Tecle Ctrl + F e abrirá uma caixinha de busca, dai é só colar o ]]> e apertar "Enter" e logo achará. Espero ter ajudado! Beijinhos ♥

Resposta
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.