segunda-feira, 5 de abril de 2010

Banner com link-me

A troca de banner é mtu importante na hora de divulgar seu blog.Você pede parceria e coloca o link dele no seu site e seu no dele.

Então vou ensinar como fazer um banner com link-me.Copie o código abaixo

<center> 
<img vspace="2" hspace="2" src="URL DA IMAGEM"/>
<textarea cols="15" rows="3" onfocus="this.select()" onmouseover="this.focus()" name="textarea">
<a href="URL DO BLOG"><img border="0" src="URL DA IMAGEM"/></a></textarea>
</center>

 Vá em 'Layout' - 'Elementos da página' - 'Adicionar um Gadget', 'HTML/Javascript' e cole.
 Substitua URL DA IMAGEM pelo link da sua imagemURL DO BLOG pelo link do seu blog/site.


Vai ficar assim








Marcadores: , , ,

Crie seu banner

Vou ensinar a criar um banner , ou seja , imagem com link, para você divulgar , fazer parceria etc...
Faça o seguinte
Crie uma imagem e hospede no http://www.imageshack.us/.

Depois copie o codigo abaixo substituindo  URL DO SITE pela link do seu site e URL DA IMAGEM pelo link da sua imagem.

<a href="URL DO SITE" target="_blank"><img src="URL DA IMAGEM" border="0" /></a>

Adicione o banner onde você quiser!

Marcadores: , , ,

Banner rolando

Para vc que tem bastante parcerias, e não quer aquela montoeira de banners um embaixo do outro, recomendo que fazerm isso. Copie o código abaixo
Vá em 'Layout' - 'Elementos da página' - 'Adicionar um Gadget', 'HTML/Javascript'   e cole um dos códigos abaixo fazendo as devidas alterações - 

Na vertical 


<div align="center"><marquee height="300px" direction="up">BANNERS</marquee></div>

Na Horizontal


<marquee scrollamount="5" onmouseout="this.start();" onmouseover="this.stop();" direction="right">BANNERS</marquee>

Substitua BANNERS pelos banners dos parceiros

Marcadores: , , ,

Citação nas postagens - Blockquote

A tag blockquote significa "citação em bloco".É utilizada na criação de citações longas que não devem ser aninhadas em parágrafos.

A tag blockquote fornece a delimitação de um parágrafo citado que pode conter várias linhas. Esta tag destaca o parágrafo, deslocando-o um pouco para a direita (dependendo da direção do texto). O uso de blockquote como forma de identar o texto foi definido como inadequado pela W3C em favorecimento ao uso de folhas de estilo.

Veja um exemplo

<blockquote>

Exemplo da tag <span style="font-size: small;"><b>blockquote&nbsp;</b></span>
<span style="font-size: small;"><b>TESTE NO CÓDIGOS BLOGGER&nbsp;</b></span>

</blockquote>


Exemplo da tag blockquote 
TESTE NO CÓDIGOS BLOGGER 




Blockquote ainda possui um atributo chamado cite. Cite serve para determinar a página fonte da citação, ou seja, de qual página da internet veio tal citação. Para demonstrar o uso de citações de parágrafo, abaixo está uma pequena frase de amor retirada do site PENSADOR.INFO

<blockquote cite="http://www.pensador.info/frases_de_amor/">

Amo como ama o amor. Não conheço nenhuma outra razão para amar senão  amar. Que queres que te diga, além de que te amo, se o que quero  dizer-te é que te amo?

</blockquote>

Amo como ama o amor. Não conheço nenhuma outra razão para amar senão amar. Que queres que te diga, além de que te amo, se o que quero dizer-te é que te amo?

Fontes - http://www.tiexpert.net
             http://www.tibumweb.com.br

Marcadores: , , , ,

Trocar mensagem de pesquisa do blogger

 
 
Fazer isso é muito fácil, siga o tutorial
Clique 'Layout' - 'Editar HTML' .
Atenção - Antes que continuar, clique em "Baixar modelo completo" para fazer um backup do seu blog
Marque aquela caixinha 'Expandir modelos de widgets'
Procure por (Ctrl + f):

<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
 
Substitua por
 
