Criar um blog do Blogger

Olá galera do 'Blogando de Verdade' nesta tópico ensinarei a como criar um blog no Blogger, de maneira fácil e rápido. Hoje temos vários sites que nos oferecem ferramentas para criarmos um blog. Uns fáceis e outros difícil, entre eles o que mais chama atenção é o Blogger, pois além de ser fácil manuseio, ele possui forma de monetização, não que os outros não tenho, porém dar um pouco a mais de trabalho para configurar a monetização. então neste tópico ensinarei a como criar um blog de maneira fácil. Peço as pessoas mais entendidas que se quiserem opinar, questionar,  e fazer um comentário, por favor deixe logo abaixo da postagem.

vamos lá, mãos a obra.

1º Faça login com sua conta do blogger ou qualquer uma conta do google, se não tiver uma conta. crie uma no Blogger. clique aqui

2º Vai abrir uma a seguinte tela:

Crie um título e abaixo crie um endereço do blog.
Seu endereço vai ficar mais ou menos assim. exemplo (www.fulano.blogspot.com), quando estiver disponível aparecerá um ícone azul logo no final do endereço criado. Se for na cor amarela, significa que o endereço criado não está disponível. Apague e escreva outro, até estar disponível (azul).

Pronto, endereço de blog criado com sucesso agora vamos a parte da postagem:

Em destaque acima aba (nova postagem), você clicará para criar uma postagem nova.
É na aba (postagem), você tem todas as postagens criadas por você, e onde você poderá editar as postagens já criadas e compartilhadas.
Na aba páginas tem a opção de criar os menus ou marcadores e poderá ficar de lado no blog ou na parte superior, sendo padrão: início/parte1/parte2/contato e etc.

Postagem;
Em título da postagem: você põe o título da postagem e depois clique na parte de baixo, onde será o texto da postagem.

Em link: você poderá linkar uma palavra, frase ou texto a outras postagens. Como fazer: Selecione a frase, palavra ou texto e em seguida clique na palavra LINK acima (azul).
Mas o que é limkar? lincar nada mais é do que marca uma palavra ou frase para ser clicado, ao clicar será direcionado a outra postagem, site e etc, opcional.

Em imagem: você poderá inserir uma imagem ao seu post (postagem) de maneira rápida e fácil.

Em video: você poderá inserir um video na postagem, de maneira rápido e fácil.

Você poderá usar os botões acima da postagem para centralizar, enumerar, corrigir texto, mudar letra, paragrafo e etc. Depois é só clicar em salvar e logo em seguida em publicar ambos acima do post.
Não esqueça de antes clicar em visualizar a postagem, pois se não tiver ok! poderá editar ainda, antes de publicar.

Ob. Essas dicas foram criada com um intuito de ensinar pessoas que não tem ou que tenha pouco conhecimento sobre o assunto. Muitos podem achar fácil criar um blog, porém como no começo sofri muito para criar um blog, resolvi compartilhar na web.

Dúvidas, comentários e só postar em baixo.

Leia mais...

Códigos das cores HTML

Algumas das principais cores em códigos HTML:

Tabela de cores e seus códigos HTML

Leia mais...

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...