Mostrando postagens com marcador Html e Javascript. Mostrar todas as postagens
Mostrando postagens com marcador Html e Javascript. Mostrar todas as postagens

segunda-feira, 30 de janeiro de 2012

Colocando uma Navbar Azul no seu blog!

Bem leitores do Mais tutos ! Vou mostrar hoje a vocês como por uma NavBar Azul muito bonita igual a que eu utilizo aqui no Mais tutos !
  


Vamos la!
1º Entre no HTML do seu blog e marque a caixinha "expandir modelos"
2º Procure por:
    <body>


2º Logo a CIMA dela cole este código




Não se esqueça de fazer as mudanças necessárias para isto eu prefiro que vocês editem 
o código no bloco de notas ou qualquer editor de textos para depois upa-la para o Blog!


Até a próxima pessoal !



segunda-feira, 23 de janeiro de 2012

Criando janelas pop up


botaoAlertaAlgumas vezes entramos em sites q exibem mensagens nas caixas padrões com um botão do tipo “Ok” e outro “Cancelar”. Pode ser só um aviso comum ou questionando se queremos continuar naquela ação. Eu não vejo muita utilidade nisso para blogs comuns, mas pode ser interessante em alguns casos específicos como sites de downloads ou de conteúdo restrito ou mesmo para dar algum aviso temporário aos seus visitantes sobre mudanças ou eventos por vir.

A vantagem disso é que evita usar janelas pop-up convencionais que irritam os visitantes e muitas vezes são bloqueadas pelo navegador e acaba que o usuário não lê o aviso que vc quer dar.
Encontrei alguns códigos que podem funcionar bem em seu blog, caso queira colocar essas janelas de avisos ou comunicados. Elas podem abrir de muitos modos e serem de vários tipos. Vou mostrar aqui alguns casos. Já aviso que esta será uma postagem um pouco grande e mais complexa que o comum, pois essa é uma ferramenta mais complicada de ser usada e requer muitos cuidados.

Vele lembrar sempre: quando quiser modificar algo no código HTML do seu blog, mesmo que seja algo simples, faça backup.

Para o aviso aparecer ao entrar na página:
1. Entre em “Layout” e vá em “Editar HTML”. Lá encontre a linha “<body>” no seu código.
2. Abaixo dela coloque o seguinte código com as devidas modificações:
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’subscribe’>
<SCRIPT language="JavaScript" type="text/javascript">alert("texto da mensagem")</SCRIPT>
</div>
</b:if>
3. Salve o modelo e teste.
Este alerta só aparecerá na primeira página do seu blog exibindo o texto que vc definir com um botão de “OK” que fechará o alerta.

Para o aviso aparecer ao sair da página:
1. Entre em “Layout” e vá em “Editar HTML”. Lá encontre a linha “<body>” no seu código.
2. Substitua esse código, com as devidas modificações, por:
<body onunload="alert(‘texto da mensagem‘);">
3. Salvar e testar o resultado.
É exatamente como o exemplo acima, mas só abre quando a pessoa sair de sua página.

Mensagem de Alerta com Confirmação:
Este é o caso de a pessoa poder rejeitar ou aceitar algo proposto, do tipo se deseja continuar naquela ação ou retornar para outra página. Contém um botão de “OK”  e outro de “Cancelar”.
1. Entre em “Layout” e vá em “Editar HTML”. Lá encontre a linha “<body>” no seu código.
2. Abaixo dela coloque o seguinte código com as devidas modificações:
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’subscribe’>
<script language="javascript">
function confirmation() {
var answer = confirm("Mensagem de aviso")
if (answer){
alert("Aviso de confirmação da ação")
}
else{
window.close()
}
}
confirmation()
</script>
</div>
</b:if>
3. Salve e faça o teste.

Antes de tornar definitiva as mensagens, faça vários teste e veja como ficará o resultado final. Não use mais do que uma mensagem de alerta em seu site e só por um período determinado. As pessoas não gostam de sites ou blogs pouco objetivos e que atrapalham sua navegação ou demoram para encontrar o que precisam. Pior ainda se for pra ficar dizendo o que devem ou não fazer.

domingo, 8 de janeiro de 2012

Colocando caixa de pesquisa no header de seu blogger


Atendendo a pedidos, irei ensiná-los como colocar uma caixa de busca/pesquisa no cabeçalho do blog. Quero lembrar que a aplicação desta técnica pode não funcionar em todos os templates.

