![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
LinkWithin é um gadget que mostra as postagens relacionadas com uma imagem em miniatura, e ainda que não é um gadget nada novo, muitos não animam a usá-lo por sua falta de personalização.
Portanto nessa postagem vamos ver…
Como personalizar o LinkWithin.
O que faremos ao gadget será o seguinte:
- Alterar a localização do gadget.
- Colocar uma cor de fundo.
- Mudar o texto “You might also like:” por algum outro.
- Traduzi-lo para o português em caso de que esteja em inglês.
- Eliminar o link do LinkWithin.
- Eliminar a borda que separa as postagens.
- Colocar as imagens redondeadas.
- Mudar a cor de fundo ao passar o cursor.
- Mudar o formato dos títulos das postagens.
O primeiro passo é adicionar ao código do LinkWithin o código abaixo:
O código deve ficar parecido com esse abaixo:
Algumas vezes o gadget vem em inglês, o texto "You might also like:". Então podemos mudar esse texto pelo texto de nossa preferencia, para isso acrescentaremos ao nosso código a parte que está em vermelho. como mostrado acima.
O resto da personalização faremos com CSS, assim que antes de ]]> colaremos o seguinte código:
/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #EFF8FB; /* Cor de fundo */
padding: 0 10px;
}
.linkwithin_text {
font-size:18px; /* Tamanho do título do gadget */
color:#084B8A; /* 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: 500px !important; /* Tamanho do gadget */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #819FF7 !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:0 !important;
}
.linkwithin_title {
color: #0431B4 !important; /* Cor dos títulos das postagens */
font-family: Verdana !important; /* Tipo de fonte dos títulos das postagens */
font-size: 13px !important; /* Tamanho dos títulos das postagens */
line-height: 14px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #000 !important; /* Cor dos títulos ao passar o cursor */
font-weight: bold !important;
}
Na cor vermelha podes ver que corresponde cada área que você pode personalizar, você pode adicionar mais estilos se desejar até obter o desenho visual que mais te agrade.
Desta forma você poderá oferecer aos seus leitores Postagens relacionadas ao tema que estão lendo, e permanecerão mais tempo em seu blog.
cara vou ser sincero otimo esse tutorial a meses venho caçando mais não acho e hoje na bobeira chei rsrs mano muitos procuram esse tutorial acrecente mais palavras chaves a essa postagens mais tags que terei certeza que muitos vão adorar cara
Devo colar este código com ou sem as palavras em vermelho?
MUITO BOM VLW MESMO BROTHER
por favor me ajudem, instalei esse linkwithin no meu blog e nao consigo remover de jeito nenhum!! ja excluí o widget mas ele nao some, tbm ja procurei o codigo dele no html mas nao encontro nada.. alguem sabe como remover isso definitivamente?? obrigada!
meu contato: brecho3@live.com
Olá Kemuel Stefano,
muito bom o seu post, mas eu ainda preciso de algo diferente. Estou alterando meu blog e preciso de algo parecido com o seu ‘ARTIGOS RELACIONADOS’, porém 2×2, com imagens naquele mesmo tamanho. Tem alguma sugestão?
Obrigado!
Professor; você gostaria de artigos relacionados só com duas imagens, é isso?
gostaria de saber como almetar o tamnho das imagens e a quantidade vc poderia me ajudar?
Não tem como aumentar o tamanho das imagens. O numero maximo é 5 não tem como aumentar a quantidade.
Então amigo. gostei muito do tutorial ai, to até usando já, mas gostaria de saber se tem como aumentar o tamanho das imagens e a quantidade, reaparei que o seu tem duas fileiras com 5, o que tenho procurado é parecido com isso.
O gadget que eu uso aqui no Dicas Blogger não é o linkwithin.
Para usar o que eu uso entre no site nrelate e pegue o codigo.
Só faltou a parte de mudar a localização… Era bem o que eu queria… 🙁
Larissa, não entendi. Como assim mudar a localização?
Larrissa Ver se é isso!!!
Quando add o linkwithin ele fica naquela posição so. você esta querendo adicionar ele em qual quer lugar ne ?
Poxa amigo me ensina como colocar ele somente no post não na home!
Fiz diferente. http://charlitoncarvalho.blogspot.com.br
parceiro como você fez para colocar 2 colunas para “Artigos Recomendados”
voce duplicou o codigo Linkwithin ou esta usando outro script?
Tem como centralizar ele?
o meu ficou em colunas. Como faço pra colocar lado a lado em uma só linha?
Eu instalei, e agora estou tentando tira-lo e não consigo de jeito nenhum! Já tentei de tudo, excluí o widget mas ele nao some,ja procurei o codigo dele no html mas não encontro, já até inseri uns códigos que vi em outros sites mas nada resolve! Poderia me ajudar por favor?? Estou precisando muito remover isso ai!
iiah_s2@hotmail.com
Ola,será que voçe poderia me ajudar?
Nao consigo adicionar o widget automaticamente,como voçe fez ai,quando clico em’adicionar widget’ nao aparece nada,esta pagina só recarrega,mas nao direciona para o blog ,nem nada,fiz tudo certinho.tentei fazer manualmente,copiei o código,e colei em um novo widget html/javascript,colei as duas partes la,funcionou,mas ai o nome do widget esta aparecendo no layout/template,e nao deveria aparecer,como devo proceder?grata desde ja.
O meu não deu certo.. 🙁
Só pra avisar que os códigos não estão aparecendo aqui…
Nem no mozila nem no crhome.