Widget post relacionado abaixo do post com imagem

Anteriormente mostrei como colocar links relacionados abaixo do post. Agora vou lhe mostrar como colocar esses links só que com imagens. Veja como fica nesse blog.

O que você precisará fazer?

Este é um serviço oferecido pelo site LinkWithin, por isso acesse o site (aqui) e faça o cadastro.
Depois é só seguir os passos. Quando você se inscrever escolha a plataforma de seu blog, depois é só clicar em salvar.

Simples, é como você instala quanquer widget. O windget aparece no final das páginas individuais.

Qualquer dúvida é só perguntar.

Leia mais Read more...

Conheça as parte de seu template

Muitos blogueiros não sabem como começar a personalizar seu blog, isto por que eles não conhecem cada parte de um template. O que farei aqui é explicar cada para do template para que fique mais fácil quando você for mecher em seu template.

Todas as partes










1º - Body ou corpo
É onde na imagem é representada pela linha vermelha, ela contém tudo sobre uma página, até mesmo a barra navbar, aquela que fica no topo a do blogger.

2º - Outer Wrapper
Este é a parte onde contém todas as seções dentro do seu blog, é a parte rosa na imagem. Uma nota; em seu template ela pode vir com outro nome.

3º - Header Wrapper
Está parte é a parte de cima e contém o cabeçalho, é onde colocamos o titulo do blog, note que há uma linha amarela e outra laranja estas são fronteiras.

4º - The Main Column (a principal coluna)
Está é a coluna onde escrevemos, ou seja, contém os posts, é a maior e geralmente contém uma ou duas colunas ao lado (sidebar). É demonstrada pela linha azul. Note que o feed e a data não estão dentro dela.

5º - Sidebar (barra lateral)
Estas estão ao lado dos posts, repare que a barra lateral não se estende para baixo até o rodapé, ela é medida pelo conteúdo dentro dela. Coluna verde ao lado.

6º - Footer (Rodapé)
Isto corresponde ao final, àquela barra que encontramos no final do nosso template. Está em azul claro na imagem.

Leia mais Read more...

Retirando a numeração de suas categorias

Para quem deseja ter um blog paracido com um grande site precisa tirar logo o que é como uma marca registrado do blogger ou quem entra sabe logo que você utiliza o blogger por que você utiliza em seu blog aquela numeração que fica ao lado de suas categorias marcando quantos posts você tem em por exemplo: Blog 22, ferramentas 10 e assim por diante.

Se você quer retirar essa função siga essa pequena dica:

Vá para seu Painel > Layout > Editar HTML

Faça Backup do template, para caso você queira voltar atrás ou algo der errando.

Clique em expandir modelo de Widget

Procure por: (<data:label.count/>)

Agora apage o código que você encontrol acima.

Simples assim, visualize e se tiver tudo certo salve sua modificação.

Se tiver dúvida deixe um comentário.

Leia mais Read more...

Deixe que seus leitores classifiquem seus posts

Muitos sites e blogs utilizam os comentários de seus leitores para saber o grau de interesse em suas matérias. Já outros utilizam além de comentários uma classificação para saber o grau de interesse e este último pode ser bem legal.

Se você quer colocar essa classificação em seu blog existe duas maneiras básicas. A primeira para quem utiliza o blog padrão e o outro para quem usa o blog padronizado.

Para quem usa o blog simples você pode fazer Painel > Layout > e depois ir em editar postagens do blog. Lá você verá a opção de Reações, marque a caixa e deixe onde você deseja que ele apareça. Salve as auterações.

Para quem usa o blog personalizado, você precisa acrescentar dois pequenos códigos, Vá em Layouts > Edit HTM, faça backup do template e clique em expandir modelo de widget e procure por <data:post.body/>

Abaixo de <div class='postinfo'> cole este código:

<div class='star-ratings' style='float:right;'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if> </div>

Agora procure por: <b:include name='feedLinks'/>
Cole este código logo abaixo

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/> <script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'> <script type='text/javascript'>
google.load("annotations", "1"); google.load ( "anotações", "1");
function initialize() { função initialize () (
google.annotations.setApplicationId(<data:top.blogspotReviews/>); google.annotations.setApplicationId (<data:top.blogspotReviews/>);
google.annotations.createAll(); google.annotations.createAll ();
google.annotations.fetch(); google.annotations.fetch ();
} )
google.setOnLoadCallback(initialize); google.setOnLoadCallback (inicializar);
</script> </ script>
</b:if> </ b: if>

Visualize seu blog e se tudo tiver certo salve. Embora esta dica não seja nova ela é bem legal.

Qualquer dúvida deixe um comentário. Dê sua opinião se você conhece outra maneira ela será publicada e será dado os devidos créditos.

Leia mais Read more...

Campanha atualize seu navegador

Quem nunca passou por uma dor de cabeça depois de deixar seu template prontinho para usar, "todo bonito" e quando por acaso abriu o Internet Explorer 6 (de 2001) e viu que seu blog que antes tava "todo bonitinho" está todo desconfigurando no IE6. Por isso, o site iMasters lançou a campanha "Atualize seu Navegador". Segundo a campanha o Brause o IE6 ainda está ativo em 33% dos computadores.

Se você também que participar da campanha, pelo fim do IE6 é só você colocar este código logo acima de </body>

&lt;script src="http://imasters.uol.com.br/crossbrowser/fonte.js" type="text/javascript"&gt;&lt;/script&gt;

Com este código faz aparecer uma barra orientando o utilizador a atualizar seu navagador. Participe você também.

Leia mais Read more...

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?

Leia mais Read more...

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

$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 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.

Leia mais Read more...

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?

Leia mais Read more...

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.

Leia mais Read more...

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.

Leia mais Read more...