<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Novo na Rede &#187; Banner</title>
	<atom:link href="http://novonarede.com.br/blog/index.php/tag/banner/feed/" rel="self" type="application/rss+xml" />
	<link>http://novonarede.com.br/blog</link>
	<description>Blogging, lifestyle, web 2.0, webdesign e mais...</description>
	<lastBuildDate>Sun, 22 Aug 2010 12:48:48 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Link-me: Como Criar Uma Caixinha Para o Seu Banner</title>
		<link>http://novonarede.com.br/blog/index.php/2010/02/link-me-como-criar-uma-caixinha-para-o-seu-banner/</link>
		<comments>http://novonarede.com.br/blog/index.php/2010/02/link-me-como-criar-uma-caixinha-para-o-seu-banner/#comments</comments>
		<pubDate>Mon, 01 Feb 2010 19:10:51 +0000</pubDate>
		<dc:creator>Tico Esteves</dc:creator>
				<category><![CDATA[Dicas e Tutoriais]]></category>
		<category><![CDATA[Banner]]></category>

		<guid isPermaLink="false">http://novonarede.com.br/blog/index.php/2010/02/link-me-como-criar-uma-caixinha-para-o-seu-banner/</guid>
		<description><![CDATA[<a href="http://novonarede.com.br/blog/index.php/2010/02/link-me-como-criar-uma-caixinha-para-o-seu-banner/"><img align="left" hspace="5" width="150" height="150" src="http://novonarede.com.br/blog/wp-content/uploads/LinkmeComoCriarUmaCaixinhaParaoSeuBanner-150x150.jpg" class="alignleft wp-post-image tfe" alt="Link-me: Como Criar Uma Caixinha Para o Seu Banner" title="Link-me: Como Criar Uma Caixinha Para o Seu Banner" /></a>Hoje vamos aprender a criar uma caixinha &quot;Link-me&quot;. Já falamos por aqui sobre o que é um banner, mas antes de mais nada, para ser sincero&#8230;]]></description>
			<content:encoded><![CDATA[<p align="justify"><img style="border-right-width: 0px; margin: 0px 10px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Link-me: Como Criar Uma Caixinha Para o Seu Banner" border="0" alt="Link-me: Como Criar Uma Caixinha Para o Seu Banner" align="left" src="http://novonarede.com.br/blog/wp-content/uploads/LinkmeComoCriarUmaCaixinhaParaoSeuBanner.jpg" width="244" height="244" /> Hoje vamos aprender a <strong>criar uma caixinha &quot;Link-me&quot;.</strong> Já falamos por aqui sobre <a href="http://novonarede.com.br/blog/index.php/2010/01/voc-sabe-o-que-um-banner/" target="_blank">o que é um banner</a>, mas antes de mais nada, para ser sincero eu nem me lembro mais onde aprendi a fazer essa caixinha, uma vez que comecei a ver isso com HTML e JavaScript antes mesmo de pensar em criar o meu primeiro blog. Mas de qualquer forma, dei uma pesquisada e não encontrei em nenhum blog uma explicação muito detalhada, então vamos lá!</p>
<p align="justify">Para começar, vamos entender que a caixinha <strong>Link-me</strong> nada mais é que um elemento <em>textarea</em> com um código dentro. O código por sua vez serve para fazer aparecer a imagem do banner ao mesmo tempo em que linka essa imagem ao blog.</p>
<p align="justify">Para quem não entende nada de html é importante saber que a tag <em>&lt;textarea&gt;</em> precisa ser fechada para evitar erros. Na prática é algo assim:</p>
<blockquote><p>&lt;textarea&gt;</p>
<p>Seu código aqui</p>
<p>&lt;/textarea&gt;</p>
</blockquote>
<p align="justify">&#160;</p>
<h3>Criando Seu Banner</h3>
<p align="justify">Antes de criar a sua caixinha você vai precisar de um banner pronto. Existem serviços on-line que oferecem a criação de banners grátis. Em uma pesquisa rápida encontrei pela rede:</p>
<p align="justify"><a href="http://www.criarsites.com/crie-seu-banner-online/" target="_blank">Crie seu Banner online</a>     <br />Uma lista com serviços on-line escrita pelo Celso Lemes do <u>Criar Sites</u>.</p>
<p align="justify">Uma outra opção é fazer um banner com o logotipo do blog. Bastando utilizar um programa de edição de imagens para acertar o seu tamanho.</p>
<p align="justify">Um programa que recomendo e já escrevi um tutorial de como usá-lo para fazer <a href="http://novonarede.com.br/blog/index.php/2010/01/montagem-como-colocar-o-rosto-de-um-amigo-no-corpo-de-uma-mulher/" target="_blank">montagens com fotos dos seus amigos</a> aqui é o <a href="http://www.baixaki.com.br/download/photofiltre.htm" target="_blank">PhotoFiltre</a>.</p>
<p align="justify">Enfim, como fazer o banner é você quem decide, o que vamos ver aqui é como criar a caixinha <strong>Link-me</strong>.</p>
<p align="justify">Hospede o banner em algum lugar, basta que você tenha cuidado porque a ideia é que essa imagem seja mostrada em vários e vários blogs (que vão linkar o seu blog né?). Então você não pode se dar ao luxo de hospedar essa imagem em um lugar qualquer.</p>
<p align="justify">&#160;</p>
<h3>Criando Sua Caixinha Link-me</h3>
<p align="justify">Com a imagem hospedada e a url (endereço) dela em mãos, vamos ao código da caixinha <strong>Link-me</strong>:</p>
<blockquote><p><font color="#ff0000">Copie o código abaixo e cole na sua sidebar:</font>       <br />&lt;br/&gt;&lt;br/&gt;&lt;textarea rows=&quot;3&quot; cols=&quot;21&quot; onfocus=&quot;this.select()&quot; onmouseover=&quot;this.focus()&quot;&gt;&lt;a href=&quot;<font color="#ff0000">URLDOBLOG</font>&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;<font color="#ff0000">URLDAIMAGEM</font>&quot;/&gt;&lt;/a&gt;&lt;/textarea&gt;       <br />&lt;a href=&quot;<font color="#ff0000">URLDOBLOG</font>&quot; target=&quot;_blank&quot; title=&quot;<font color="#ff0000">NOMEDOBLOG</font>&quot;&gt;&lt;img border=&quot;0&quot; alt=&quot;Banner&quot; src=&quot;<font color="#ff0000">URLDAIMAGEM</font>&quot;/&gt;&lt;/a&gt;</p>
</blockquote>
<p align="justify">Faça as alterações necessárias:</p>
<p align="justify"><font color="#ff0000">URLDOBLOG</font> – Substitua pela url (endereço) da página inicial do seu blog.     <br />Exemplo: http://www.novonarede.com.br/blog</p>
<p align="justify"><font color="#ff0000">URLDAIMAGEM</font> – Substitua pela url (endereço) da imagem que você hospedou.</p>
<p align="justify"><font color="#ff0000">NOMEDOBLOG</font> – Substitua pelo nome do seu blog! <img src='http://novonarede.com.br/blog/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' />      <br />Exemplo: Novo na Rede </p>
<p align="justify">Onde está escrito <font color="#ff0000">Copie o código abaixo e cole na sua sidebar:</font> você pode escrever o que quiser para a &quot;chamada&quot; da sua caixinha <strong>Link-me</strong>.</p>
<p align="justify"><strong>Dica:</strong> se você quiser centralizar a caixinha e o banner, basta adicionar o &lt;center&gt;&lt;/center&gt; ao código, assim:</p>
<blockquote><p>&lt;center&gt;      <br />Código da caixinha       <br />&lt;/center&gt;</p>
</blockquote>
<p align="justify">&#160;</p>
<h3 align="justify">Instalação</h3>
<p align="justify"><a href="http://www.blogger.com/" target="_blank">Blogger</a>     <br />Crie um campo <em>HTML/JavaScript</em> na sua sidebar (barra lateral) e adicione o código da sua caixinha <strong>Link-me!</strong> </p>
<p align="justify"><a href="http://wordpress.org/" target="_blank">WordPress.org</a> ou <a href="http://pt.wordpress.com/" target="_blank">WordPress.com</a>     <br />Vá em <em>Appearance –&gt; Widgets</em> e adicione um campo <em>Text </em>a sua sidebar. Aí é só colar o código lá e salvar.</p>
<p align="justify">&#160;</p>
<h3 align="justify">Entendendo o código</h3>
<p align="justify">Tanto o <em>onfocus=&quot;this.select()&quot; e onmouseover=&quot;this.focus()&quot;</em> eu aprendi com JavaScript básico e eles são responsáveis pela seleção do código quando o mouse do leitor passa por cima do código e sai dele.</p>
<p align="justify">O <em>rows=&quot;3&quot; cols=&quot;21&quot;</em> se refere a altura e a largura da textarea, que é a área onde está o código aparente para o leitor (a caixinha propriamente dita). Se você quiser uma caixinha mais alta, mude o <em>rows</em> para 4, 5, 6… você que sabe. Se quiser mais larga mude o <em>cols</em> para 22, 23, 24… ou 20, 19, 18… se quiser mais estreita.</p>
<p align="justify"><strong>Dica:</strong> Lembre-se sempre de tomar muito cuidado na hora de alterar o código para não apagar nenhuma aspa, caso contrário o código não vai funcionar!</p>
<p align="justify">Boa sorte e aproveite a sua <strong>caixinha Link-me</strong>!</p>
<p align="justify">Faça bom uso!</p>
<p><em>Imagem: </em><a href="http://www.sxc.hu/profile/casch" target="_blank"><em>Konstantin Schneider</em></a></p>
<p align="justify"><em>PS: Este é mais um tutorial do antigo Novo na Rede que foi atualizado e republicado.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://novonarede.com.br/blog/index.php/2010/02/link-me-como-criar-uma-caixinha-para-o-seu-banner/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Voc&#234; Sabe o que &#233; um Banner?</title>
		<link>http://novonarede.com.br/blog/index.php/2010/01/voc-sabe-o-que-um-banner/</link>
		<comments>http://novonarede.com.br/blog/index.php/2010/01/voc-sabe-o-que-um-banner/#comments</comments>
		<pubDate>Fri, 29 Jan 2010 18:51:19 +0000</pubDate>
		<dc:creator>Tico Esteves</dc:creator>
				<category><![CDATA[Dicas e Tutoriais]]></category>
		<category><![CDATA[Banner]]></category>
		<category><![CDATA[Imagens]]></category>

		<guid isPermaLink="false">http://novonarede.com.br/blog/index.php/2010/01/voc-sabe-o-que-um-banner/</guid>
		<description><![CDATA[<a href="http://novonarede.com.br/blog/index.php/2010/01/voc-sabe-o-que-um-banner/"><img align="left" hspace="5" width="150" height="150" src="http://novonarede.com.br/blog/wp-content/uploads/Banner-150x150.jpg" class="alignleft wp-post-image tfe" alt="Você Sabe o que é um Banner?" title="Você Sabe o que é um Banner?" /></a>E aí? Você sabe o que é um banner? Tudo bem que a pergunta parece ridícula para quem já está a algum tempo nesse &quot;mundinho&quot; conhecido&#8230;]]></description>
			<content:encoded><![CDATA[<p align="justify"><img style="border-bottom: 0px; border-left: 0px; margin: 0px 10px 0px 0px; display: inline; border-top: 0px; border-right: 0px" title="Você Sabe o que é um Banner?" border="0" alt="Você Sabe o que é um Banner?" align="left" src="http://novonarede.com.br/blog/wp-content/uploads/Banner.jpg" width="215" height="215" /> E aí? <strong>Você sabe o que é um banner?</strong> Tudo bem que a pergunta parece ridícula para quem já está a algum tempo nesse &quot;mundinho&quot; conhecido como blogosfera, mas você já parou para pensar sobre o assunto? Esse post é para você que não faz ideia do que seja um banner, mas também para você que tem um banner, mas nunca parou para pensar sobre isso, apenas usa.</p>
<p align="justify">Primeiro, a resposta:</p>
<p align="justify">Um banner, basicamente, pode ser definido como uma forma de publicidade (hum!). Que por sua vez é construído a partir de uma imagem (que pode ser GIF, JPG, BMP e outros Gs, Js). </p>
<p align="justify">&#160;</p>
<h3 align="justify">Impressão:</h3>
<p align="justify">Sempre que uma página contendo um banner é carregada em um navegador, da-se o nome de &quot;impressão&quot;. Daí os anúncios e/ou anunciantes que pagam por impressão (geralmente 1000).</p>
<p align="justify">&#160;</p>
<h3 align="justify">Histórico:</h3>
<p align="justify">O primeiro anúncio clicável (que mais tarde veio a ser conhecido pelo termo &quot;banner&quot;) foi vendido pela Rede Global Navigator (GNN), em 1993, para uma firma de advocacia.</p>
<p align="justify">HotWired (o primeiro site a vender banners em grandes quantidades) cunhou o termo &quot;banners&quot; e foi a primeira empresa a fornecer relatórios sobre a taxa de cliques de seus clientes. O primeiro banner vendido pela HotWired foi para a AT &amp; T (fornecedor de serviços telefônicos e de de acesso à Internet sem fio nos Estados Unidos), e foi colocado online em 25 de outubro de 1994.</p>
<p align="justify">Nada como um pouco de conhecimento! <img src='http://novonarede.com.br/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  </p>
<p align="justify"><strong>Pergunta 2:</strong></p>
<p align="justify">&#160;</p>
<h3 align="justify">Você sabe quais os tamanhos &quot;oficiais&quot; de banners?</h3>
<p align="justify">Pois bem, segundo a <a href="http://www.iab.net/" target="_blank">Interactive Advertising Bureau</a> (IAB para os íntimos) &#8211; Uma organização empresarial americana que desenvolve padrões para a indústria (pelo que eu pude apurar) &#8211; recomenda nove tamanhos específicos de anúncios para sites (tamanhos em pixels):</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="Tamanhos oficiais de banners" border="0" alt="Tamanhos oficiais de banners" src="http://novonarede.com.br/blog/wp-content/uploads/Tamanhosoficiaisdebanners.png" width="478" height="459" /> </p>
<p align="justify">Além dos tamanhos oficiais mostrados acima, hoje em dia também é muito comum o uso de banners 728&#215;90 e 180&#215;600. No mais o &quot;oficiais&quot; (entre aspas) que aparece na pergunta não é sem motivo. </p>
<p align="justify">Logicamente que se o site/blog é seu, você usa o tamanho que quiser, mas é sempre bom saber que na hora de negociar, você vai ter que seguir algumas regras.</p>
<p align="justify">Faça bom uso!</p>
<p align="justify"><em>Conteúdo: </em><a href="http://en.wikipedia.org/wiki/Web_banner" target="_blank"><em>Wikipédia &#8211; Web banner</em></a><em>      <br />Mais alguns artigos de revistas e muita curiosidade mesmo. </em> <img src='http://novonarede.com.br/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  <em>&#160; <br />Imagem: </em><a href="http://www.sxc.hu/profile/voodoo4u2n" target="_blank"><em>Sheila VooDoo</em></a></p>
]]></content:encoded>
			<wfw:commentRss>http://novonarede.com.br/blog/index.php/2010/01/voc-sabe-o-que-um-banner/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
