PERSONALIZAR O GADGET LINKWITHIN NO SEU BLOG.

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:

<div class='linkwithin_div'/>

O código deve ficar parecido com esse abaixo:

<div class='linkwithin_div'/> <script> var linkwithin_site_id = XXXX; </script><br /> <script>linkwithin_text=' Postagens relacionadas: '</script><br /> <script src='http://www.linkwithin.com/widget.js'/>

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
 ]]></b:skin> 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; }

O texto entre *...* 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.