Procurando Ganhar

10 Julho 2009

Coloque posts aleatórios

Este widget lhe possibilita colocar seus artigos na barra lateral de seu blog para que as pessoas pessam ver o que você já publicou, ele vai subindo com o nome dos artigos. Veja exemplo abaixo:

Muitas pessoas gostam desse tipo de widget, visto que eles possibilitam que seus visitantes fiquem mais tempo no seu blog.

Como usar?

Acesse o site Widgets.cc
Em Create your free scrollbox widget coloque: Seu feed no primeiro campo
Em Scrollbox Height: Escolha a altura do widget
Scrollbox Width: Escolha a largura do widget
Clique em Create Scrollbox

Pronto, na página que abre pegue seu código e coloque em seu HTML/JavaScript e salve seu código.

Veja o artigo: Quantos widgets você precisa para seu blog?

09 Julho 2009

Simples efeito de casca para blogger

Esta dica é muito legal, você pode colocar um subscrever e-mail no canto superior direito "Veja exemplo". Quando a pessoa passa o mouse por cima abre como que uma casca, o icone cresce e você vê essa imagem como na imagem ao lado, chama bastante atenção.

São só dois passos simples, essa dica é de Sohtanata. Não se esqueça de baixar seu template para seu HD.

Como usar?

Copie esse código e cole logo acima de </head> (Ctrl + F para procurar)

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://images.cdmazika.com/images/flv58z8geojomk4384.png) no-repeat right top;
}
</style>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Page Flip on hover

$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});

});
</script>

Agora localize <body> (Ctrl + F para procurar) e cole esta parte logo abaixo

<div id='pageflip'>
<a href='http://feeds.feedburner.com/Seusite'><img alt=''

src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>

Onde estiver seusite troque pelo nome que está no link do feedburner, geralmente é assim: http://feeds.feedburner.com/procurandoganhar.

Pronto, visualize a página e se tudo tiver certo salva.

07 Julho 2009

Crie Menu com Efeito Transparente

Este menu é bem simples de criar, não da muito trabalho e é muito bonito. Veja um exemplo nesse blog teste, você pode trocar as imagens pelas imagens que você desejar é só criar as imagens no formato gif. Siga os passos:

1º - Você precisa fazer o download das imagens - Download
2º - Acesse seu painel > Layout > Editar HTML
3º - Salve seu template
4º - Procure por: ]]></b:skin> (Clique Ctrl + F no firefox para procurar)
Em cima desse código cole este:

/****** H3 */
ul#menu{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:bold;
background:transparent url("images/OFF.gif") repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:4px solid #555555;
border-top:1px solid #919191;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;}
ul#menu li a{
display:block;
float:left;
color:#8c3a3a;
text-decoration:none;
font-weight:bold;
padding:12px 20px 0 20px;
height:24px;
background:transparent url("images/DIVIDER.gif") no-repeat top right;
}
ul#menu li a:hover{
background:transparent url("images/HOVER.gif") no-repeat top right;
}

6º - Agora faça o uploud das imagens para um servidor na web (eu utilizo o CdMazika) cole o link daa imagens, primeiro a que tem o nome OFF.gif, segundo DIVIDER.gif e terceiro HOVER.gif dentro dos parenteses.

7º - Agora vamos colocar os links, localize em seu template o código html, geralmente colocamos o código abaixo do cabeçalho, para isso localize esta parte: <div id='header-wrapper'> este é o código do cabaçalho que termina com </b:section>
</div> e logo abaixo você verá em seu template varios links como estes abaixo, se não houver você pode colar estes:

<ul id='menu'>
<li><a class='current' href='http://www.procurandoganhar.com/2008/10/sobre-o-procurando-ganhar.html' target='_self' title='Home'>Home</a></li>
<li><a href='http://www.procurandoganhar.com/2008/10/sobre-o-procurando-ganhar.html' target='_self' title='Sobre'>Sobre</a></li>
<li><a href='http://www.procurandoganhar.com/2008/10/parceria.html' target='_self' title='Parceria'>Parceria</a></li>
<li><a href='http://www.procurandoganhar.com/2008/10/blog-post.html' target='_self' title='Contato'>Contato</a></li>
<li><a href='http://www.procurandoganhar.com/2008/10/politica-de-privacidade.html' target='_self' title='Politica de Privacidade'>Politica de Privacidade</a></li>
<li><a href='http://feeds2.feedburner.com/ProcurandoGanhar' target='_self' title='Assine o Feed Rss'>Assine o Feed Rss</a></li>
</ul>

Onde está o link em negrito substitua pelo seu e onde você vê escrito em negrito o nome da página troque pelo nome de sue página. Você pode aumente ou diminuir seus links tudo depende de quantas páginas você tem.

