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

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

Como criar um banner usando o PowerPoint de maneira fácil

Olá galera do "blogando de verdade", neste tópico ensinarei como você criar um banner de maneira fácil e simples, sem quebrar a cabeça com vários programas, muitas das vezes até são bons, porém todos em lingua inglesa.

Então vamos lá. Mãos a obra:

1º abra o programa PowerPoint

Depois abra a aba disign (acima), depois clique na aba 'configurar página (canto superior esquerdo), abrirá esta tela abaixo.

Não mexa na configuração de largura, somente na configuração de altura.
Apague os números (aba altura) e escreva somente o número 5. Ou seja estamos configurando um banner em retângulo.

Clique no meio da parte onde irá escrever o nome do seu blog ou site, depois selecione a palavra criada na aba efeitos de forma. Figura abaixo.

Onde você irá dar um destaque bem legal. Clique na aba sombra, conforme figura abaixo e veja como está ficando o cabeçalho.

Obs. Abuse dos menus do PowerPoint, pois se não gostar clique CRT+Z que desfaze rá  Aperte quantas vezes for necessário.
Mude a cor das letras, a forma das letras, insera formatos, tabelas, cor do fundo, bordas e etc. Use sua criatividade, pois todos somos capazes de criar muitas coisas interessantes. Figura abaixo.

Quando for salvar, muita atenção! Pois se não alvar do modo adequado, não será possível usar na web.
Figura abaixo.

Peça para salvar, clique em: salvar como/outros formatos e nomeie seu cabeçalho de maneira que você preferir, pois recomendamos por em uma pasta especifica e fácil de ser encontrada depois. Atenção o tipo de imagem há ser salva tem que ser em "formato GIF", Conforme figura abaixo.

Pronto você já tem um banner simples e fácil de fazer no programa PowerPoint.
Se tiver dúvidas, pergunte que terei o prazer em responde-lá.
Obrigado e tenha uma ótima criação no seu banner!

Leia mais...

Como criar um site profissional usando NVU fácil! fácil!

Olá Galera do "Blogando de verdade" esse post é para ajudar aqueles que pretende iniciar no mundo da webmaster. Essas dicas são simples, porém recomendamos prestar atenção aos mínimos detalhes, pois são muito importante no aprendizado.

Quando surgir dúvidas, recomendamos perguntar logo abaixo da postagem.

Mãos a obra, baixe o programa NVU no site de download de sua preferência.

Provavelmente achará na versão em inglês, instale no pc e depois procure o TRADUTOR DO NVU para versão em português no site de download de sua preferência. Veja menus para link's

Feito...

Com programa instalado no pc:

1º clique na aba tabela, em destaque circulado em vermelho. Conforma figura 1

Abrirá a tabela, escolha, 1 para o cabeçalho, 1 para as postagens, três para propagandas ou a escolha e uma para o rodapé.

Figura 1

Ficará na seguinte forma e posição. Figura 2.
Obs: o espaço entre o cabeçalho e a postagens, acrescentará os menus:
Home ou Início/parte1/parte2/contato  só lembrando que ficará a seu critério, modificar
os menus. Porém recomendamos usar o Home na 1ª ordem, pois é padrão.

                                                                     Figura 2

O cabeçalho você irá editar, por o nome de seu blog ou site.
Na postagem, você irá por o assunto do blog ou site a seu critério.
Na tabela que está acomplado três, você poderá por qualquer assunto, a sua escolha.
No rodapé, você irá por o nome do seu site e agradecimento. É de praxe por: todos os direiotos reservados ao site FULANO.
Pronto. A estrutura do seu site/blog está pronta, agora vamos aos menus.

Estrutura do site com os menus entre o cabeçalho e a postagens.
Fisgura 3 abaixo.

Figura 3

Você terá que dar um ctr+c e depois abra uma nova página e cole a página completa, faça assim em todas
os menus. Não esqueça de salvar sempre as páginas.

                                                                   Figura 4

Agora você ira linkar os menus:
Selecione a aba na qual você vai linkar, e click em selecionar arquivo na telinha que se abrirá, e
abrirá a tela que você salvou quando salvou os menus individuais, conforme descrito acima. E selecione o index (home) a salve.
Repita o processo em cada menu salvo anteriormente.

Exemplos:
Home, será linkado na pasta Index/parte1 será linkado na pasta parte1/parte 2 será linkado na paret2/contato será linkado na pasta contato.
Pronto você ja tem uma estrutura de um site/blog e agora e só postar as matérias.

Ficará assim, note que os menus estando linkados mudarão a cor, é normal.

Lembrando, se tiver qualquer dúvidas, poste uma pergunta em baixo da materia que retornarei o mais breve possível.

Leia mais...