<div class='status-msg-wrap'>
<li>Arquivos relacionados a &quot;<data:blog.pageName/>&quot;:</li>
</div>
 
 
Substitua Arquivos relacionados a por qualquer outro texto.
 
Depois teste e se estiver tudo bem SALVE E PRONTO! 

Marcadores: , , , , ,

Nuvem de Tags no Blogger


Nuvem de tags – ou lista hierarquizada visualmente — é uma forma de apresentar os itens de conteúdo de um website.
Tag [tégui] é ‘rótulo’, ‘legenda’. Pense na tag como uma categoria simples. As pessoas em geral podem categorizar páginas web, fotos, e vídeos com qualquer tag que faça sentido. O uso das tags na web foi difundido por sites como Technorati, del.icio.us e Flickr.
Uma nuvem de tags em geral reúne um conjunto de tags utilizadas em um determinado website disposto em ordem alfabética, e o volume de conteúdos que o site apresenta em cada tag é mostrado proporcionalmente pelo tamanho da fonte. Dessa forma, em uma mesma interface é possível localizar uma determinada tag tanto pela ordem alfabética como pela frequência da incidência de conteúdos marcados com a mesma tag no referido site. As tags disponibilizadas na nuvem são links que levam a coleções de itens relacionados às palavras da tag.

Para criar uma nuvem de tag é fácil, entre nesse site - Makecloud

Em *Enter Web Site URL: - Coloque a URL do seu blog

Depois clique em 'Get tag cloud Code' 
Aguarde o código aparecer e copie

Vá em 'Layout' - 'Elementos da página' - 'Adicionar um Gadget', 'HTML/Javascript' e cole depois SALVE!


Marcadores: , , ,

Criar template no blogger

Eeee \o/ .. .para a Alegria do blogueiro o blogger lançou um novo recurso.Agora voçe pode criar seu template diiretamente do site.Colocar 2, ou 4 colunas, Trocar o plano de fundo, colocar fundo nas imagens das postagens, trocar as cores. inserir códigos CSS com facilidade.No momento só está disponível no Blogger in Draft mas logo estará disponivel em todos blogs.

Clique aqui para entrar no Blogger in Draft

Ao entrar clique em 'layout' - depois em 'designer de modelo'

 Escolha um modelo

 
Escola a quantidade de coluna


Troque as cores das fontes, dos links, do seu gosto.


E por ai vai...
Entre lá e veja como é fácil personalizar seu blog, deixando do seu jeito.

Marcadores: , , ,

últimos comentários e últimas postagens

Bom pessoal ..esse tutorial eu axei no Códigos blog e vou postas aqui tambem!

Um widget disponível no Blogger há muito tempo e que muitas pessoas ainda não conhecem, é o recurso que mostra o título com o link das últimas postagens ou dos últimos comentários no Blogger, utilizando o feed de qualquer blog ou site.

- Faça login no Blogger, entre em: “Layout” -> “Elementos da Página”. Clique em “Adicionar um Gadget”.

- Escolha a opção: “Feed”.



- Para mostrar as Últimas Postagens adicione o link do feed do seu blog no campo disponível.




Link do feed gerado pelo Blogger (padrão): http://SEU_BLOG.com.br/feeds/posts/default
  • Substitua SEU_BLOG pelo link do seu blog.
Exemplos:
http://codigosblog.com.br/feeds/posts/default
http://codigosblog.blogspot.com/feeds/posts/default

OU

Para mostrar os Últimos Comentários, adicione:

http://SEU_BLOG.com.br/feeds/comments/default
  • Substitua SEU_BLOG pelo link do seu blog.
Exemplos:
http://codigos-bloggerbr.blogspot.com/feeds/posts/default
http://codigos-bloggerbr.blogspot.com/feeds/comments/default

Obs.: Em ambos os casos você pode adicionar o link do FeedBurner.

- Clique em “Continuar”.
Escolha o título, número de postagens a serem exibidas (máximo 5), mostrar ou não a data do item, colocar assinatura do autor ou não, abrir link em outra janela ou não.



- Clique em salvar e pronto! Widget implantado.


Fonte - Códigos blog

Marcadores: , , ,

Texto seguindo o cursor