Se você não sebe criar páginas no blogger veja essa dica,

Como colocar páginas no Blogger?

06 Julho 2009

Coloque tradução no seu blog

Muito é a procura por widgets que traduza o seu blog ou site, nesse sentido indico um serviço do site ConveyThis.com, eles dão um widget que você pode colocar no seu blog de maneira rápido e fácil. (Veja ao lado na barra lateral o meu.)

Como faço?

1º - Acesse o site - ConveyThis.com
2º - O site oferece três formas de utilização, paga e grátis, é claro que vamos ficar com a última.
3º - Em Lite, você verá em baixo Get lite web translation, clique.
4º - Na página que abre siga os passos, coloque seu email > coloque o idioma de seu site > escolha o tamanho do widget > clique em Get your button
5º - Pegue o código e cole no HTML/javascript de seu blog.

Simples assim, mais muito eficiente, visto que são muitos os paises que não falam português, e como são muitos.

05 Julho 2009

Como colocar música no Blogger?

Para quem deseja colocar música no blogger existe basicamente duas formas boas, a primeira você pode colocar na sidebar (barra lateral) ou a segunda no post. Vejamos como:

1º - Primeiro você precisa hospedar seu arquivo .mp3 num servidor, feito isso, pegue o link como este:

http://sample-server.com/uploads/from-the-moon.mp3

(aqui é só um exemplo, não hospedei nada)

2º - Aqui é o código para você adicionar música para seu blog

<embed width="250" height="50" autostart="false" src="MUSIC FILE URL"/></embed>

3º - Escolha onde você irá coloca-lo

Para colocar na sidebar, vá para Layout > adionar HTML/Javascript e cole o código.
Para colocar no post, vá para Layout > Editar HTML e cole o código.

Pronto, terminamos, espero que gostem.

04 Julho 2009

Como filtar nosso IP na conta do Analytics do Google?

Recentemente vi a necessidade de filtrar o meu resultado nas visitas do Analytits, pois visito o meu blog várias vezes por dia. Por que filtrar os resultados do nosso IP? por que assim você terá um resultado mais preciso de quem e quantas pessoas realmente estão visitando seu blog.

Como exemplo digamos que você visualiza seu blog várias vezes por dia, todas essas vezes que você visualiza sua página ele é computada pelo analitics assim o resultado não é realmente aquilo que você vê, pois você pode visualizar várias vezes seu blog por dia, principalmente quando estamos fazendo modificações.

Como filtrar os resultados?

Acesse sua conta do Analitics > Escolha o blog que você quer filtar (se tiver mais de um) > Clique em "gerênciador de Filtros" (no canto direito, em baixo) > em filtros existentes, clique em "adicionar mais um" > na tela que abre, dê um nome para que você possa identificar-lo e no outro campo escolha "Excluir tráfego de um endereço de IP > coloque o IP (veja a dica ao lado, coloque como ele diz, o exemplo) > Adicione o blog para Perfis selecionados do site e agora é só salvar.

Pronto seu IP será filtrado e você terá o resultado de um tráfego real.

03 Julho 2009

Crie um favicon para seu blog

Favicon é aquele ícone que fica na barra de endereço e fica também numa aba quando você abre. É um ícone que significa "favorito", quando você salva uma página nos favoritos ele fica lá para que você possa identifica-lo de forma fácil.

Você pode encontrar vários sites que lhe ajudam com este ícone, mais eu vinha tentado colocar este ícone há muito tempo, no entanto, há muita confusão sobre o assunto, por isso resolvi fazer este post para lhe ajudar de maneira simples.

O que você precisa?

1º- Faça o favicon, ele tem quer ser com a extensão .ICO de "ícone".
Você pode utilizar uma imagem de seu computador ou criar um na web. Se você for criar um com um editor de imagem, você pode transformar ele para a extensão .ICO no site Favicon from Pics depois de criado faça o download. Note que quando você fizer o download virá dois favicons, isso é importante pois você vai precisar dos dois, uma com a extensão .ICO e a outra com a extensão .PNG

2º- Agora você precisa hospedar as imagens.
Este foi um dos meus maiores problemas, pois as vezes é difícil um site que aceite esta extensão "ICO". o site que usei foi este cdmazica.com crie uma conta e faça o upload de suas imagens. Agora pegue o link da URL e cole nesse código.

<link href='http://images.cdmazika.com/images/ki3elqo7uzjj2q3u519.ico' rel='shortcut icon'/>
<link href='http://images.cdmazika.com/images/6oq2unhjseebtc446mej.gif' rel='icon' type='image/png'/>

