segunda-feira, 30 de maio de 2011

ADICIONANDO WIDGET SOCIAL BOOKMARKING (CSS/JQUERY)

social 
Olá amigos, hoje estarei ensinando a vocês de com adicionar um bonito Widget  Social Bookmarking (CSS/JQuery) Veja a demonstração aqui.
 

Como adicionar esse widget com CSS3

1. Ir para Blogger Dashboard > Design > Editar HTML

2. Marque a checkbox   Expandir modelos Widgets

3. Adicionar o código abaixo imediatamente antes da tag </head>


<style type="text/css">/* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; } /* www.way2blogging.org */ ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; } ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } /* www.way2blogging.org */ ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);} /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-facebook { background-image:url("http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/s1600/way2blogging-facebook.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-twitter { background-image:url("http://lh4.googleusercontent.com/-5ZvxVwDY5H4/TYAyiGsT2WI/AAAAAAAAAd8/Farwy9vHqjU/s1600/way2blogging-twitter.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("http://lh5.googleusercontent.com/-jg3XFSK3GF0/TYAygs6-mQI/AAAAAAAAAdo/PVRayMMzHE4/s1600/way2blogging-googlebuzz.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/way2blogging-stumbleupon.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-digg { background-image:url("http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/way2blogging-digg.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-delicious { background-image:url("http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/way2blogging-delicious.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-linkedin { background-image:url("http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/way2blogging-linkedin.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-reddit { background-image:url("http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/way2blogging-reddit.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-technorati { background-image:url("http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/s1600/way2blogging-technorati.png"); } /* www.way2blogging.org */ #way2blogging-cssanime:hover li { opacity:0.2; } /* www.way2blogging.org */ #way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } /* www.way2blogging.org */ #way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } /* www.way2blogging.org */ #way2blogging-cssanime li:hover { opacity:1; } /* www.way2blogging.org */ #way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; } /* www.way2blogging.org *//* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */</style>

4. Pesquisar pela tag <data:post.body/>


E adicione o código abaixo logo após ele!

<b:if cond='data:blog.pageType == &quot;item&quot;'> <ul class='way2blogging-social' id='way2blogging-cssanime'> <li class='way2blogging-facebook'> <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a> </li> <li class='way2blogging-twitter'> <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a> </li> <li class='way2blogging-googlebuzz'> <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a> </li> <li class='way2blogging-stumbleupon'> <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a> </li> <li class='way2blogging-digg'> <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a> </li> <li class='way2blogging-delicious'> <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a> </li> <li class='way2blogging-linkedin'> <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a> </li> <li class='way2blogging-reddit'> <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a> </li> <li class='way2blogging-technorati'> <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a> </li> </ul></b:if>

5. Salve o modelo e pronto...

Como adicionar esse widget com Jquery

1. Ir para  Blogger Dashboard > Design > Editar HTML
2. Marque checkbox Expandir modelos de widgets

3. Adicione o seguinte código antes da tag </head>


<style type="text/css">/* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; } /* www.way2blogging.org */ ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; } ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } /* www.way2blogging.org */ ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);} /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-facebook { background-image:url("http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/s1600/way2blogging-facebook.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-twitter { background-image:url("http://lh4.googleusercontent.com/-5ZvxVwDY5H4/TYAyiGsT2WI/AAAAAAAAAd8/Farwy9vHqjU/s1600/way2blogging-twitter.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("http://lh5.googleusercontent.com/-jg3XFSK3GF0/TYAygs6-mQI/AAAAAAAAAdo/PVRayMMzHE4/s1600/way2blogging-googlebuzz.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/way2blogging-stumbleupon.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-digg { background-image:url("http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/way2blogging-digg.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-delicious { background-image:url("http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/way2blogging-delicious.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-linkedin { background-image:url("http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/way2blogging-linkedin.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-reddit { background-image:url("http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/way2blogging-reddit.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-technorati { background-image:url("http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/s1600/way2blogging-technorati.png"); } /* www.way2blogging.org *//* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><script type="text/javascript">// Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org $(document).ready(function () { $("#way2blogging-jqueryanime li").each(function () { $("a strong", this).css("opacity", "0"); }); $( }); $("#way2blogging-jqueryanime li").hover(function () { $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 0.2); $( $("a strong", this).stop().animate({ opacity:
opacity: 1, top:
top: "-10px" }, 300); },
}, function () { $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 1); $( $("a strong", this).stop().animate({ opacity:
opacity: 0, top:
top: "-1px" }, 300); }); });
}); });// Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org </script>

4. Pesquisar pela tag <data:post.body/>

