Como adicionar o Gadget "Poderá também gostar de" no seu Blog!!

Gênero: Tutorial Blogger

Nível: Intermediário

 Uma ótima e importante ferramenta para seu blog é o LinkWithin, com essa ferramenta seus leitores poderão navegar mais facilmente pelo seu blog, a ferramenta fica no rodapé de todas as postagens contendo nomes e imagens de postagens relacionadas, vale a pena experimentar, confira o tutorial!


1° passo: Acesse o site clicando nesse link!

2° passo: Preencha o formulário na pagina inicial com as informações necessárias.

Obs. Onde está escrito Plataforma NÃO ESCOLHA BLOGGER escolha OTHERS, pois se você não fizer assim, o widget não funcionará!

Em largura, escolha quantos box (caixas com artigos) você quer de acordo com a largura do seu blog, o normal é 4, se seu blog tiver o fundo escuro marque a opção!

3° passo: Você será redirecionado para esta pagina:

4° passo: Acesse o painel do blog, clique em ''Modelo'' em seguida clique em ''editar HTML'' aperte Ctrl+F e procure por <data:post.body/> , antes dele cole o código fornecido pelo LinkWithin visualize, se estiver tudo em ordem, clique em salvar!

Inicialmente, o gadget vai aparecer assim:

 E depois de personalizar assim:

  Bem melhor, né? Pra fazer, é só abrir o seu blog em Modelo, clicar em Editar HTML, teclar ctrl+F e procurar por:

]]></b:skin>

 Quando achar, cole o código abaixo acima do encontrado.

/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #FFFFFF; /* Cor de fundo */
padding: 0 10px;
}
.linkwithin_text {
font-size:18px; /* Tamanho do título do gadget */
color:#000000; /* 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: 700px !important; /* Tamanho do gadget */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #ccc !important; /* Cor de fundo ao passar o cursor */
}
.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 arredondadas */
-webkit-border-radius: 80px !important;
-moz-border-radius: 80px;
border-radius: 80px;
border:0 !important;
}
.linkwithin_title {
color: #000000 !important; /* Cor dos títulos das postagens */
font: normal 13px "Calibri", cursive !important; /* Fonte dos títulos das postagens */
line-height: 14px !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;
}

 Se você não quiser as bordas arredondadas, é só excluir a parte em negrito do código.

Modelo Azul 
Print acima de como fica

/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #FFFFFF; /* Cor de fundo */
padding: 0 10px;
}
.linkwithin_text {
font-size:18px; /* Tamanho do título do gadget */
color: #1E90FF; /* 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: 700px !important; /* Tamanho do gadget */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.linkwithin_posts a:hover {
background: #F8F8FF !important; /* Cor de fundo ao passar o cursor */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.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 {
-webkit-border-radius: 80px !important;
-moz-border-radius: 80px;
border-radius: 80px;
border:0 !important;
box-shadow: inset 0 0 15px #dcdcdc, 0 0 3px #dcdcdc;
}
.linkwithin_title {
color: #1E90FF !important; /* Cor dos títulos das postagens */
font: normal 13px "Calibri", cursive !important; /* Tipo de fonte dos títulos das postagens */
line-height: 14px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #87CEEB !important; /* Cor dos títulos ao passar o cursor */
font-weight: bold !important;
}

 Modelo Rosa 
Print acima de como fica

/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #FFFFFF; /* Cor de fundo */
padding: 0 10px;
}
.linkwithin_text {
font-size:18px; /* Tamanho do título do gadget */
color: #FF69B4; /* 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: 700px !important; /* Tamanho do gadget */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.linkwithin_posts a:hover {
background: #FFE4E1 !important; /* Cor de fundo ao passar o cursor */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.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 {
-webkit-border-radius: 80px !important;
-moz-border-radius: 80px;
border-radius: 80px;
border:2px dashed #FF69B4 !important;
box-shadow: inset 0 0 15px #dcdcdc, 0 0 3px #dcdcdc;
}
.linkwithin_title {
color: #FF69B4 !important; /* Cor dos títulos das postagens */
font: normal 13px "Calibri", cursive !important; /* Tipo de fonte dos títulos das postagens */
line-height: 14px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #FF69B4 !important; /* Cor dos títulos ao passar o cursor */
font-weight: bold !important;
}

Tenho certeza que esta ferramenta te ajudara a crescer! Sucesso!

Créditos das personalizações: PCookie