Personalizar LinkWithin (Posts Relacionados): Mudar Cores e Efeitos
Vamos mostrar algumas maneiras de personalizar os links de postagens relacionadas feitas pelo Linkwithin que muitos blogueiro usam para gerar mais pageviews no blog e assim fazer os visitantes do blog ler mais postagens e ficarem mais tempo no seu site. Mostrar sugestões de outras postagens no seu blog é muito útil, mas você pode alterar as cores de fundo, cor de texto e também os feitos do Linkwithin apenas adicionando algumas linhas de código. Porém se estiver procurando como trocar o texto padrão do Linkwithin veja neste tutorial: Mudar o texto You might also like.
Para modificar a aparência dos assuntos relacionados no blog entre na pagina modelo > editar html > use o ctrl F para achar o trecho ]]></b:skin> e cole o código antes dele:
.linkwithin_posts {width: 700px !important;}
.linkwithin_posts a {border: none !important;padding-right: 15px !important;background-color: #FF0;background-image: none;height: 200px;}
.linkwithin_posts a:hover{background-color: #FC3 !important;}
.linkwithin_title:hover {color: #F00 !important;text-decoration: underline !important;}
Agora veja como alterar as cores do Linkwithin no Blogger. Em todos eles o que você precisa fazer é modificar os valores ou colocar o código HTML da cor que desejar e você pode ver os códigos neste link: Código das Cores.
.linkwithin_posts {width: 700px !important;}
700 é a largura total do gadget de posts relacionados, então se quiser que ele fique mais estreito e ocupando duas linhas diminua o valor.
.linkwithin_posts a {border: none !important;padding-right: 15px !important;background-color: #FF0;background-image: none;height: 200px;}
Aqui temos a cor de fundo de cada link background-color: #FF0. O espaço entre cada link background-color: #FF0 e a altura do gadget (200px) isso é útil caso o titulo do seu posts ultrapasse o final do gadget e fique fora da cor de fundo, então poderá aumentar esse valor.
.linkwithin_posts a:hover{background-color: #FC3 !important;}
#FC3 é a cor de fundo quando o mouse está sobre cada link.
.linkwithin_title:hover {color: #F00 !important;text-decoration: underline !important;}
Aqui temos #F00 que é a cor do texto quando o mouse está sobre o link.
Como já falamos anteriormente é só mudar o código das cores e os números referentes a larguras e se quiser pode ver aqui o código para usar bordas. Mas se quiser veja aqui outras opções de assuntos relacionados para usar no blogspot:
Lista de Posts com Assuntos Relacionados no Blog (somente texto)
Acessório para Mostrar Posts Relacionados no Blog (get.2leep)
Postagens Populares no Blogger: Gadget Posts mais Visitados
Achamos importante fazer algumas dessas alterações para fazer que links dos posts relacionados do seu blog combinem melhor com o template e as cores que usa no layout do seu blog, afinal a aparência do site é muito importante para agradar e conquistar mais visitantes e pessoas que gostam do nosso blog.
Para modificar a aparência dos assuntos relacionados no blog entre na pagina modelo > editar html > use o ctrl F para achar o trecho ]]></b:skin> e cole o código antes dele:
.linkwithin_posts {width: 700px !important;}
.linkwithin_posts a {border: none !important;padding-right: 15px !important;background-color: #FF0;background-image: none;height: 200px;}
.linkwithin_posts a:hover{background-color: #FC3 !important;}
.linkwithin_title:hover {color: #F00 !important;text-decoration: underline !important;}
Agora veja como alterar as cores do Linkwithin no Blogger. Em todos eles o que você precisa fazer é modificar os valores ou colocar o código HTML da cor que desejar e você pode ver os códigos neste link: Código das Cores.
.linkwithin_posts {width: 700px !important;}
700 é a largura total do gadget de posts relacionados, então se quiser que ele fique mais estreito e ocupando duas linhas diminua o valor.
.linkwithin_posts a {border: none !important;padding-right: 15px !important;background-color: #FF0;background-image: none;height: 200px;}
Aqui temos a cor de fundo de cada link background-color: #FF0. O espaço entre cada link background-color: #FF0 e a altura do gadget (200px) isso é útil caso o titulo do seu posts ultrapasse o final do gadget e fique fora da cor de fundo, então poderá aumentar esse valor.
.linkwithin_posts a:hover{background-color: #FC3 !important;}
#FC3 é a cor de fundo quando o mouse está sobre cada link.
.linkwithin_title:hover {color: #F00 !important;text-decoration: underline !important;}
Aqui temos #F00 que é a cor do texto quando o mouse está sobre o link.
Como já falamos anteriormente é só mudar o código das cores e os números referentes a larguras e se quiser pode ver aqui o código para usar bordas. Mas se quiser veja aqui outras opções de assuntos relacionados para usar no blogspot:
Lista de Posts com Assuntos Relacionados no Blog (somente texto)
Acessório para Mostrar Posts Relacionados no Blog (get.2leep)
Postagens Populares no Blogger: Gadget Posts mais Visitados
Achamos importante fazer algumas dessas alterações para fazer que links dos posts relacionados do seu blog combinem melhor com o template e as cores que usa no layout do seu blog, afinal a aparência do site é muito importante para agradar e conquistar mais visitantes e pessoas que gostam do nosso blog.
Marcadores: Gadgets, Mais visitas, Personalizar, Sites Úteis