02/01/2013

Gadget "Status do Blog" - Como colocar!

|| || ||

Haha! Primeiro tutorial do blog! Animados? Vamos lá!
Você já deve ter tido o desejo de colocar todas as informações do seu blog em um só espaço, como eu. Bom eu aprendi e vim repassar para vocês!
A gadget que você estará colocando no seu blog será mais ou menos assim:



Para instalar é só colocar um código abaixo em um gadget de HTML/Javascript:
<style>
/*Gagdet Status por www.cherry-liah.blogspot.com*/
.stats {
border-bottom: 1px dotted #000;width: 180px;
}
</style>
<div class="stats"><img src="http://i45.tinypic.com/2cnz79i.jpg"/><script style="text/javascript">
function numberOfPosts(json) {
document.write('Posts: <i>' + json.feed.openSearch$totalResults.$t + '</i><br>');
}</script>
<script src="URL_SEU_BLOG/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></div>
<div class="stats"><img src="http://i45.tinypic.com/17y71f.jpg"/><script style="text/javascript">function numberOfComments(json) {
document.write('Comentários: <i>' + json.feed.openSearch$totalResults.$t + '</i><br>');
}</script>
<script src="URL_SEU_BLOG/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></div>
<div class="stats"><img src="http://i46.tinypic.com/okwuaq.jpg"/><script language="JavaScript" type="text/javascript" src="http://www.usuariosonline.org/ver.php?domain=URL_SEU_BLOG" charset="ISO-8859-1"></script> usuários online</a>
</div>
Após colar esse código, você terá que fazer algumas mudanças. A parte do código destacado de vermelho, você ira substituir pelo endereço do seu blog com o http:// na frente exemplo: 
 <script src="http://stay-strong-oficial.blogspot.com.br//feeds/(...)  Você irá fazer isso em todos os trechos destacados.

Você pode alterar as imagens do gadget, por uma que preferir, é só substituir os links destacados de rosa pelo URL da imagem que preferir.

Depois é só salvar o Gadget!
Nem é tãão difícil assim! 

Gostaram? Em breve temos mais!
Beijinhos!
- A garota do Blog

Deixando os créditos ao blog: Cherry Bomb por ter me ajudado a aprender como fazer e pelo código fornecido!

4 comentários:

  1. Realmente , valeu pela ajuda. Já estou seguindo. Segue de volta ??? Valeu pelo tutoriaal !!!

    By: Sarah Vitória
    Http://atual-sempre.blogspot.com.br

    ResponderExcluir
  2. Muito obrigada pela ajuda! se puder dá uma passadinha no meu blog
    princes-kawaii.blogspot.com.br

    ResponderExcluir

Hey!
Pode comentar a vontade, eu adoorooo ler seus comentários! s2
Deixe o link do seu blog (se tiver) visito e sigo numa boa!
Beijuux!