Barra de Compartilhamento Dentro dos Artigos Fixada no Fundo da Tela


Barra de Compartilhamento Fixada no Fundo da Tela

Vamos ao Tutorial:

1º – Acesse o Painel do seu Blog e clique na Guia Modelo.

2º – Em seguida, clique em Editar HTML.


3º – Depois clique em na Caixa Expandir Modelos de Widgets.


4º – Segure as Teclas CTRL+F e procure por:
<div class='post-body entry-content'
 

5º – E Abaixo dele cole o seguinte código:

<b:if cond='data:blog.pageType == "item"'>
<div id="barra2">
<div id="barra-post">
<div id="compartilhe">Compartilhe:</div>
<div><a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a></div>
<div><g:plusone expr:href='data:post.url' size='medium'/></div>
<div><fb:like expr:href='data:post.url' font='arial' layout='button_count' send='true' show_faces='false' width='54'/></div></div></div></b:if>

6º – Depois segure as teclas CTRL+F e procure por:
]]></b:skin>
 

7º – E Acima dele cole o seguinte código:

#barra2 {
width: 610px;
height: 36px;
position: fixed;
bottom: 0;
}
#barra-post {
width: 460px;
background: #EAEAEA;
border: 1px solid #CCC;
height: 25px;
padding: 9px 5px 1px 10px;
border-bottom: 0;
margin: 0 auto;
bottom: 0;
border-image: initial;
}
#compartilhe {
font-size: 14px;
margin-right: 20px;
color: #464646;
}
#barra-post div {
float: left;
}


8º – Depois, clique em Salvar Modelo.

Nenhum comentário:

Postar um comentário

Postagem mais recente Postagem mais antiga Página inicial