Widget - Box Sobre o Autor no rodapé de seus posts no Blogger

Olá amigo informal! Bom, hoje trago um widget que estou acostumado a ver em inúmeros blogs, mas de um estilo diferente. Você já pensou em ter uma em seu blog? Ela além de dar um ar de profissionalismo ao blog, está na lista de widgets que não podem faltar em um blog, segundo o bloqueiro Adelson Smania do Gerenciando Blog. O estilo que vou compartilhar com vocês é super interessante e tem sutis efeitos em CSS3.

O diferencial dessa caixinha com a biografia do autor, é que não tem apenas a o bio mas também inclui pequenos botões sociais para que os leitores podem se conectar com o autor em redes sociais como Facebook , Twitter e Google Plus. O widget foi feito por Bhavesh Pamecha.

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Acesse modelo → Fazer backup/Restaurar → Fazer download do modelo completo.

1° passo: Acesse o painel do Blogger , escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

2°passo: Marque a caixa "expandir modelos de widget". Agora usando o Ctrl F, procure por:

<data:post.body/>

3° passo: Logo abaixo, cole o seguinte código:

<b:if cond='data:blog.pageType == "item"'><div class="tbiauthorbox"> <div class="tbiauthoravatar"> <img alt="descrição de imagens para SEO" src="AVATAR LINK"/> <span class="tbiauthorlabel">Post Author</span> </div><div class="tbiauthorcontent"> <div class="tbiauthorhead"> <h3><a href="AUTHOR LINK">AUTHOR NAME</a></h3><ul class="tbiauthorsocial"><li><a class="authorBlog" href="BLOG LINK" target="_blank" title="Blog">Blog</a></li><li><a class="authorFacebook" href="FACEBOOK LINK" target="_blank" title="Facebook">Facebook</a></li><li><a class="authorGooglePlus" href="GOOGLE+ LINK" target="_blank" title="GooglePlus">GooglePlus</a></li><li><a class="authorTwitter" href="TWITTER LINK" target="_blank" title="Twitter">Twitter</a></li></ul></div><p class="bio">AUTHOR BIO</p></div></div></b:if>

Mudanças a serem feitas

Substitua descrição de imagens para SEO , com uma pequena descrição de 2 a 3 palavras  para SEO imagem.

Substitua AVATAR LINK com o pic avatar ou o perfil do autor

Substitua AUTHOR LINK com o blogue do autor ou de qualquer coisa que você deseja vincular

Substitua AUTHOR NAME com o nome do autor.

Substitua BLOG LINK com o link para o autor do blog.

Substitua FACEBOOK LINK com o perfil do autor no Facebook.

Substitua Google + LINK com o perfil do autor Google+.

Substitua TWITTER LINK com o perfil do autor no Twitter.

Substitua AUTHOR BIO com a bio do autor.

Código CSS

4° passo: Agora, procure por ]]> </ b: skin> e logo acima dele cole o seguinte código e salve o modelo.

/* Author Box By TopBloggingIdeas.com */ .tbiauthorbox { position: relative; margin: 20px auto; border: 10px solid #3E999E; padding: 5px; min-height: 115px; max-width: 650px; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .tbiauthorbox:hover { border: 10px solid #32BBC2; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .tbiauthoravatar { background: #fff; border: 1px solid #ccc9bd; float: left; height: 100px; padding: 2px; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 4px 0 #d9d9d9; -moz-box-shadow: 0 0 4px 0 #d9d9d9; box-shadow: 0 0 4px 0 #d9d9d9; width: 100px; } .tbiauthoravatar img { height: 100px; width: 100px; } .tbiauthorlabel { font-family: 'lucida sans unicode', 'lucida grande', sans-serif; background: #333; color: #fff; display: block; font-size: 11px; font-weight: bold; line-height: 20px; height: 20px; margin-left: -43px; position: absolute; bottom: -10px; left: 50%; text-align: center; width: 86px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .tbiauthorcontent { margin-left: 120px; } .tbiauthorhead { border-bottom: 1px solid #ddd; margin-bottom: 12px; padding: 0 160px 3px 0; position: relative; } .tbiauthorbox h3 { font-family: georgia, serif; color: #302E29; font-size: 26px; font-weight: normal; line-height: 30px; margin: 0; border: none; text-transform: none; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tbiauthorbox h3:hover { color: #E65002; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tbiauthorbox h3 a { color: #302E29 !important; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tbiauthorbox h3 a:hover { color: #E65002 !important; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tbiauthorsocial { list-style: none; margin: 0; padding: 0; position: absolute; top: 4px; right: 0; } .tbiauthorsocial li { float: left; margin-right: 4px; padding: 0; } .tbiauthorsocial li a { background: url(https://lh6.googleusercontent.com/-cztX7uW8FGU/UEDmmy6SdFI/AAAAAAAAGdg/ONp7KkBoPOU/s75/icons_user_links.png) no-repeat 0 0; color: #C1B7A3; display: block; height: 20px; font-size: 0; text-indent: -99999px; width: 20px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tbiauthorsocial li a.authorFacebook { background-position: -20px 0; } .tbiauthorsocial li a.authorGooglePlus { background-position: -40px 0; } .tbiauthorsocial li a.authorTwitter { background-position: -60px 0; } .tbiauthorsocial li a.authorBlog:hover { background-position: 0 -20px; } .tbiauthorsocial li a.authorFacebook:hover { background-position: -20px -20px; } .tbiauthorsocial li a.authorGooglePlus:hover { background-position: -40px -20px; } .tbiauthorsocial li a.authorTwitter:hover { background-position: -60px -20px; } .tbiauthorbox p.bio { font-family: 'lucida sans unicode', 'lucida grande', sans-serif; font-size: 12px; line-height: 18px; } .tbiauthorbox p a { color: #E65002; } /* Author Box By TopBloggingIdeas.com */

Espero que tenham gostado! Deixe seu comentário!

Share This :