E adicione o código abaixo logo após essa tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <ul class='way2blogging-social' id='way2blogging-jqueryanime'> <li class='way2blogging-facebook'> <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a> </li> <li class='way2blogging-twitter'> <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a> </li> <li class='way2blogging-googlebuzz'> <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on Google Buzz'><strong>Google Buzz</strong></a> </li> <li class='way2blogging-stumbleupon'> <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a> </li> <li class='way2blogging-digg'> <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a> </li> <li class='way2blogging-delicious'> <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a> </li> <li class='way2blogging-linkedin'> <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a> </li> <li class='way2blogging-reddit'> <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a> </li> <li class='way2blogging-technorati'> <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a> </li> </ul></b:if>

Salve seu modelo e você já poderá ver em seu blogger.

Marcadores: , , , , ,

6 Extensões Google Chrome para Blogueiros

Extensões para o ChromeO Google Chrome tem mostrado grande diante dos demais navegadores,  e assim como os outros, o navegador do Google também tem suas extensões para expandir o navegador, colocando mais recursos e utilitários para nossa melhor e mais rápida navegação.

Entre as extensões contida na página de extensões para o Google Chrome, destaquei as 6 mais úteis para nós blogueiros. Confira a lista:

ScribeFireScribeFire
Editor de blogs, permite criar postagens diretamente por ele.

Botão "Postar isso no blog!"

Botão "Postar isso no blog!"
Acrecenta um botão “Postar isso no blog” na barra de ferramentas do seu navegador, possibilitando portar de qualquer site que você esteja.

Captura de imagem

Screen Capture (by Google)
Capture áreas de um determinado site, edite, salve ou exporte deiretamente para um serviço online de hospedagem de maneira rápida e prática.

Editor HTML

HTML Editor
Simples Editor HTML para desenvolver códigos.

Tradutor do Google

Google Translate
Extensão para traduzir páginas da web para a linguagem eu você quiser.

SEO

Chrome SEO
Exibe Estatíticas sobre seu blog, como números de páginas indexadas no sites, Backlinks, Pagerank e outros.

Marcadores: , ,

Posts recentes headline com o feed burner

Códigos Blogger

↑ Grab this Headline Animator

Configurando

No site do Feed Burner existe uma página bem interessante onde podemos criar um gadget de posts imagerecentes bem bacana pra colocar no nosso blog. Você pode editar este gadget, alterando as cores e o tamanho para que se adapte melhor em seu blog.

Para adquirir este gadget, entre na página do gadget para configurar o mesmo clicando aqui. (Coloque sua conta google par logar se necessário). Ao entrar, faça as devidades alterações deixando do seu jeito.

Atualizações recentes Feed Burner 

Instalando no blogger

Depois de ter feito todas as modificações possíveis, clique no botão “Activate”. Na parte superior da modificação você vai encontrar a seguinte parte:

Atualizações com FeedBurner

Nessa parte, coloque “Blogger Blog” no menu suspendo, em seguida clique em “NEXT”.
Será aberta a seguinte janela:

Atualizações com FeedBurner

Nesta, você só vai desmacar a opção “Include a Grab this link” e clicar em “Add to Blogger”,.

Na próxima etapa para inserção do gadget em seu blog, será necessário colocar o blog no qual você quer colocar, inserir um título, e por fim clicar em “Adicionar Widget”. Depois mova o acessório pra qualquer lugar do seu blog.

image

Marcadores: , , , , ,

Como colocar o Twitter Counter no Blogger

Bom pessoal estarei ensinando de como colocar o Twitter Counter em seu blogger, então vamos lá primeiramente você acessa este site http://twittercounter.com/pages/twitter-widget em:

Customize your Twitter widget

Your Twitter username = coloque seu id do twitter

Clique em Generate Code e copie o Java Script e cole em seu blogger, você tambem pode personalizar a seu gosto, tipo texto, fundo e etc... até o próximo tutorial

Marcadores: , ,

Top 30 Widgets e Plugins do Blogger

A plataforma Blogger sofreu grandes melhorias nos últimos dois anos. Não só a equipe de desenvolvimento do Blogger tem várias novas funcionalidades para a plataforma, mas o novo Blogger inúmeros modelos estão sendo desenvolvidos em todo o mundo. Aqui estão algumas dos melhores widgets e plugins para o blog no Blogger, que pode incrementar seu blog para uma melhor experiência do leitor.
 
1. Top Commentators Widget by BloggerPlugins - Este excelente plugin tem duas versões. Um dos blogs com pequeno número de observações e a segunda variante para blogs recebendo muitos comentários.

2. Translation Widget by BloggerPlugins - Um widget que adiciona suporte a múltiplos idiomas para tradução de seu blogger.
  
3. Recent Post Widget by BloggerPlugins - Este widget é altamente  customizável. Você pode ajustar o número de posts do blogger para mostrar, divulgar e resumo do comprimento dos posts.

4. Recent Comments Widget by BloggerPlugins - Um elemento altamente personalizável. Você pode definir o número de comentários para mostrar, nome do autor, data e tamanho do comentário. Você também pode usar CSS para o gel com o tema.

