terça-feira, 8 de janeiro de 2013

Como colocar previsão de tempo no blog

 imageQue tal colocar um gadget com a previsão do tempo em seu blog do Blogger? Um gadget que eu achei super legal, foi o do site Climatempo.  Acesse este link  e escolha um dos modelos disponíveis: previsão de tempo de até 5 cidades, previsão do tempo das capitais, ondas ou regiões do Brasil.

Selecione uma skin (tipo um plano de fundo) e clique em clique aqui. Preencha os campos em branco e depois clique em ver código. Copie o código e cole no gadget HTML/javascript do seu blog (design>elementos de página)


image image
tempo



Mérito: Dicas Blogger
Por: Unknown As 10:53
Mais informações

Pop-up assinar feeds 

 
Copie o código abaixo e cole no gadget “HTML/javascript” Antes de salvar , substitua NOMEDOFEED ( que aparece 3 vezes), pela parte final do endereço do feed do blog.



Exemplo: http://feeds.feedburner.com/rapidodicas



A parte em verde, corresponde à frase que aparece na janela pop-up e 
pode ser modificada, respeitando o número de caracteres para não 
desconfigurar o gadget.



Peço, encarecidamente, que não retirem os créditos do Mundo Blogger.



Atenção! Nos meus templates, o 
script só funcionou corretamente quando inserido no rodapé (lowerbar). 
Isso pode mudar de blog para blog, então façam testes, movendo o código 
dentro dos elementos de página do Blogger.

 
 
 
 
 <style type="text/css">
#topbar
{
padding: 5px 5px 5px 5px;
visibility: hidden;
border: black 1px solid;
width: 340px;
font-family: Tahoma;
position: absolute;
background-color: white
}
</style>
<script type="text/javascript">
var persistclose = 0
var startX = 5
var startY = 5
var verticalpos = "frombottom"

