Como por botões flutuantes (redes sociais) em seu blog

Olá galera do 'Blogando de verdade' neste tópico ensinarei a como por botões das redes sociais para compartilhar o mesmo. Isso é excelente, pois possibilita que os leitores divulguem nossos artigos em outros locais, tais como: Twitter, RSS, Orkut, Google Buzz, Facebook (mania do momento) e etc.
Existem muitos modelos de botões de redes sociais. Porém o que vou ensinar é um dos mais completos.

Vamos lá, mãos a obra: 1º faça login do Blogger, clique em layout, figura abaixo

Depois HTML/javascript e cole o código abaixo:

<div style="position:fixed; bottom:20%; margin-left:-98px; float:left;width:60px;background-color:#ffffdf;padding: 5px;border:1px solid #000;border-right:none"><center><div class="addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></center></div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2088636f7cce31"></script>
</div>


Não importa o lugar onde o gadget ficará posicionado, você poderá deixar em qual configuração optar.
Como editar a posição dos botões da redes sociais no seu blog.
Position:fixed; bottom:20%; margin-left:-98px: posição dos botões... então altere a altura na página 20% e o posicionamento horizontal modificando o valor -98px, aqui o valor é negativo ou seja o sinal de subtração (menos) faz parte do posicionamento.

float:left: lado que aparece a caixa.

width:60px: largura da caixa.

padding: 5px: margem entre as bordas da caixa e os botões.

background-collor:#fffdf: cor do fundo da caixa de botões de compartilhamento. Leia mais sobre cores

border:1px solid #000:border-right:none: neste trecho tiramos um lado da borda para parecer que a caixa de botões pareça com nosso layout.

Ficará assim:

Espero ter ajudado, e lembrando se tiver dúvidas, sugestão ou comentários, post em baixo.
Obrigado!

Leia mais...

Como deixar postagem resumida com miniaturas

Olá galera do 'blogando de verdade', neste tópico ensinarei a como deixar seu blog com aparência bem agradável, de maneira que seu visitante se sinta a vontade de ler seus post's. Sendo assim seu blog terá uma aparência do modo de vista (estética) agradável. Seus textos ficarão abreviados, e junto uma imagem em tamanho reduzido (é claro se no seu post tiver uma imagem, não importa o tamanho).
Recomendo fazer backup (cópia de segurança) completo do seu blog, assim se você não gostar, poderá desfazer.

Vamos a obra:
faça login do seu Blogger, vá até modelo/editar HTML/clique em Expandir modelo de widgets aperte as teclas CRT+F e no canto superior do seu navegador aparecerá a caixa de pesquisa,

<div class='post-body entry-content'>

<data:post.body/>

conforme imagem abaixo

Substitua a parte <data:post.body/>  por a tag abaixo:

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>

<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>»»Leia mais...</a></div>

</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>  

Depois vamos personalizar:

Você poderá substituir a parte "Leia mais..." pela a frase que quiser.

Mais uma modificação: 

Cópie o código abaixo e cole acima da tag ]]><b:skin>:  

.rmlink {

font-size: 120%;

float: right;

margin-right: 30px;

margin-top: 10px;

font-weight: bold;}

.rmlink a {

font-style: normal;

font-weight: bold;

font-variant: small-caps;

font-family: Arial,Sans-Serif;

color: #24618e; /*Cor do Link*/}

.rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/

.rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/

Agora clique em visualizar e veja se está abrindo a página normal. Obs. provavelmente vai estar somente com o título da postagem sem a postagem (normal).

Agora sim o toque final: 

Procure pela tag </head> e em baixo dela copie todo o código abaixo:

<!-- JavaScript Posts Resumidos-->

<!--

-->

<style type="text/css">

.thumbnailimg IMG {

 max-width:150px;

   width: expression(this.width > 150 ? 150: true);

   max-height:120px;

   height: expression(this.height > 120 ? 120: true);

}

.thumbnailimg {

 float:left;

 padding:0px 10px 5px 0px;

}

</style>

<script type='text/javascript'>

var thumbnail_mode = "no-float" ;

var classicMode = false ;

var summary_noimg = 50;

var summary_img = 40;

var indent = 3;

</script>

<script  type='text/javascript'>

//<![CDATA[

function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}

function getSummaryLikeWP(id) {

        return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];

}

function getSummaryImproved(post,max){

   var re = /<.*?>/gi

   var re2 = /<br.*?>/gi

   var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi

   var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi

  

   post = post.replace(re4,'')

   post = post.replace(re3,'<br /> ').split(re2)

  

   for(var i=0; i<post.length; i++){

    post[i] = post[i].replace(re,'');

   }

 var post2 = new Array();

 for(var i in post) {

  //if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);

  if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;

 }

 var s = "";

 var indentBlank = "";

 for(var i=0;i<indent;i++){

  indentBlank += " ";

 }

 if(post2.join('<br/>').split(' ').length < max-1 ){

   s = post2.join(indentBlank +' <br/>');

 } else {

  var i = 0;

  while(s.split(' ').length < max){

   s += indentBlank + ' ' + post2[i]+'<br/>';

   i++;

  }

 } 

 return s;

}