Antes de começar, faça um backup do seu template por precaução e aplique agambiarra técnica primeiro em um blog de testes e só depois em seu blog principal.
Entre no painel do Blogger e na aba layout, clique em editar html. Marque a caixaexpandir modelos de widgets e procure por /* ----- HEADER ----- */ ou#header-wrapper ( que é onde começa o código do cabeçalho).
Copie o código abaixo e cole ANTES do código do cabeçalho (header).
/* ----- Busca ----- */
#busca{
width:auto;
height:auto;
z-index:1;
position: absolute;
top: 50px;
left: 660px;
}

Procure agora por <div id='header-wrapper'>e cole logo abaixo o código de busca:
<div id='busca'>
<form action='/search' id='searchthis' method='get' style='margin:0;padding:0;display:inline;'><input id='search-box' name='q' onblur='clickrecall(this,&apos;Pesquisar&apos;)' onclick='clickclear(this, &apos;Pesquisar&apos;)' size='20' style='color: #999;' type='text' value='Pesquisar '/> <input id='search-btn' type='submit' value='Buscar'/></form> </div>
Caso você queira colocar uma caixa de busca do Google Adsense, substitua a parte em vermelho do código acima pelo código fornecido pelo AdSense.
<div id='busca'>CÓDIGO DO ADSENSE</div>
Ajuste a posição da caixa de busca, alterando os valores top e left do 1° código.
Vá visualizando o template até ficar legal e só depois clique em salvar modelo.

sexta-feira, 6 de janeiro de 2012

Box Flutuante Assinar Feed via Email


Que tal oferecer assinatura de seus Feed a seus leitores, através de um box flutuante, que funciona como uma janela Pop Up que se abre assim que o leitor entra em seu blog?
Este recurso já é oferecido à plataforma Wordprees, através da instalação de um plugin, porém, agora também é possível obtê-lo no Blogger,para isto basta instalar um código no template.
Atendendo a sugestão de artigo enviada por email, hoje você verá como instalar um Box Flutuante e poder divulgar e oferecer assinatura de seus Feeds a seus leitores.
Este widget é bem simples e fácil de instalar, e possui um efeito bem legal.




DEMO


Vamos ver como instalar?

Vá para a aba "Layout", clique em "adicionar um gadget", (pode ser em qualquer lugar: sidebar, footer etc, mas não coloque título), escolha o modo HTML/javascript e cole o seguinte código:


<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/AVvXsEgo1AgxZVxACH6zdmmNlcWgpbvuvzdShMbb-djAlgRqUg-YPqhJIS3DP97bVDBA7ripCsJ7kVOouhpcVuMgZjlXtn0fpwLwjke97Djcp_Az05vboZzwqwYqyKEvg8hnx4747Worb5ZqKXOL/" rel="nofollow" title="Fechar janela" /></a>
<a target="_blank" href="url-do-seu-feed"><img border="0" vspace="4" align="left" title="Assine nosso Feed" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMcEblVKTMeXFP0X5n1gKfGwMCodlXxsF60AVBLn171U6QxovFbx4ww9CDpgurWfXqfrGmfX19DzkjxW2RuiW8ePPZmiRRm5vNHkSj2goBa4odMNqH0qUnaRnpPks5PZ3TKZeNpZmo9VTJ/" hspace="4" width="48" /></a>
<center><font color="#000000"><b>Fique sempre atualizado! <br />Cadastre-se e receba nossas novidades em seu e-mail.</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=nomedoseufeed&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="nomedoseufeed" /><input name="loc" type="hidden" value="pt_BR" /><input type="submit" value="Assinar" /></form>
</center><span style='font-size: 65%;font color: #000;text-align: right'>Widget by Mais Tutos<a target='_blank' href=http://maistutos.blogspot.com/2012/01/box-flutuante-assubar-feed-via-email.html''><font color="#000000"> Instale este widget</font></a></span></div>

<div class='clear'></div>


Faça as alterações necessárias. Na parte destacada em azul, coloque a url do seu Feed.
Na parte destacada em vermelho, coloque o nome do seu Feed.
Se precisar, vá até o site FeedBurner e verifique o seu Feed, copie-o e cole- no local destacado em vermelho.
Lembrando que para este Widget funcionar é necessário que você tenha habilitado a opção "assinatura de feed por email".


E antes que eu me esqueça: Não retire os créditos! E não publique este widget como se fosse seu!
Não esqueça que antes de disponibilizar algo, existe alguém que "ralou" bastante, testando e editando código para ser publicado e disponibilizado para uso, portanto, os créditos devem ser mantidos, ok?

A funcionalidade deste script pode variar de acordo com o template.

Efeito terremoto no blog


 
Pessoal Deem uma olhada neste efeito muito legal que achei na Web.

Copie o código abaixo e cole no html de sua página


Translate