COLOCAR TOP COMENTARISTA NO BLOG




PRIMEIRO PASSO VOU EM LAYOUT


DEPOIS ADICINAR GADGET




CLICAR EM HTML/JAVA SCRIPT



COLOCAR O TÍTULO TOP COMENTARISTA
E COLAR O CÓDIGO ABAIXO.  SALVAR E ARRASTAR O GADGET PARA POSICONAR ONDE QUISER


<style type="text/css">
.top-commenter-line,.top-commenter-line a, .top-commenter-line .profile-name-link a{
font-family:, arial, sans-serif;
color: #000000; 
text-decoration: none;
font-size: 14px;
}
.top-commenter-line:hover,.top-commenter-line a:hover, .top-commenter-line .profile-name-link a:hover{
color: #000000; 
text-shadow: 0px 1px 1px #000000;
font-size: 14px; 
text-decoration: none;
}
.top-commenter-line {
margin: 3px 0;
}
.top-commenter-line .profile-name-link {
padding-left:0;
}
.top-commenter-avatar {
vertical-align:middle;
}
ul.top-commenter {
list-style:none;
margin:0;
padding:0;
}
.top-commenter li{
background:none !important;
margin:0 0 6px !important;
padding:0 0 6px 0 !important;
display:block;
clear:both;
overflow:hidden;
list-style:none;
}
.top-commenter li.top-commenter-avatar{ padding:3px;
background:#fefefe;
-webkit-box-shadow:0 1px 1px #ccc;
-moz-box-shadow:0 1px 1px #ccc;
box-shadow:0 1px 1px #ccc;
float:left;
margin:0 6px 0 0;
position:relative;
overflow:hidden;
}
.top-commenter-avatar{
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
border:solid 2px #cccccc;
}
.top-commenter li img{
padding:0px;
position:relative;
overflow:hidden;
display:block;
}
.top-commenter li span{
margin-top:4px;
color: #666;
display: block;
font-size: 12px;
font-style: italic;
line-height: 1.4;
}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://passosparafazerumblog.blogspot.com/
//
// CONFIG:
var maxTopCommenters = 10;   // quantidade de comentaristas que será mostrada
var minComments = 1;        // mínimo de comentários para figurar na lista
var numDays = 30;            // top comentaristas dos últimos 30 dias
var excludeMe = true;       // excluir comentários do autor
var excludeUsers = ["Letícia Sanches"];     // exclua esse usarname
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 50;
var cropAvatar = true;
//
var urlNoAvatar = "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;

  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;

  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");

  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';

  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();

  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }

  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;

    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;

    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }

  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);

  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });

  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}  
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

BARRA DE ROLAGEM NOS MARCADORES DO BLOG

arra de Rolagem nos Marcadores do Blogger


Vamos usar como exemplo como colocar uma barra de rolagem nos marcadores do blog, mas como já falamos isso funciona em qualquer gadget. Então o primeiro passo é saber qual é a id do gadget que deseja colocar a barra de rolagem. No caso dos marcadores do blog é #Label1. Então você precisa adicionar o código da barra de rolagem:

#Label1 .widget-content{height:300px; width:auto;overflow:auto;}

ACIMA ESTOU USANDO 3, PARA DOIS MARCADORES E PARA OS COMENTÁRIOS.

Isso pode ser feito na pagina editar HTML usando o Ctrl F para achar: ]]></b:skin> e colocando o código antes dele. Ou através da pagina personalizar onde podemos abrir uma janela para adicionar códigos CSS no Blogger (personalizar > Avançado > Adicionar CSS). Se precisar ajuda para colocar o código no blog clique nos links abaixo e achará mais detalhes:

Achar Códigos na Pagina Editar HTML do Blogger - Ctrl F

Como Inserir Códigos no Blogger: Formatar Texto e Links do Blog

Ajuste o valor 300, ele é o tamanho da barra de rolagem. Outro detalhe interessante é que esse código coloca a barra de rolagem apenas no conteúdo do gadget deixando o titulo sempre amostra, mas se quiser incluir o titulo do gadget dentro da barra de rolagem apague o trecho .widget-content (inclusive o ponto).

USAR IMAGEM COMO LINK PARA ABRIR UMA PÁGINA

EM LAYOUT CLIQUE EM ADICIONAR UM  GADGET




CLIQUE EM  IMAGEM COMO ABAIXO








EU JÁ ESCOLHI A MINHA IMAGEM




QUANDO CLICAR EM IMAGEM VAI ABRIR ESSA PÁGINA ABAIXO:


NA SETA VERMELHA APAGUE O HTTP CASO VOCÊ COPIOU O LINK DA PÁGINA QUE VOCÊ QUER QUE A IMAGEM DIRECIONE.




ESCOLHA O ARQUIVO DE IMAGEM E CLIQUE ONDE INDICA A SETA PRETA- ESCOLHER ARQUIVO

CLIQUE EM REDUZIR PARA AJUSTAR A IMAGEM.

ESPECIFIQUE PARA ONDE ESSE LINK VAI ABRIR EM TÍTULO. NÃO PRECISA ESCREVER NADA NA LEGENDA SÓ SE VOCÊ  QUISER.

FICARÁ ASSIM




O LINK

COMO CONSEGUI?

TODA POSTAGEM TEM UM MARCADOR, EU PUBLIQUEI ANTES A PÁGINA QUE EU GOSTARIA QUE ABRISSE NESSA IMAGEM, E FUI NO MARCADOR E ABRI A PÁGINA. COPIEI O ENDEREÇO DELA E COLEI NO LINK ACIMA. COMO DEI UM  (CTRL C E CTRL V), TIREI O HTTP QUE VINHA NO GADGET

ABAIXO O LINK DA PÁGINA QUE COPIEI





1 PASSO - FAZER UM EMAIL NA GOOGLE


É  fácil e simples fazer seu blog no Blogspot. Em poucos passos você se tornara um blogueiro.

Esse tutorial baseia na criação de um blog no site blogspot.com, um dos sites do Google.

Como fazer um Blog Blogspot?

Primeiro passo

Abra uma conta de EMAIL NA GOOGLE

CLIQUE EM CRIAR CONTA COMO ABAIXO






Nome de usuário para criar seu email

Na pagina seguinte coloque o seu nome no primeiro campo e seu sobrenome no campo ao lado.

Abaixo campo para escolher o nome do usuário no Gmail é muito importante esse campo por que será seu endereço de email (seuemail@gmail.com). Então escolha bem o nome do usuário, pois não será possível modificar depois. Para ajudar o Gmail oferece sugestões de nomes disponíveis, mas não é obrigado a segui-las.



Escolha a senha do email do Google

O próximo campo você escolherá a senha, para seu Gmail. E importante uma combinação de letras maiúsculas e minúsculas com alguns dígitos para fazer uma senha forte. Ao digitar sua senha, uma espécie de medidor que indica a força da senha, assim saberá se sua senha é forte ou não; o mínimo é de 8 caracteres para serem digitados.



Como preencher seu contato no Gmail

Preenchas os campos de nascimento e sexo, que são intuitivos. Caso esteja criando o email para sua empresa, selecione a opção “outro” no campo sexo. Logo abaixo estão os campos que permitem ao Google entrar em contato para o caso de invasão de conta ou recuperação de senha, são eles: email de outro provedor e celular.


No campo celular coloque o número de um celular que você tenha acesso, pois por esse numero recebera mensagens SMS em caso de perda de senha. No campo email coloque outro endereço de email, que possua de outro provedor. Esses dois campos são importantes, pois servem como meio de comunicação entre você e o Google quando for preciso confirmar o titular da conta.


Verificação do Gmail

Você tem duas opções para confirmar se você é pessoa, e não um programa automatizado que está criando a conta. Você pode confirmar a conta digitando as letras que aparecem na imagem ou pode marcar a opção logo acima onde pula a confirmação no momento do cadastro, só que depois terá que confirmado via sms enviado para seu celular, mas lembre-se de ter digitado seu número de celular no campo acima.


Na maior parte das vezes o campo localização está correto, caso contrário, selecione o seu país.
Por fim é preciso marcar a caixa é onde você concorda com os termos de uso. E clicar em “Próxima etapa”

 Seu email está pronto!





2 PASSO - COMO FAZER UM BLOG NO BLOGSPOT




APÓS FAZER SUA CONTA DE EMAIL NA GOOGLE, ABRA A PAGINA


 https://www.blogger.com

O Blogspot é um site do Google e é gratuito.

Caso você tenha email, mas não está logado, entre com seu email da google e senha;  
Caso essa página apareça, escolha a opção perfil do google +



COLOQUE SUA FOTO OU ALGUMA IMAGEM


DEFINA COMO  PERFIL E PULE TODAS AS ETAPAS SEGUINTES ATÉ ENTRAR NESSA PÁGINA ABAIXO