function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name)
{
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0)
{
offset = document.cookie.indexOf(search)
if (offset != -1)
{
 offset += search.length
 end = document.cookie.indexOf(";", offset);
 if (end == -1) end = document.cookie.length;
 returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar()
{
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar()
{
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id)
{
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
 el.y = startY;
else
{
 el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
 el.y -= startY;
}
return el;
}

window.stayTopLeft=function()
{
if (verticalpos=="fromtop")
{
 var pY = ns ? pageYOffset : iecompattest().scrollTop;
 ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else
{
 var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
 ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar">


<a href="javascript:closebar();"><img border="0" style="float: right;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAcgGqS_FgNOuY8U4LVncvQYVhK8O-mNa_DB7BocdWaAbvSqGRs0_1yjH1_eZdYXfis7-nuGi6doAAyGTQL6pezgYn6EncLg5c1WTybkLR0sDpv5hfrhWWtUGtBxsPaClJy6uUzGR_UxAZ/" rel="nofollow" title="Fechar janela" /></a>
<a target="_blank" href="http://feeds.feedburner.com/nomedofeed"><img border="0" vspace="4" align="left" title="Assine nosso Feed" height="42" src="http://lh4.ggpht.com/_mcq01yDJ2uY/TTrS-VdEadI/AAAAAAAAERQ/PnKkAu8Mg5U/rss_2.png" hspace="4" width="48" /></a>
<center><font color="#000000"><b>Fique sempre atualizado!<br />Receba artigos por email!</b> </font><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=nomedofeed&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' ><input name="email" style="WIDTH: 250px" /><input name="uri" type="hidden" value="nomedofeed" /><input name="loc" type="hidden" value="pt_BR" /><input type="submit" value="Assinar" /></form>
</center>
<div style="text-align: center;"><span
 style="font-size: 65%; color: rgb(0, 0, 0); text-align: center;">Widget
by MundoBlogger<a target="_blank"
 href="http://www.mundoblogger.com.br/2010/03/box-flutuante-assinar-feed-via-email.html"><font
 color="#000000"> Instale este widget</font
></a>
<br />
<div class='clear'></div></span
></div></div>
Por: Unknown As 10:52
Mais informações

Widgets com ícones para redes sociais

A última moda em blogs, são os ícones para as redes sociais. O principal objetivo é incentivar os visitantes a seguirem no Twitter, Orkut, Facebook e a assinarem os feeds do blog. 
Pra ajudá-los, criei dois gadgets baseados em CSS, super simples de serem implementados no Blogger.
Recomendo fortemente que as imagens dos ícones sejam enviadas para a conta do Picasa de vocês e que as URLs dessas imagens sejam substituídas.


 Widget 1 – Twitter, Feeds e Facebook


socialmedia-icons
Vá no HTML do template, dê um Crtl+F com o teclado e procure por  ]]></b:skin> .
Cole antes dessa tag o seguinte código:
/* SOCIAL MEDIA
----------------------------------------------- */
#socialmedia{background:#F6F8F8;border:1px solid #DBE2E0;padding:10px 5px 15px 10px; margin: 5px;}
#socialmedia:hover{border:1px solid #90C2D7;}
#socialmedia a{color:#666666;text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif}
#socialmedia a:hover{color:#3c88b2;text-decoration:underline}
#socialmedia img{vertical-align:middle;margin-right:5px;}
Salve o template. Vá nos elementos de página e clique em adicionar gadget. Escolha HTML/javascript e cole este outro código:
<div id='socialmedia'><img alt='' src='https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BEKq7aTI/AAAAAAAAEUw/Lb9JMwUAiZ8/socialconnecttwitter.png' style='width: 32px; height: 32px; float:left;'/>
<a href='URL DO TWITTER'>Siga no Twitter</a>
</div>
<div id='socialmedia'><img alt='' src='https://lh5.googleusercontent.com/_mcq01yDJ2uY/TW630L9WcaI/AAAAAAAAEUM/iLypEEa1b5Y/socialconnectrss.png' style='width: 32px; height: 32px; float:left;'/>
<a href='URL DOS FEEDS'>Assine os feeds</a>
</div>
<div id='socialmedia'><img alt='' src='https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BI34MoHI/AAAAAAAAEU0/GuFjmmcm87w/socialconnectfacebook.png' style='width: 32px; height: 32px; float:left;'/>
<a href='URL DO FACEBOOK'>Curta no Facebook</a>
</div>
  • Em URL DO TWITTER, escreva o endereço do seu Twitter
  • Em URL DO FEED, coloque o endereço dos feeds do blog
  • Em URL DO FACEBOOK, coloque o endereço do seu perfil ou da página de fãs
Widegt 2 - Feeds, Twitter, YouTube, Orkut e Facebook
    socialmedia icons
No painel do Blogger, clique em design > adicionar gadget>HTML/javascript.
Cole o código abaixo, fazendo as respectivas alterações (em vermelho)
<div style="margin: 5px; padding: 10px;"><a
href="ENDEREÇO DO FEED"><img
style="border: 0px solid ; width: 48px; height: 48px; float: left;"
alt=""
src="http://lh5.ggpht.com/_dAGEULh1_1g/THwD-xP5n9I/AAAAAAAAEBk/1DE1CA0UtCA/rss.png"></a><a
href="ENDEREÇO DO TWITTER"><img
style="border: 0px solid ; padding-left: 5px; width: 48px; height: 48px;"
alt=""
src="http://lh4.ggpht.com/_dAGEULh1_1g/THwD-5SoTTI/AAAAAAAAEBo/Yh2jRrtkOeo/twitter.png"></a><a
href="ENDEREÇO DO YOUTUBE"><img
style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"
alt=""
src="http://lh3.ggpht.com/_dAGEULh1_1g/THwD-4XjHKI/AAAAAAAAEBs/waG0ImvEsQI/youtube.png"></a><a
href="ENDEREÇO DO ORKUT"><img
style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"
alt=""
src="http://lh4.ggpht.com/_dAGEULh1_1g/THwD-3vEZVI/AAAAAAAAEBg/jq-RSB5gXBc/orkut.png"></a><a
href="ENDEREÇO DO FACEBOOK"><img
style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"
alt=""
src="http://lh6.ggpht.com/_dAGEULh1_1g/THwD-vZ7bDI/AAAAAAAAEBc/4fHoPnWmq8M/facebook.png"></a><br></div>
 
Por: Unknown As 10:40
Mais informações

Translator Widget - um novo tradutor para blogs

Entre no painel do Blogger e clique em design. Na aba elementos de página, clique em adicionar gadget (1) e escolha html/javascript (2). Cole o código do tradutor e salve.

O tradutor já vem com borda cinza escuro e com o fundo cinza claro. Para mudar as cores, altere as seguintes partes do código (vermelho=borda ; verde=plano de fundo)
<div style="border:1px solid #ccc;padding:10px 4px 3px 4px;text-align:center;background-color:#efefef;">
Se você não sabe o número da cor que deseja usar, veja na tabela de cores web.




          TRANSLATOR WIDGET COM BORDA E PLANO DE FUNDO (personalizável)

 


                                                                    Código Abaixo

<div style="border:1px solid #ccc;padding:10px 4px 3px 4px;text-align:center;background-color:#efefef;">
<!--–GOOGLE TRANSLATE MINI FLAGS–--><div align="center"><!--– Add Portuguese to Chinese (Simplified) BETA –--><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Czh-CN&hl=pt&ie=UTF8'); return false;"
 title="Google-Translate-Chinese (Simplified) BETA"><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 alt="Google-Translate-Chinese"
 src="http://lh5.ggpht.com/_mcq01yDJ2uY/Sdke4C8za2I/AAAAAAAAAkU/Mpfn_ntCweU/China.png"
 title="Google-Translate-Chinese"><!--– END Portuguese to Chinese (Simplified) BETA–--><!--– Add Portuguese to French –--></a><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cfr&hl=pt&ie=UTF8'); return false;"
 title="Google-Translate-Portuguese to French "><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 alt="Google-Translate-Portuguese to French"
 src="http://lh4.ggpht.com/_mcq01yDJ2uY/SdkfGSkRgfI/AAAAAAAAAkc/X4E87SASLtA/France.png"
 title="Google-Translate-Portuguese to French"><!--– END Portuguese to French –--><!--– Add Portuguese to German –--></a><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cde&hl=pt&ie=UTF8'); return false;"
 title="Google-Translate-Portuguese to German"><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 alt="Google-Translate-Portuguese to German"
 src="http://lh3.ggpht.com/_mcq01yDJ2uY/Sdke3rFjMUI/AAAAAAAAAkE/o0kR0MfngXA/Germany.png"
 title="Google-Translate-Portuguese to German"><!--– END Portuguese to German –--><!--– Add Portuguese to Italian –--></a><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cit&hl=pt&ie=UTF8'); return false;"
 title="Google-Translate-Portuguese to Italian"><img
 alt="Google-Translate-Portuguese to Italian"
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 src="http://lh3.ggpht.com/_mcq01yDJ2uY/Sdke2xCmrPI/AAAAAAAAAj0/Jv14yyDo1i4/Italy.png"
 title="Google-Translate-Portuguese to Italian"><!--– END Portuguese to Italian –--><!--– Add Portuguese to Japanese BETA –--></a><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cja&hl=pt&ie=UTF8'); return false;"
 title="Google-Translate-Portuguese to Japanese BETA"><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 alt="Google-Translate-Portuguese to Japanese"
 src="http://lh5.ggpht.com/_mcq01yDJ2uY/Sdke3f2KbNI/AAAAAAAAAj8/xyGLFdUZbVY/Japan.png"
 title="Google-Translate-Portuguese to Japanese"></a><!--– END Portuguese to Japanese BETA –--><!--– Add Portuguese to English –--><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cen&en=pt&en=UTF8'); return false;"
 title="Google-Translate-Portuguese to English "><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 alt="Google-Translate-Portuguese to English"
 src="http://lh4.ggpht.com/_mcq01yDJ2uY/SdkhG4bjxqI/AAAAAAAAAks/Ws6AzZdnZTw/United%20States%20of%20America%20%28USA%29.png"
 title="Google-Translate-Portuguese to English"><!--– END Portuguese to English –--><!--– Add Portuguese to Russian BETA –--></a><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cru&hl=pt&ie=UTF8'); return false;"
 title="Google-Translate-Portuguese to Russian BETA "><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 alt="Google-Translate-Portuguese to Russian"
 src="http://lh5.ggpht.com/_mcq01yDJ2uY/SdkfGVESWsI/AAAAAAAAAkk/-ruu99vFElQ/Russian%20Federation.png"
 title="Google-Translate-Portuguese to Russian"><!--– END Portuguese to Russian BETA –--><!--– Add Portuguese to Spanish –--></a><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Ces&hl=pt&ie=UTF8'); return false;"
 title="Google-Translate-Portuguese to Spanish "><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 alt="Google-Translate-Portuguese to Spanish"
 src="http://lh3.ggpht.com/_mcq01yDJ2uY/Sdke312ethI/AAAAAAAAAkM/KeACgltRc38/Spain.png"
 title="Google-Translate-Portuguese to Spanish"><!--– END Portuguese to Spanish –-->
<center><a href=http://rapidodicas.blogspot.com.br/2013/01/translator-widget-um-novo-tradutor-para.html
 target="_blank"><small>Translator Widget by Rapido Dicas</small></a></center>


           TRANSLATOR WIDGET SEM BORDA E COM FUNDO TRANSPARENTE


Google-Translate-ChineseGoogle-Translate-Portuguese to FrenchGoogle-Translate-Portuguese to ItalianGoogle-Translate-Portuguese to JapaneseGoogle-Translate-Portuguese to EnglishGoogle-Translate-Portuguese to RussianGoogle-Translate-Portuguese to Spanish
Translator Widget by Rapido Dicas
 
 
Código Abaixo 
 
<div style="padding:10px 4px 3px 4px;text-align:center;">
<!--–GOOGLE TRANSLATE MINI FLAGS–--><div align="center"><!--– Add Portuguese to Chinese (Simplified) BETA –--><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Czh-CN&hl=pt&ie=UTF8'); return false;"
 title="Google-Translate-Chinese (Simplified) BETA"><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 alt="Google-Translate-Chinese"
 src="http://lh5.ggpht.com/_mcq01yDJ2uY/Sdke4C8za2I/AAAAAAAAAkU/Mpfn_ntCweU/China.png"
 title="Google-Translate-Chinese"><!--– END Portuguese to Chinese (Simplified) BETA–--><!--– Add Portuguese to French –--></a><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cfr&hl=pt&ie=UTF8'); return false;"
 title="Google-Translate-Portuguese to French "><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 alt="Google-Translate-Portuguese to French"
 src="http://lh4.ggpht.com/_mcq01yDJ2uY/SdkfGSkRgfI/AAAAAAAAAkc/X4E87SASLtA/France.png"
 title="Google-Translate-Portuguese to French"><!--– END Portuguese to French –--><!--– Add Portuguese to German –--></a><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cde&hl=pt&ie=UTF8'); return false;"
 title="Google-Translate-Portuguese to German"><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 alt="Google-Translate-Portuguese to German"
 src="http://lh3.ggpht.com/_mcq01yDJ2uY/Sdke3rFjMUI/AAAAAAAAAkE/o0kR0MfngXA/Germany.png"
 title="Google-Translate-Portuguese to German"><!--– END Portuguese to German –--><!--– Add Portuguese to Italian –--></a><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cit&hl=pt&ie=UTF8'); return false;"
 title="Google-Translate-Portuguese to Italian"><img
 alt="Google-Translate-Portuguese to Italian"
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 src="http://lh3.ggpht.com/_mcq01yDJ2uY/Sdke2xCmrPI/AAAAAAAAAj0/Jv14yyDo1i4/Italy.png"
 title="Google-Translate-Portuguese to Italian"><!--– END Portuguese to Italian –--><!--– Add Portuguese to Japanese BETA –--></a><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cja&hl=pt&ie=UTF8'); return false;"
 title="Google-Translate-Portuguese to Japanese BETA"><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 alt="Google-Translate-Portuguese to Japanese"
 src="http://lh5.ggpht.com/_mcq01yDJ2uY/Sdke3f2KbNI/AAAAAAAAAj8/xyGLFdUZbVY/Japan.png"
 title="Google-Translate-Portuguese to Japanese"></a><!--– END Portuguese to Japanese BETA –--><!--– Add Portuguese to English –--><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cen&en=pt&en=UTF8'); return false;"
 title="Google-Translate-Portuguese to English "><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 alt="Google-Translate-Portuguese to English"
 src="http://lh4.ggpht.com/_mcq01yDJ2uY/SdkhG4bjxqI/AAAAAAAAAks/Ws6AzZdnZTw/United%20States%20of%20America%20%28USA%29.png"
 title="Google-Translate-Portuguese to English"><!--– END Portuguese to English –--><!--– Add Portuguese to Russian BETA –--></a><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cru&hl=pt&ie=UTF8'); return false;"
 title="Google-Translate-Portuguese to Russian BETA "><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 alt="Google-Translate-Portuguese to Russian"
 src="http://lh5.ggpht.com/_mcq01yDJ2uY/SdkfGVESWsI/AAAAAAAAAkk/-ruu99vFElQ/Russian%20Federation.png"
 title="Google-Translate-Portuguese to Russian"><!--– END Portuguese to Russian BETA –--><!--– Add Portuguese to Spanish –--></a><a
 target="_blank" rel="nofollow"
 onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Ces&hl=pt&ie=UTF8'); return false;"
 title="Google-Translate-Portuguese to Spanish "><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
 alt="Google-Translate-Portuguese to Spanish"
 src="http://lh3.ggpht.com/_mcq01yDJ2uY/Sdke312ethI/AAAAAAAAAkM/KeACgltRc38/Spain.png"
 title="Google-Translate-Portuguese to Spanish"><!--– END Portuguese to Spanish –-->
<center><a href=http://rapidodicas.blogspot.com.br/2013/01/translator-widget-um-novo-tradutor-para.html
 target="_blank"><small>Translator Widget by Rapido Dicas</small></a></center>
 
Por: Unknown As 10:36
Mais informações

domingo, 6 de janeiro de 2013

Gadget de Estatisticas Para Blog


Recentemente adicionei um gadget de estatísticas na barra lateral do blog. É um gadget simples que mostra a exatamente quantos dias o blog está online, a quantidade de artigos publicados e a quantidade comentários.
estatisticas

Como adicionar o Gadget de estatísticas do blog?

1. Acesse o painel do seu blog
2. Clique na guia "Layout"
3. Clique em 'Adicionar um gadget' → Escolha tipo'HTML/Javascript' e cole o seguinte código:
<div style="float: left;"><img style="width: 193px; height:55px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3mocDVhCd2iguFlFekYTaBeugE93Vrw0poLmkgSwJnU7FWH8DNzURIlGVn6EvkzRLR8hQv_hIpvlIH-d_SGor91fmvAMTxKsMju9hpHSeH3bnfzSFdCMspiE3bOydX60z9_sN6pPyIaKg/s1600/stats.png"/></div>
<div style="float:left;text-align:left;font-size: 14px;line-height:18px;font-family:Oswald;font-weight:0 ;color:#b60002;">
<script> function DiasOnline(Dia, Mes, Year, Texto) { Meses = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); Hoy = new Date(); Inicio = Date.parse(Meses[Mes - 1] + " " + Dia + " " + Year); Resultado = Math.round((Hoy.getTime() - Inicio) / 86400000); document.write(Resultado + " " + Texto); } DiasOnline(9, 2, 2012, "" );</script> Dias online<br/>
<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src="http://dicasblogger.org/feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"></script> Postagens
<br/>
<script src="http://dicasblogger.org/feeds/comments/default?alt=json-in-script&amp;callback=showpostcount"></script> comentários</div><div style="clear: both;"></div>
4. Substitua os números que estão  destacado em vermelho pela data que seu blog foi criado.
5. Substitua o texto destacado em azul (Dicas blogger.org) pelo seu blog.
6. Salve, e pronto!
Obs. Você pode alterar o tamanho em: width: 193px;
Pode alterar a altura em: height:55px;
Pode alterar o tamanho, cor e tipo da fonte.
Qualquer duvida não hesite em perguntar.
Até a próxima!
Por: Unknown As 13:17
Mais informações

Icones Sociais 3D Com Efeito de Giro Para Blog


Atualmente as redes sociais desempenham um papel muito importante na divulgação do conteúdo do seu blog. É essencial que você adicione os ícones das redes sociais em blog e convide as pessoas a compartilhar seu artigos. É fundamental para ganhar visibilidade na rede. Hoje vou ensinar como colocar um pacote de ícones sociais 3D com efeito de giro no blogger.
cones sociais 3D com efeito de giro para Blogger
O principal efeito desses ícones  é o giro de 360 graus, efeito conseguido com CSS. Quando você coloca o cursor sobre o ícone ele gira 360 graus, quando o cursor é removido ele gira 360 graus de volta.

E também tem um ligeiro efeito hover de opacidade nos ícones. Neste post vou mostrar como adicionar os ícones em seu blogger.
Aqui estão os ícones em pleno funcionamento, veja o que acontece quando você coloca o cursor sobre eles.

Como adicionar os ícones sociais 3D com efeito de giro para Blogger

1. Acesse o painel do seu blog 
2. Clique na guia "Layout" 
3. Clique em 'Adicionar um gadget' → Escolha tipo'HTML/Javascript' e cole o seguinte código: 
  
<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVZPJb1STN-JseFPLitxUHSoNiFfeGavd2Fhfouu6NHnOi4GDBdAxsHC_VzUoqHwDKN8jpZhU_1c6v_wBg8EK3LJ1u8RVCzrW5dNRt1pG97ZHL1v0UX9Dtr5SfPDxPjjDh2cF-88SJksMF/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxPkAfx8zqLNaZ29632v8OMnR1MMARgKE4stB3BFvkofjzcPbcOIBRjmJXsEgLL7ZmcGADICdBBwTz9CUrJhYc0VMTzf9kmRZI0PVTGAy2Wet9NA5JckGYh5E-8RvfP4p6049NGUhF5GmI/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYq8QrwqC3nqbdq1ML3uAWD6AusQWNNgrzNBdHX0VLto-X3yihy8pEm2Rscta3u170rID__0hq_PDPKwF3r5taVZBErpaX57rsm8lyymg2pOFLfpYhCv5IpHB6s4J5bfuzYzRZUPuxJwAr/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiurSue7v1TK9EqEuwiW8uKUV97eyJ3czwxJ2XVchqQwhkFIa3XnV-RoJSaFzyKgnk5E0IdxygR_d46qW2i2h_6Oovt-DSZGgWmFjCDIMvvJ2jVC0slYJqDOPUZRg0lteoxKUqYksRsIPwl/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtWW6v04l4JHL_D5nvWbWJlYEzF-FMF-ZKxNKZ1eryv3sYW7XYwLx5MrodhRIAN8ujgUmmSt5cRGTazyv0HMMTIINgmM7_Sj90hicoRA8LPl_jHGwee6xqHtUEa-eHRyN63S-je_yTcnow/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj60tcO5ltqzc_SgcGN3uLWzWHkd9U0TH-fwkI8G5BiAOvWFF9j4enSeU29yHNEoqdmARTpgKyJ3RWNRBavD0xk6Tg8FbhToOb8u6A6swW405NozfoHG969nNA0p56Ryf3gJOq4oBMi1rWW/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="Nome-do-seu-blog" src="http://feeds.feedburner.com/~fc/nome-do-seu-blog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

Importante – Substitua os textos destacados em azul com seus perfis sociais e o nome do seu blog.

Salve e pronto!
Por: Unknown As 13:15
Mais informações

Caixa de Aviso Para Blog


Gostaria de colocar um aviso no seu blog e não sabe como? Hoje eu vou ensinar como colocar uma caixa de aviso no blog. Está caixa de avisos tem muitas utilidades. É um modelo simples feito CSS3 com opção de personalizar o tamanho da caixa, cor de fundo, bordas, fontes e etc.
ScreenShot001


Como colocar a caixa de aviso com opção fechar no blog?

É muito simples!
Vá até 'Layout' → Clique em 'Adicionar um Gadget'→ Escolha tipo 'HTML/Javascript' e cole o código seguinte.

<style type="text/css">
#aviso{
width:500px; /* Tamanho da caixa */
padding:5px; position:absolute; z-index:5000;}
.caja-aviso{
border:4px double #0080FF; /* Cor da borda */
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #808080; -moz-box-shadow: 8px 8px 6px #808080; box-shadow: 8px 8px 6px #808080;
background-color: #CEECF5; /* Cor de fundo */
padding: 10px; font-family: Verdana, Geneva, sans-serif;
color: #0B173B; /* Cor do texto */
}
.letrero-aviso { /* Estilos da palavra AVISO */
font-size:18pt;
font-weight:bold;
color:#B4045F;
text-shadow: 0px 0px 10px #CEECF5;}
</style>
<div id="aviso" style="left:300px; top:100px; padding:0;">
<div align="right" style="margin-bottom:-30px;"><b><a href="javascript:closeit()" ><font face="Arial" size="1">[FECHAR]</font> <img valign="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuBReQVkJA7jYu8wWIAETuBQqIKNVArnSXY9REaDee46Irj3C84X_NMrv6wl8a9TEWYoAWZ9XjbQVWUAi84L6viTln-mMR7X_hcsQSzuPzp9RAIzeh8eJ_tJEsZp5Tm4p0eAfTu-adH-vW/" style="vertical-align:middle;"/></a></b></div>
<br/>
<fieldset class="caja-aviso">
<legend class="letrero-aviso" align="center">AVISO</legend>
”...Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker....”
<br/><div align="right"><a href="http://www.facebook.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuRUZeCH-aid39VY44N6KYotCPl0Ow_tIdC0gtXhUVsUMMFLPy-ifWnh3oFxUvh89W2vi8i-3S3R0MNpRyhjfqHpe9GMu9GecVawoYYl0rPhOWChH1RAx3w1xjF3AfL3ET7DXAWkCbGqiH/" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPmX_8VYze03-MjKeQDXupF7yOzPrOHtmfgTixt3wFMp3xj1ZaE1Rcs7RQ0iRjzz9VBeCew0bhJPwDPT0-6eMVtaf2ieeGlTdLg3oqfGcPk3PUzPmQ6dYkHhnpGgQu-U4jNRnu9jKIFLn4/" width="25"/></a></div>
</fieldset>
<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>
</div><div class="clear"/></div>

Não esqueça de colocar o seu nome de usuário do Facebook e o nome de usuário do Twitter no local onde está escrito “usuario”
Agora é só usar sem moderação.
Por: Unknown As 13:11
Mais informações
Assinar: Comentários (Atom)

Teste Teste Teste

Teste Teste Teste

 

© 2013 ૨áρiđѳ đi૮αઽ. Traduzido Por: Template Para Blog - Designed by Templateism

Back To Top