Nesse tutorial eu vou ensinar como colocar um texto seguindo o cursor do mouse.
Para isso , copie o código abaixo.

<script language="javascript">

//Alterar o Texto que está dentro das Aspas em baixo:
var text='COLOQUE SEU TEXTO AQUI';
var delay=50; // altere aqui velocidade
var Xoff=15; // distancia a contar para a direita do cursor (- Valores em negativo vão para a esquerda)
var Yoff=0; //distancia a contar para baixo desde o cursor (- Valores em negativo vão para cima)
var txtw=10; // Espaço que cada caracter ocupa
var beghtml='<font color="#98b3f2"size="1"><b>'; 
var endhtml='</b></font>'; 
//********** Não alterar o código seguinte **********\\
ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';
for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);
function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}
function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}
function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}
function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}
function getwindowwidth(){


Ler mais...

Marcadores: , , , ,

Widget de TRADUTOR

http://www.sbecotur.org.br/rbecotur/en/images/bandeira_brasil.jpg Esse é um tradutor mtu bom da microsoft*translator.O widget de página da web do Microsoft Translator permite trazer a tradução no local, em tempo real para seu site da web. Os usuários podem ver suas páginas na sua própria língua, sem ter que ir para o site de tradução separada e compartilhar sua página com amigos em vários idiomas. Você pode aprender mais sobre como usar o widget, obter ajuda ou interagir com outros proprietários de site nos fóruns da Microsoft tradutor.


Primeiro entre nesse site - http://www.microsofttranslator.com/Widget/?ref=MSTWidget

Depois configure do seu gosto.

* Site address  - URL do seu site
* Site language - Idioma do seu site
* Color - Escolha a cor desejada do Widget
* Widget width - Tamanho do Widget

Depois clique em 'Generate Code' pra gerar o código e as Copie.
(Obs.- Leia o termo de uso e depois marque a caixinha I agree to the.. antes de gerar o código.)


Vá em 'Layout' - 'Elementos da página' - 'Adicionar um Gadget', 'HTML/Javascript'  cole o código e Salve!

Eu fiz um e ficou mtu bom  Veja.

Marcadores: , , ,

Contador de Postagens e Comentários

Esse é um contador bem simples, para colocar no seu blog faça assim:
Copie o código abaixo.

<center>Nesteblogtemos:<scriptstyle="text/javascript">function
showpostcount(json) {document.write
(parseInt(json.feed.openSearch$totalResults.$t,10));}</script>
<scriptsrc="http://seublog.blogspot.com/feeds/posts/defaultalt=jsonin-script&callback=showpostcount"></script>postagens<script src="http://seublog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> comentários.</center>



Vá em 'Layout' - 'Elementos da página' - 'Adicionar um Gadget', 'HTML/Javascript' e cole o código fazendo as devidas alterações.

Em azul, coloque o texto que quiser.
Em vermelho, a URL do seu blog.

Marcadores: , , , ,

Trocar Divisória de postagens

http://www.creativenonfiction.org/brevity/craft/craftpix/blog_icon.jpg 
 De um toque profissional e elegante no seu blog trocando a barra que divide as postagens! Para isso, siga o pequeno tutorial abaixo.
-Crie uma imagem de 25px de altura, e de largura coloque o tamanho desejado e que caiba no seu no template =)
 -Copie o código abaixo e substituindo URL DA IMAGEM pela link da imagem hospedada que você fez.



...................................................................................................................................................
.post {
clear: both;
background: url(URL DA IMAGEM) repeat-x top left;
padding-top: 25px;
margin-bottom: -30px;
}

OBS.- Não esqueça de substituir URL DA IMAGEM pela link da imagem hospedada que você criou.

Exemplo.

.post {
clear: both;
background: url(http://www.palamarsoftware.com.ar/Interfaz/barra2.jpg) repeat-x top left;
padding-top: 25px;
margin-bottom: -30px;
}

Faça o login no blogger, vá em 'Layout' - ' Modelo' = 'Editar HTML'
Pegue o código e cole antes do tag  ]]></b:skin>         (ctrl + f pra pesquisar)

Agora teste e se der certo salve!

Marcadores: , ,