CLIQUE “Novo Blog” aparecera logo de cara no painel principal.




 Uma tela aparecera onde você deve dar titulo ao blog e criar um endereço. 


No endereço você definira a URL do seu blog o resultado é parecido com este “http://nomedoseublog.blogspot.com”.

Caso tenha domínio próprio ou compre depois ha possibilidade de configurar para novo domínio.
Depois de ter preenchido todos estes dados corretamente, é hora de escolher um modelo de layout para o seu blog.

OBS: NEM SEMPRE O DOMÍNIO QUE VOCÊ ESCOLHER ESTARÁ DISPONÍVEL, ENTÃO VOCÊ TERÁ QUE SER CRIATIVO(A) E ESCOLHER UM QUE NÃO TENHA NO MEIO VIRTUAL;


Na tela abaixo aparecerão alguns modelos não se preocupe neste primeiro momento você pode escolher qualquer um – existem muitos outros modelos para você deixar o seu blog com a sua cara.

EU ESCOLHI O ESPETACULAR LTDA


Quando você já tiver escolhido qual será o primeiro layout, clique em “Criar Blog” e pronto! Seu blog está pronto!

3 - PASSO - POSTAGENS

DEPOIS DE FAZER O SEU BLOG

Vai aparecer essa página, clique no blog que vc criou.




AO CLICAR APARECERÁ ESSA PÁGINA





Como fazer seu primeiro post?

Para fazer seu primeiro posts  você pode clicar em “postagem” ou no ícone de uma caneta laranjada, Como na figura acima.

Você será redirecionado automaticamente para a página de novas postagens.




Digite um titulo e escreva um texto da sua postagem. 

No marcador coloque o título da sua postagem.O marcador nada mais é que o índice. Ele é muito importante para os internautas acharem as suas postagens.

Se você quiser acrescentar IMAGENS, ela tem que estar disponível no seu PC. É só clicar no quadradinho como indicado abaixo, e clicar no escolher arquivo, procure na sua pasta e depois em baixo clique adicionar selecionado;

ACRESCENTAR VIDEOS

É o mesmo processo da imagem, você clica no quadradinho como a abaixo indicado;


E é só escolher a opção fornecida, como videos do youtube, onde você coloca o nome do video e ele fará uma busca no youtube, ou carregar seu video, que você vai procurar na pasta do seu PC.

DEPOIS QUE VOCÊ COLOCAR O CONTEÚDO, IMAGENS OU VÍDEOS VOCÊ PODERÁ A QUALQUER MOMENTO VISUALISAR SUA POSTAGEM.
COMO MOSTRA ABAIXO.





DO LADO ESQUERDO EM VISUALIZAR BLOG VOCÊ VISUALIZA SEU BLOG E NO CANTO DIREITO EM VISUALIZAR VOCÊ VISUALIZA COMO FICARÁ SUA POSTAGEM


Quando terminar a edição do seu texto, basta clicar em “Publicar” para que o conteúdo seja enviado para a página principal do seu blog.




PARA LIBERAR AS POSTAGENS NO GOOGLE MAIS CLIQUE COMO ABAIXO NO MEGAFONE LARANJA INDICADO NA FIGURA


COMO FICARÁ DISPOSTA DENTRO DO BLOG SUAS POSTAGENS...





DEPOIS DE ALGUMAS POSTAGENS;

Eu costumo mexer na formatação do blog após postar algumas postagens. Por quê? 
Você poderá na hora de formartar visualizar melhor a formatação. Pois sem conteúdo, é impossível você configurá-lo.

MAS ISSO VEREMOS MAIS PARA FRENTE!!!!


4- PASSO - LAYOUT DO BLOG

TUDO QUE VOCÊ FOR ACRESCENTAR OU TIRAR EM SEU BLOG, VOCÊ USARÁ O LAYOUT


É possível editar e personalizar o layout do blog de maneira fácil e rápida, sem precisar ter conhecimentos de HTML ou CSS. Com apenas alguns cliques você pode mudar as fontes, o cabeçalho e a barra lateral do blog, nessa página você aprenderá como.
Além disso, seu blog é divido em: cabeçalho, postagem, aplicativos e rodapé.

A vantagem dos GADGET  é que eles são modulares, e por isso podem ser adicionados, alterados e removidos de maneira independente. Segurando o GADGET, você poderá mudá-los de posição.


Para começar a editar seu blog  clique no botão “Layout” do blog que você deseja modificar.


AO CLICAR IRÁ ABRIR ESSA PAGINA