Vamos Criar:
1º- Acesse o painel de seu blog > Layout > editar html.

Procure por este código ]]></b:skin>

2º- Logo abaixo cole o código modificado com a sua URL no lugar onde se encontra em vermelho você coloca a imagem .icon e em azul a imagem png.

Pronto, visualize e se estiver tudo certo você verá sua imagem no luga da do blogger. Salve suas atualizações.

02 Julho 2009

Como colocar links em comentários

Gosta de comentar depois de ler um post? Quer colocar um link no seu comentário? Então, isso é muito fácil, só o que você precisa fazer é usar esse código abaixo.

<a href="URL"> Título </ a>

Ex:
<a href="http://www.procurandoganhar.com"> Procurando Ganhar </ a>

Se você quiser colocar em negrito acrescente <b>antes do título e depois coloque </b>
O mesmo se dá com itálico, as tags são <i> e fecha com </i>

Em URL você coloca o seu link
E Em Título você colocar o título que você deseja que apareça.

Mais fácil que tirar doce da boca de criança.

Esse é pra quem é novato no ramo de html. (só sendo)

01 Julho 2009

Coloque imagens por trás de seus widgets

Este código é bastante interessante, você pode colocar imagens por trás de seu wingets, como imagens atrás do “Arquivo, Categorias” ou qualquer outra que você tiver em seu blog. Para isso siga o tutorial abaixo.

Salve o Template > localize <div id='sidebar-wrapper'> e em baixo você verá uma pequena lista começando com: <b:widget id

Nessa lista (exemplo abaixo) cada widget tem um nome exclusivo, exemplo:

<b:widget id='Label1' locked='false' title='CATEGORIAS' type='Label'/>

Label1 é o meu único ID. Pegue esse ID (o seu) e substitua por cada widget que você quiser colocar uma imagem.

Faça um novo grupo, como este (abaixo) na sua folha de estilo, para ficar fácil de encontrar. (não é obrigatório)

/* widgets
----------------------------------------------- */

Agora, para cada item que você deseja adicionar, adicione uma linha como essas linhas abaixo. (note que nesse código abaixo, você teria três imagens em três widget. Ex: em Label você tem uma imagem, em BlogArquivo outra e assim por diante)

#Label1{
background: #fff url(URL DA IMAGEM) no-repeat;
}
#BlogArchive1{
background: #fff url(URL DA IMAGEM) no-repeat;
}
#Text1{
background: #fff url(URL DA IMAGEM) no-repeat;
}

As categorias acima destacado em negrito você troca pelos seus e lembre-se das URL. Você pode fazer com quantos widget você quiser é só você colocar o ID e a URL da imagem.

Essa dica eu testei e funciona só o que você precisa lembrar também é do tamanho da imagem, eu fiz num blog teste veja aqui: Baixe-templates está em Categoria, Arquivo e Licença dos Templates.

Qualquer dúvida deixe um comentário.

30 Junho 2009

Retirando a Blogger Navbar

Cada vez mais os blogs estão ficando mais proficionais, daí a necessidade de melhorar seu blog para que ele não fique para trás no avanço da internet. Pensando nisso, muitos blogueiros ao criar um blog a primeiro coisa que fazem é tirar aquela barra que fica acima do template chamada "Blogger Navbar". Essa barra identifica logo o seu blog como "mais um" do blogger.

Essa dica não é algo novo, mais se você não fez ainda, faça agora visto que ela é bem simples.

Emcontre esse código e acrescente essa parte em verde.

<b:skin><![CDATA[/*
... ...
... ...
#navbar {display:none;}
... ...
... ...
]]></b:skin>

Visualize seu blog e se tudo tiver dado certo salve o template.

Pronto simples assim.

É novo aqui? Assine o Rss Feed é grátis

10 Julho 2009

Coloque posts aleatórios

09 Julho 2009

Simples efeito de casca para blogger

07 Julho 2009

Crie Menu com Efeito Transparente

Como colocar páginas no Blogger?

06 Julho 2009

Coloque tradução no seu blog

05 Julho 2009

Como colocar música no Blogger?

04 Julho 2009

Como filtar nosso IP na conta do Analytics do Google?

03 Julho 2009

Crie um favicon para seu blog

02 Julho 2009

Como colocar links em comentários

01 Julho 2009

Coloque imagens por trás de seus widgets

30 Junho 2009

Retirando a Blogger Navbar

Pesquisar este blog

Translate--------------------------------Tradução

Siga-me

Marcadores

O que você acha do novo Layout do blog?

Parceiros

Posts Recentes

Quem sou eu?

De onde você veio?

Blog Archive