5. Label Cloud Plugin by phydeaux3Este é um dos mais populares geração etiqueta de nuvem plugin para o blogger. Você pode personalizar diversas opções depois de instalar este plugin. 

6. Archive Calendar Widget by PurpleMoggy - Um widget de calendário arquivo impressionante  com opções personalizáveis.  

7. Archive Calendar Widget by phydeaux3 Outro widget de arquivo calendário muito popular . Altamente customizável para melhor experiência de navegação para os leitores.

8. Recent Posts Widget by Feed2JSEste excelente plugin plugin faz a instalação e personalização muito fácil. Basta preencher o formulário e clique no botão para gerar o código do widget.

9. Recent Comments Widgets by Blogger-Templates - Basta preencher as opções no formulário e clique para gerar o código do widget. Excelente plugin, que é altamente personalizável. 
   
10. Picasa Web Albums Slideshow Widget by Blogger Templates Designs - Um único plugin para mostrar o slideshow de fotos a partir de qualquer conta do Picasa. Ideal para blogs pessoais, blogs de fotos e blogs design web.

11. Search Form Widget by Blogger Templates Designs - Se você quiser adicionar a caixa de pesquisa do site na barra lateral do seu blog, instale esse plugin.

12. Google Talk Widget by Blogger Templates DesignsEste plugin adiciona o cliente do Google Talk em seu blog para que seus leitores podem diretamente conversar com você.

13. Recent Comments Widget by Blogger Templates Designs - Outro Widget com comentários recentes  com opções personalizáveis ​​e com apenas um clique você instala instala.  

14. Sudoku Game Widget by Blogger Templates Designs - Quer adicionar alguns jogos puzzle interessante para seus visitantes? Então instale este plugin para integrar o jogo de sudoku em seu blog Blogger. 

15. Google Translate Mini-Flags Widget by MadToMatoeMuito útil este plugin que é desenvolvido por "Google Translate". Um clique você instala com facilidade as múltiplas língua de tradução. 

16. Recent Comments Widgets by MadToMatoe -
  Widget com Comentários recentes, novamente você pode personalizar o número de comentários recentes a serem exibidos.

17. Reactions Mini-Poll Widget by ThemeLib - Quer colocar uma enquete no seu blog? Instale este plugin e começa as pesquisa personalizadas para seus leitores. 
 
18. Alexa Traffic Widget by TechKnowl -
Mostrar suas estatísticas  com este widget customizável.  

19. Snow Flakes Widget by TechKnowl - Adicione um efeito de neve deslumbrante em seu modelo de blogger na época festiva.

20. Popular Posts Widget by TechKnowl - Um mensagens muito simples plugin popular utilizando tubos Yahoo para filtrar as mensagens populares em seu blog.

21. Flash MP3 Player Widget by TechKnowlEste  plugin permite que você possa inserir flash player mp3 no seu blog Blogger. O jogador é muito leve, com opções personalizadas.

22. Rating Widget by Outbrain - Se você deseja integrar o sistema de classificação com as suas postagens no blogger, então este excelente plugin é a melhor escolha. Possui sistema de classificação mais posts relacionados com a integração no mesmo widget.

23. Multi-tab TOC Widget by Beautiful Beta - Se você deseja exibir guia multi-tabela de conteúdos na seção do seu blog do Blogger, instale esse widget. Muito popular entre os usuários do Blogger. 

24. Tab View Widget by Hoctro - O mais legal plugin que mostra mensagens de abas com trechos de post animado, na barra lateral do seu blog. 

25. Random/Rotating Banner Widget by FreeYaSoul - Widget muito útil para exibir banners no cabeçalho do seu blog. Você pode personalizar e pode escolher qualquer número de cabeçalhos.

26. Social Bookmarking Widget by Lasvak
Este é talvez o elemento mais facilmente instalável bookmarking para Blogger. Basta copiar e colar uma única linha de código no seu template do Blogger e seus ícones favoritos estão prontos.

27. Paypal Donation Widgets by EtienneIntegrar diferentes tipos de doação paypal widget em seu blog no Blogger com facilidade.

28. Podcating Plugin by Talkr - Se você deseja integrar podcasts em seu blog, registo para este serviço e obter podcasting plugin grátis para seu blog no Blogger.

29. What's Next? Section Widget by eblogtemplates - Integrar um estilo Wordpress 'What's Next'na seção abaixo blogger com este widget excelente.

30. Twitter Profile Widget by BloggerBuster -
seu perfil no Twitter e atualiza Twitter com este útil plugin desenvolvido por Amanda Fazani.

31. Bookmarking Widget by SocioFluid -
Uma das melhores bookmarking social plugin para o Blogger. Grandes ícones animados com uma instalação do clique.
 