AQUI VOCÊ ATRAVÉS DOS GADGET, PODERÁ ACRESCENTAR ELEMENTOS AO SEU BLOG COMO: 



ESSES SÃO ALGUNS GADGET QUE PODEMOS ADICIONAR

VAMOS ADICIONAR OS PRINCIPAIS

COMO?
MUITO FÁCIL, CLIQUE EM ADICIONAR UM GADGET





CLIQUE EM ESTATÍSTICAS DO BLOG



ESCOLHA DE ACORDO COM SEU GOSTO!


EU ESCOLHI ESSE



Depois de selecionar clique em Salvar

5- PASSO - GADGET ÚTEIS

TODOS OS GADGET PARA ADICIONAR NÃO ESQUEÇA DE QUE VOCÊ SÓ PODERÁ COLOCÁ-LOS NO LAYOUT E DEPOIS ADICIONAR GADGET

AQUI:








 Marcadores: ELE É O ÍNDICE DO SEU BLOG.




CLIQUE NO MARCADORES, IRÁ ABRIR A TELA ABAIXO





EXISTEM DOIS TIPOS, DE MARCADORES: TODOS MARCADORES E SELECIONADOS

SE VOCÊ ESCOLHER O SELECIONADOS, TERÁ QUE MARCAR UM POR UM, COLOCANDO UM TITULO
POIS MARCADORES SELECIONADOS SERVEM PARA FAZER SEPARAÇÃO DE POSTAGENS.
EXEMPLO UM BLOG DE DIETA, EU SEPARO O MARCADOR DE RECEITAS E SÓ CLICO NAS RECEITAS E OUTRO EU FAÇO OUTRO MARCADOR E SÓ CLICO EM EXERCÍCIOS

LISTA E CLOUD

LISTA É MAIS ORGANIZADO VISUALMENTE
JÁ O CLOUD FICA MAIS JUNTO  O ÍNDICE.
TESTE E VERÁ A DIFERENÇA


ESCOLHA E CLIQUE EM SALVAR

POSTAGENS POPULARES





CLICANDO ABRIRÁ ESSA PÁGINA






É SÓ ESCOLHER E SALVAR

OUTROS GADGET


LISTA DE BLOGS 

VOCÊ PODE ACRESCENTAR ESSE GADGET CASO QUEIRA DIVULGAR BLOGS INTERESSANTES, DE AMIGOS ETC.





QUANDO CONFIGURAR OS BLOGS SUGIRO QUE CLIQUE EM TODOS OS ESPAÇOS COMO ACIMA(ÍCONE, TÍTULO DO ITEM MAIS RECENTE, SNIPPET, DATA )
E DEPOIS CLIQUE ADICIONAR UM BLOG Á SUA LISTA

ABRIRÁ A PÁG ABAIXO:





É SÓ COLOCAR A URL COMO FIZ ACIMA E CLICAR ADICIONAR


OUTROS GADGET ÚTEIS SÃO : TRADUTOR, CAIXA DE PESQUISA....




NAVBAR


FIGURA 1





É POSSÍVEL ESCOLHER AS CORES DO NAVBAR QUE FICA ACIMA DE SEU BLOG E DESATIVÁ-LO. CLICANDO VOCÊ ABRIRÁ A PAG ABAIXO E FARÁ AS ESCOLHAS


FIGURA 2



COMO PODERMOS VER  NA FIGURA 1, QUE É A PÁGINA DO LAYOUT, PODEMOS MUDAR AS POSIÇÕES DOS GADGET. 

COMO?
É SÓ SEGURAR COM O MOUSE COM O BOTÃO ESQUERDO E CARREGAR O GADGET.

ENTÃO CADA UM DESSES QUADRADINHOS SÃO MÓVEIS, VEJA ABAIXO:



COMO COLOCAR O GLOBINHO DE ON LINES?


CLIQUE NA PÁGINA

http://www.revolvermaps.com/?target=setup
NESSA PÁGINA:

ESCOLHA SEU GLOBINHO  ACIMA

ABAIXO ESCOLHA O TAMANHO




CLIQUE EM VISITOR COUNTER
DEPOIS COPIE O CÓDIGO NO QUADRADO Nº 5

VOCÊ VAI COLAR EM:

EM LAYOUT ADICIONE UM GADEGT, COMO NO PASSO 4




ACHE  HTML/JAVA SCRIPT 





E COLE DENTRO DO QUADRADO COMO EU FIZ ABAIXO:




NÃO PRECISA POR TÍTULO, SALVE