function createSummaryAndThumb(pID){

 var div = document.getElementById(pID);

 var content = div.innerHTML;

 if (/<!--\s*more\s*-->/.test(content)) {

  div.innerHTML = getSummaryLikeWP(pID);

  div.style.display = "block";

 }

 else {

 var imgtag = "";

 var img = div.getElementsByTagName("img");

 var summ = summary_noimg;

 if(img.length>=1) {

  if(thumbnail_mode == "float") {

   imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';

   summ = summary_img;

  } else {

   imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';

   summ = summary_img;

  }

 }

 var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';

 div.innerHTML = summary;

 div.style.display = "block";

 }

}

//]]>

</script><!-- Fim JavaScript Posts Resumidos-->

Visualize e se estiver tudo certo, pronto seu blog está com as postagens resumidas e junto uma imagem pequena do lado, tornando assim muito mais agradável ao seu visitante.
Conforme figura abaixo.

Obrigado pela visita e qualquer dúvida, deixe em baixo do post a mesma, que retornarei o mais breve possível.

Leia mais...

Como inserir o cabeçalho que você criou pelo HTMLjavascript

Olá galera do 'blogando de verdade', neste tópico ensinarei a postar ou inserir um cabeçalho de maneira fácil e simples, na parte superior do seu blog.

Conforme ensinei no tópico de como criar um banner ou cabeçalho de maneira fácil, usando o programa PowerPoint. Como criar um cabeçalho no PowerPoint

Vamos a obra:
1º abra a pasta onde está salvo o seu banner (cabeçalho), em formato GIF, conforme ensinei na aula de como criar um cabeçalho no PowerPoint.

Faça login do painel do Blogger e vá em nova postagem, adicione um título, veja que usei test como título e clique na aba onde será escrito a postagem e não escreva nada ainda. Clique na aba inserir imagem, conforme figura abaixo.

Agora abrirá a pasta para inserir a imagem e selecione a imagem e pronto, centralize a imagem no meio da postagem, e clique para ficar do 'tamanho muito grande', conforme a próxima tela abaixo.

Depois de inserir a imagem, não salve ainda, clique no botão HTML do lado do botão escrever e abrirá o código a ser usado. Copie esse código, pois ele será o cabeçalho a ser inserido no blog.
Como cópiar: deixe o mause dentro da postagem, clique CRT+A (seleciona tudo), CRT+C (cópia tudo) e CRT+V (cola tudo) no gadget que veremos a seguir.
Conforme figura abaixo.

Pronto veremos o detalhes finais, feche toda a postagem que estava trabalhando nelas e não salve, provavelmente ficará como rascunho, podendo ser usada ou editada futuramente.
Abra a página layout e clique na parte de cima do blog, adicinar gadget/abrirá uma tela, procure HTML/jacascript e cole todo o código copiado da postagem.
Dicas se não centralizar, poderá incluir os seguintes comando HTML: no início <center> e no final </center> e ficará centralizado no cabeçalho do blog.
É recomendado antes de salvar ir em visualizar o blog para ver se está tudo bem, depois clique em salvar.

espero ter ajudado, qualquer dúvida deixe-a em baixo do post que retornarei o mais breve possível.

Leia mais...

Como fazer para excluir cabeçalho do blog de maneira fácil

Olá galera do 'blogando de verdade', neste tópico vou ensinar como excluir o cabeçalho do blog de maneira fácil. Você poderá criar um um cabeçalho, conforme ensinei no tópico passado. Clique aqui para saber como criar um cabeçalho.  ou poderá baixar um pronto na internet, só terá que ter cuidado com direitos autorais.

Vamos a obra:
1º faça um backup (cópia de segurança). Agora você irá excluir o gadget do cabeçalho, pois podemos recolocá-lo novamente no blog.

Antes terá que entra no painel do blog, em design/editar HTML/marque a opção de Expandir modelo de windget.

Use as teclas CRT+F para pesquisar (abrirá uma caixa de pesquisa) e você terá que colocar o nome do cabeçalho (ex fulano fulano) e quando

 <b:section class='sidebar' id='sidebar-right-1' preferred='yes' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='NOME DO SEU BLOG (Cabeçalho)' type='Header'>


Tela em faze de procura, estará assim.

Depois terá que substituir a palavra 'true' que está perto da palavra hocked, por a palavra 'false'. Substitua a palavra 'true' por 'false' e depois salve o modelo.

Agora clica em layout/editar cabeçalho e exclua o cabeçalho padrão.
Abra o blog e veja como o cabeçalho já não se encontra na parte de cima do seu blog.
Clique em adicionar um gadget/HTML javascript e adicione o código HTML do novo cabeçalho criado pelo PowerPointe. Recomendo ler o tópico sobre como inserir um cabeçalho pelo HTML/javascript.

Espero ter ajudado e qualquer dúvida estarei a dispósição a responder qualquer pergunta postada.

Leia mais...