32. Advanced Recent Comments Widget by Csabi -
Este é altamente personalizável widget comentários recentes. O número de opções configuráveis ​​fornecidas por este widget torna um dos melhores widgets comentário recente para a plataforma blogger.

Olá pessoal espero que vocês tem gostado, e comentem ai, qualquer sobre de como utilizar algun dos plugins deixe seu comentário que estarei fazendo um tutorial do plugin especifico...
 

Marcadores: , ,

Como adicionar o Twitter Box no blog

Tem sido um longo tempo desde que lançou o Twitter @ @ AnyWhere Developer Tool. AnyWhere lhe permite integrar o Twitter em seu site usando algumas linhas de JavaScript. Você pode ler mais sobre ele em @ AnyWhere desenvolvedor da página. Tweet Box é um desses @ AnyWhere aplicativo, que permite que você adicione Tweet Box em seu blog.

Aqui está a tela de captura do twitter box de como vai aparecer em seu blog.

Espero que agora você tem uma boa idéia de como isso funciona, se não rolar para o fundo do post e vê-lo em ação ao vivo:)

Como adicionar o Box Twitter em um blog do Blogger?

1. Primeiramente Clique aqui para entrar no site  desenvolvedores de página e criar uma conta lá com detalhes de seu bog .


Certifique-se que você marcou a opção de (Read & Write) leitura e gravação ao registrar sua conta

2. Quando você concluir o processo de inscrição, você receberá alguns códigos JavaScript, com uma única API Key

Copie o JavaScript de lá (o código na caixa vermelha), como mostrado nesta imagem.

3. Entrar para o seu Painel do Blogger e navegue até a guia Editar HTML e em Design "Expandir o modelos de widgets"

4. Procure por:
</head>
e cole o JavaScript Twitter copiado  logo acima dessa linha e salvar o modelo.

5. Procure por:

<data:post.body/>
e, imediatamente abaixo cole o seguinte código JavaScript e salvar o seu modelo. (Partes editáveis ​​são mostrados em vermelho)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bp_tweetBox'/>
<script type='text/javascript'>
bp_tweet_link=&quot;<data:post.url/>&quot;;
twttr.anywhere(function (T) {
T(&quot;#bp_tweetBox&quot;).tweetBox({
width: 560,
label: &quot;Share the L&#10084;ve  &amp; Retweet&quot;,
defaultContent: &quot;RT @Cblogger <data:post.title/>&quot;+&quot; &quot;+bp_tweet_link
});
});
</script>
</b:if>
Agora você deve ver a caixa Tweet em todas as páginas do seu post e até o próximo tutorial...

Marcadores: , , ,

Tornando o blog compatível com o Google Chrome Frame

Google Chrome Frame é uma fonte aberta plug-in que se integra traz tecnologias aberto do Google Chrome Web e veloz engine de JavaScript do Internet Explorer. Versões mais antigas do IE não suportam as últimas tecnologias de web como o HTML5 e CSS3. Com o Chrome Frame, todas estas novas tecnologias serão apoiadas.

O que é isso do Google Chrome Frame (GCF)?



Como posso tornar meu Blog  usando o Chrome Frame?

1. Entrar na sua conta do Blogger
2. Ir para o Design> guia Editar HTML.
3. Procure <head> e imediatamente abaixo, cole a seguinte linha de código.
<meta http-equiv='X-UA-Compatible' content='chrome=1'/>
4. Salve o modelo
Agora, se alguém visitar o seu blog usando o Internet Explorer e se ele já tiver instalado o Google Chrome Frame em seu PC / ela, então, seu Blog será processado utilizando GCF

Vantagens de se acrescentar esta linha de código

1. Melhor e renderização mais rápida (se GCF está instalado no PC visitantes)
2. Normal renderização (GCF se não estiver instalado) - Sem o usuário não será solicitado para instalar o Chrome Frame (a menos que você adicionar alguns scripts extra para fazer isso).

Como posso levar o visitante a instalar o Chrome Frame?

Se você quiser, você pode solicitar os usuários do IE (que não tenham instalado GCF) para instalar o GCF. Isso é opcional. Para avisar os usuários, siga estes passos.

1. Mais uma vez Entre na sua conta do Blogger
2. Ir para o Desgin> Editar HTML
3. Procure </head> e logo acima adicionar o seguinte trecho de código

<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style type='text/css'>
.chromeFrameOverlayContent{top:10px;margin-top:10px;}
</style>
<script>
     window.attachEvent("onload", function() {
       CFInstall.check({
         mode: "overlay"
       });
     });
</script>
<![endif]-->
4. Salve o modelo. Agora, o usuário do IE  será solicitado para instalar o Chrome Frame (se ele ainda não estiver). Esse prompt será exibido somente uma vez (armazenado no cookie).

Marcadores: , ,