Como criar Botão Compartilhar no Whatsapp 

com imagem no Blog?

É exatamente isso que vim trazer para vocês no post de hoje, uma dica super útil, e que eu sempre quiz aprender, depois de alguns testes trouxe um codigo que funcionou bem no blogspot, lembrando que a funcionalidade do codigo depende muito da codificaçao do seu layout, se voce tiver alguma noçao saberá edita-lo caso dê algum erro... enfim, ja editei com os botoes do FACEBOOK, GOOGLE+, TWITTER e claro o WHATSAPP.

Ficará no final de cada postagem assim: 

Veja também: GANHE DINHEIRO COM SEU BLOG 

  <div class='post-footer-line post-footer-line-2'>

<span class='compartilhamento'><img alt='' class='compartilhe-amor' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMo0SZA37HzgqSkXyc0tyYJZnfWjNeaPBToadtjRWkrCLEk8NCevxsJ5Ei-NRXs4QapUM68yPZXu0UvfdXB4iP9cnzlj5Sb6aNouij7wJ8ms0mxqUiWUhK9BytW0BooEQuWpvxCSD92l7l/s1600/compartilhe2.png' width='149'/>
<!-- share buttons -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUTmQ9Zsu-3I6VJsZI9cMmQrc9Jhq73RL0rcpm066QrUO8lALSJxiiffkuZmadPufJyPkHNhrRSTvY-CSA7k_1i57Dnv3y6M5_qjiYvGyqg5iohnzGTKoNcfHUZo9_VfgEvMWvWV0qNOb/s1600/fb.png' title='Facebook'/></a>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPFwKOcakQcIGxHEpb3dkVXo1lYOpyV4P8mzAAnCRyCXT5zrpb6f-wqtAdsqLaY7CjBAQ_uxqeVSCRHu5JefOsyMLtAKalrklHFYHWh-a01wl3OrDvWGXLVF3gJ1H-QUfZW8rgZs54xRer/s1600/tw.png' title='Twitter'/></a>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0sI5t_vR9BpU0Dm6pXtXGC-cawFSO9JerjDZNNOMRW-cOOvStG-4pNeYsHNEVVamaNcPcZtinhJFdxI2djD7DeKlgVWbmppy4EyhkgNtuiZPimWlRdzneL9AfBak0SZ7fTHxGNXku8xlC/s1600/g%252B.png' title='G+'/></a>

<a expr:href='&quot;whatsapp://send?text=&quot;  + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNicQSRmVRmxjXFJcuvt5YGS3gYbFMAiBvyvESltgciHyaoKr9SUzSyPq5Eno9TdBYiWYX7WfOtcfupmmneFh4YXMaWNYYcFKkb4-Zn8lcoYe6rsuTuxcpvktE0dNQYyjSc5MENI72S-hE/s1600/wts.png' title='Whatsapp'/> </a>


<!-- share buttons -->
              </span>

Feito isso, é só salvar!
Os LINKS em VERMELHO são das imagens que  podem ser trocadas, basta hospedar e copiar a URL para substituir.

A imagem COMPARTILHAR tem 150x50 px de dimensão
E os BOTÕES tem 32x32 px

Se esse post foi útil para você me ajude compartilhando, se for reblogar ultilize apenas os codigos (e nao o meu texto no geral) e nao esqueçam de dá os devidos CRÉDITOS  (pois o google tem como identificar plágios).


Um forte abraço a todos vcs e até o próximo post se Deus quiser!

Olá meus amores,  hoje vim ensinar para vocês uma forma simples de personalizar o título dos posts.
Os creditos desse post vao para Nah e Cherry <3

Para quem nao sabe existem 3 codigos que personalizam (tres formas do post), sao eles:

O título do post normal, quando está na página inicial do blog que é determinado pelo codigo:
h3.post-title a { 

O título do post em estado houver, quando o mouse está sobre ele que é determinado pelo codigo:
h3.post-title a:hover { 

E o título do post depois que você clicou e já está na página do post, determinado pelo codigo:
h3.post-title { 

Todos esses tres codigos estao abaixo desse codigo geral de Post:
/* Posts

font-family: Arial; /* fonte do título */
font-size: 32px ; /* tamanho da fonte */
color: #000000; /* cor do título*/
border-bottom: 1px dashed#0000; /* cor, tamanho e tipo de borda */

Uma dica especial, vc coloca abaixo da opcao em HOVER de uma forma diferenciada, ou seja, altera a cor (para quando passar o mause a cor seja diferenciada) e se quiser um EFEITO HOVER com SOMBRA, basta adicionar esse codigo abaixo:

text-shadow: 1px 2px 3px #6a6a6a; /* tamanho e cor do efeito */

O codigo ficará assim:

font-family: Arial; /* fonte do título */
font-size: 32px ; /* tamanho da fonte */
color: #000000; /* cor do título*/
border-bottom: 1px dashed#0000; /* cor, tamanho e tipo de borda */
text-shadow: 1px 2px 3px #6a6a6a; /* tamanho e cor do efeito */

Olá meus amores, tudo bem com vocês?

Vocês sabiam que podem gerar uma rendinha extra com seu blog, ultilizando apenas um Banner de divulgacao?

No post de  hoje vim trazer uma super dica para todas as blogueiras, seja você iniciante ou veterana, que é uma forma de monetizar seu blog e ter uma renda extra.

É claro que para  gerar uma rendinha boa, é necessario que seu blog tenha um bom tráfego diario para que gere o CPM que gira em torno de R$2,00 a cada  1000 visualizacões, e esse valor pode aumentar a depender das opcoes de publicidade que voce coloca no seu blog.

Exemplo: eu particularmente nao uso porque nao gosto da opcao de publicidade abrindo  em forma
de  Popunder (que sao aquelas janelas chatas de publicidade que se abrem)... Uso apenas o Baner na lateral do blog, ou seja no sidebar e eles contam por visitas (visualizacao) no blog e nao por cliques... isso é otimoooo!!!

Entao, basta você se cadastrar com o link do seu blog, colocar o banner deles em seu blog e pronto, se seu blog tiver bons conteudos e uma boa quantidade de visitas diarias, dá para gerar uma graninha boa no mes, sem falar que voce tambem pode indicar outras pessoas e ganhar tambem pelas indicacoes! Otimo né?!

Entao, está esperando o que para se cadastrar?

Clique no link abaixo e depois clique em CADASTRAR como mostra a imagem:

Espero que tenham gostado da dica! Se voce ja tem o cadastro nesse site, me conte como tem sido sua experiencia!

Um abraço a todos e vamos gerar uma rendiinhaaa com nosso "Bloguinho" <3

~
Olá meus amores, antes de tudo peço desculpas pela minha ausencia... como algumas de voces sabem, eu estou super corrida com o trabalho de verao aqui na italia, o que é bem puxado e ocupa boa parte do meu tempo, mas é por apenas alguns dias, logo tudo voltará ao normal. Hoje vim trazer para voces um Layout Responsivo Free, personalizado por mim ultilizando a Base Free da querida Lariz do Blog ButLariz.

Essa é a aparencia do Blog:

O arquivo não esta zipado, ou seja esta em arquivo xml, voce pode baixar diretamente no seu pc e adcionar automaticamente pelo blogger, ou clicar sobre o arquivo com o botao direito do mause e abrir com a opção BLOCO DE NOTAS, selecioar tudo e copiar, colando na area do html do seu blog, lembrando de fazer sempre o backup caso algo dê errado!

Os codigos que seguem abaixo, é necessario adcionar na gadget do blog.

Em questao a paginacao do blog, apos alguns testes nao consegui ativa las, precisaria de mais tempo o que eu nao tenho rs... entao SE você for usar esse layout, o ideal é voce entender de html para testar alguns tutoriais, ou  na opcao de configuração no Layout do blog em MAIN (na gadget de Postagens do Blog), onde tem Número de postagens na página principal: 05 ... Altere esse valor para 20 ou mais, assim aparecera seus ultimos 20 posts ou mais.

Infelizmente peguei só a  base  que a Lariz disponibilizou, mas nao tive tempo para trabalhar nela 100% ... e como tem uns 2 meses que nao posto um layout free, trouxe esse para quem quiser usar!
Estou com mtas saudades de trazer mais novidades, mas logo logo estarei aqui com  muitas coisas boas especialmente para vocês!

Espero que tenham gostado!
Segue abaixo os codigos!

<div id='nav'>

<ul>

<li><a href='/'>  Início </a></li>

<li><a href='/p/sobre.html'>  Sobre </a></li>

<li><a href='/p/contato.html'> Contato </a> </li>

<li><a href='/p/anuncie.html'>  Anuncie </a></li>

<li><a href='/p/blogroll.html'>  Blogroll </a></li>

</ul>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">

 $("#nav").addClass("js").before('<div id="menu"><img src="http://i.imgur.com/wvad5ud.png"/></div>');

 $("#menu").click(function(){

  $("#nav").toggle();

 });

 $(window).resize(function(){

  if(window.innerWidth > 900) {

   $("#nav").removeAttr("style");

  }

 });

</script>

<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
margin-left: -30px;
width:1120px; ==LARGURA DO SLIDE==
float:center; ==POSIÇÃO DO SLIDE==
clear:both;
}



.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0px 0px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background:#FFF; /*--cor de fundo das miniaturas ao passar o mouse --*/



display: block;
clear: left;
font-size: 16px;
font-family: arial;
text-transform: uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
height:320px;
height: 57.4%; /*--define a altura da legenda --*/
width:100%; /*--define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 0px 0px;
padding: 119px 0px 0px 0px;
color:#999; /*== COR DA FONTE DO TEXTO==*/
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.bsrp-gallery .bs-item .ptitle:hover {
-webkit-transition:All 0.7s ease-in-out; -moz-transition:All 0.7s ease-in-out; -o-transition:All 0.7s ease-in-out;
filter:alpha(opacity=90);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
}
/*FIM CSS FOTOS*/
</style>
<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyvGvfrCjueXGWFHGdQihKz6UqAbbbGnNcGnfXijj8bULWMABycjWrM9EXj0rheFkoJDViHsjQk4Hyin0p5ffkX_brv2WASjn0jK6BIU0eWoQU8IbPMvRKHVrhvMLOFFewexcY9zvaBsYL/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" title="' + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
hoje = new Date()
numposts = 1
var bsrpg_thumbSize = 280;



var bsrpg_showTitle = true;


document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>