tag:blogger.com,1999:blog-11043749576602635572024-03-14T07:38:38.709-03:00SemNomeTkoifthttp://www.blogger.com/profile/11641925802256054346noreply@blogger.comBlogger13417tag:blogger.com,1999:blog-1104374957660263557.post-70412940828312146302011-02-03T16:33:00.002-03:002011-02-03T16:37:06.158-03:00Como listar os últimos posts no Blogger<script src="http://semnomenet.googlecode.com/files/posts_categoria.js" type="text/javascript"></script> <center><img style="DISPLAY: block; MARGIN: 10px; clear:both;" alt="Links" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpdIASsoqGqGsZnJUUw-fnrGbt1hW07YHzq4pBGZ0AWqc_7r5a_7c39qvRt1GGn6pR7rT0uPXGhTEmfzyy-K6YFl52AZ_zsLq8XR_pSvg_bYyY6cgRRyGyf7Rk2JARdCvFk8InHrxOxqBN/s400/corrente.jpg" border="0" /><span class="legenda">[Liste seus links e os de quem você quiser!]</span></center> <p>Tem procurado formas de listar postagens recentes de um blog, mas sem sucesso? Tem buscado alguma maneira de listar as últimas postagens de uma categoria?</p> <p>Esse post poderia facilmente se chamar "<strong>Listar postagens num post</strong>", "<strong>Página de categoria personalizada</strong>" ou "<strong><a href="http://semnome.net/2010/11/banner-de-posts-recentes.html">Widget Posts recentes</a></strong>".</p> <p>Ao contrário do <a href="http://semnome.net/2010/11/banner-de-posts-recentes.html">Banner de posts recentes</a>, ou dos<a href="http://semnome.net/2009/11/widgets-utilizando-feeds-no.html"> widgets de feeds</a>, esse script tem algumas funções a mais:</p> <ul> <li>Widgets com listagens das últimas postagens</li> <li>Widgets com listagens das últimas postagens por categoria</li> <li>Lista de postagens dentro de um post</li> <li>Lista de postagens de uma categoria dentro de um post</li> </ul> <p>Ou seja, esse script é um script completo de listagem de posts para Blogger (Blogspot). Nesse artigo, ensinarei como utilizá-lo e mostrarei alguns exemplos:</p> <a name='more'></a><strong>Atenção! </strong>Caso você esteja lendo esse post por feed, é possível que as listas não apareçam. <h2><strong>O script</strong></h2> <p>O primeiro passo para utilizar o script é Ir em <strong>Editar HTML</strong> e adicionar a seguinte linha <u>antes de <strong></head></strong></u></p> <blockquote class="code"><script src='http://semnomenet.googlecode.com/files/posts_categoria.js' type='text/javascript'></script></blockquote> <p>Após isso, você pode usar as funções em qualquer lugar: postagens, código HTML do blog ou dentro de um widget. Basta usar as funções do próximo tópico.</p> <h2><strong>Funções</strong></h2> <p> O script é baseado em duas funções básicas: listar postagens do blog e listar postagens de uma categoria. A sintaxe das funções é:</p> <blockquote class="code">lista_posts(<strong>num</strong>, <strong>[blog]</strong>); //Lista de posts do blog inteiro <br /> lista_categoria(<strong>cat</strong>,<strong>num</strong>,<strong>[blog]</strong>); // Lista de posts por categoria </blockquote> <ul> <li><strong>num</strong> – número de itens a aparecer na lista</li> <li><strong>cat</strong> – nome da categoria a ser listada</li> <li><strong>[blog]</strong> – Url do blog (<strong>opcional</strong>). Caso não seja adicionada, irá listar os posts do blog atual.</li> </ul> <h2><strong> </strong><strong>Uso do script</strong></h2> <h3><strong>» Listar os últimos posts do blog</strong></h3> <blockquote class="code"><script type="text/javascript"><br /> lista_posts(<strong>10</strong>);<br /> </script></blockquote> <p><strong>Exemplo:</strong> Os 5 últimos posts do SemNome foram:</p> <script type="text/javascript">lista_posts(5);</script> <h3><strong>» Listar os últimos post de um blog qualquer</strong></h3> <blockquote class="code"><script type="text/javascript"><br /> lista_posts(<strong>10</strong>,"<strong>URL_DO_BLOG</strong>");<br /> </script></blockquote> <p><strong>Exemplo:</strong> Os 3 últimos posts do <a href="http://www.blognerd.net">Blog Nerd</a> foram:</p> <script type="text/javascript">lista_posts(3,"www.blognerd.net");</script> <h3><strong>» Listar os últimos posts de uma determinada categoria do blog</strong></h3> <blockquote class="code"><script type="text/javascript"><br /> lista_categoria("<strong>CATEGORIA</strong>",<strong>10</strong>,"<strong>URL_DO_BLOG</strong>");<br /> </script></blockquote> <p><strong>Exemplo:</strong> Os 7 últimos posts da categoria "<a href="http://semnome.net/search/Label/Blog">Blog</a>" do SemNome foram:</p> <script type="text/javascript">lista_categoria("Blog",7);</script> <h3><strong>» Listar os últimos posts de uma categoria de um blog qualquer</strong></h3> <blockquote class="code"><script type="text/javascript"><br /> lista_categoria("<strong>CATEGORIA</strong>",<strong>10</strong>,"<strong>URL_DO_BLOG</strong>");<br /> </script></blockquote> <p><strong>Exemplo:</strong> os 5 últimos tutoriais do <a href="http://www.photoshoptutoriais.com">Photoshop Tutoriais</a> com a categoria "Tratamento" (tratamento de fotos) foram:</p> <script type="text/javascript">lista_categoria("Tratamento",5,"http://www.photoshoptutoriais.com/");</script> <p>* Uma coisa a se observar é que, caso tenha menos postagens que o solicitado, ele só irá listar as que existem.</p> <h3><strong>» Listar Posts com duas categorias</strong></h3> <p>Caso queira listar artigos que tenham duas categorias, basta usar o mesmo script acima, só que citando as duas categorias, sem espaços, separadas por uma barra:</p> <blockquote class="code"><script type="text/javascript"><br /> lista_categoria("<strong>Blog/Tutoriais</strong>",5);<br /> </script></blockquote> <p>O exemplo acima lista os últimos 5 artigos do SemNome que tenham <strong>as duas</strong> (não uma das duas) categorias: <strong>Blogs</strong> e <strong>Tutoriais</strong>:</p> <script type="text/javascript">lista_categoria("Blog/Tutoriais",5,"semnome.net");</script> <p>E então, o que você achou? Acha que deve ser mudado algo? Tem alguma sugestão de função para isso?<br /> Em breve serão postados mais widgets baseados nesse script. Aguarde!</p><div class="blogger-post-footer"><hr />
Artigo original do blog <a href="http://semnome.net">SemNome</a>.<br/>
Plágio é crime.
<hr /></div>Tkoifthttp://www.blogger.com/profile/11641925802256054346noreply@blogger.com0tag:blogger.com,1999:blog-1104374957660263557.post-54351804894682956252011-01-26T10:29:00.001-03:002011-01-26T10:29:03.316-03:00Como transformar vários feeds em 1<p>Seja para ping ou para widgets, às vezes sentimos a necessidade de unir os feeds. A minha necessidade ocorreu quando criei <a href="http://semnomenet.dihitt.com.br/" target="_blank">a comunidade SemNome no diHITT</a>, então criei o <a href="http://feeds.feedburner.com/SemNomeGroup" target="_blank">feed SemNome Group</a>. </p> <p>Se você tem uma comunidade no diHITT ou quer fazer um widget com o feed de vários blogs, provavelmente é isso que você estava procurando. Vamos ao tutorial:</p> <a name='more'></a> <p>1 - Entre em <a href="http://pipes.yahoo.com/pipes/" target="_blank">http://pipes.yahoo.com/</a>  e clique em “<strong>Create a pipe</strong>”. Faça login se necessário.</p> <p align="center"><a href="http://lh3.ggpht.com/_NBm6T2_gd54/TUAg-mDI5QI/AAAAAAAACA0/--quRghjPwU/ScreenClip000000%5B4%5D.jpg?imgmax=800"><img style="margin: 0px 0px 10px" height="328" alt="Tela inicial do Yahoo Pipes" src="http://lh3.ggpht.com/_NBm6T2_gd54/TUAhBjDYqkI/AAAAAAAACA4/Ij9tWPvfpqI/ScreenClip000000_thumb%5B1%5D.jpg?imgmax=800" width="500" border="0" /></a> </p> <p>2 - Nessa página, arraste da barra lateral 2 módulos:</p> <p><strong>Source -> Fetch feed</strong></p> <p align="center"><img style="margin: 0px 0px 10px" height="668" alt="Fetch Feed" src="http://lh6.ggpht.com/_NBm6T2_gd54/TUAhGwN6-nI/AAAAAAAACA8/mvaG8VvEGsA/ScreenClip000001%5B3%5D.jpg?imgmax=800" width="549" border="0" /></p> <p><strong>Operators -> Sort</strong></p> <p align="center"><strong><img style="margin: 0px 0px 10px" height="668" alt="Sort" src="http://lh5.ggpht.com/_NBm6T2_gd54/TUAhMOKwEHI/AAAAAAAACBA/so5pnoWvgJ4/ScreenClip000002%5B3%5D.jpg?imgmax=800" width="549" border="0" /> </strong></p> <p>3 - Ligue <strong><u>Fetch Feed</u> ao <u>Sort</u></strong> e o <strong><u>Sort</u> ao <u>Pipe Output</u></strong>:</p> <p align="center"><img style="margin: 0px 0px 10px" height="518" alt="Módulos Ligados" src="http://lh5.ggpht.com/_NBm6T2_gd54/TUAhPiGiMoI/AAAAAAAACBE/qT111BCz49U/ScreenClip000003%5B3%5D.jpg?imgmax=800" width="352" border="0" /> </p> <p>4 - No Fetch Feed, clique no “+” ao lado de URL, até ter o número de campos desejados.  Adicione as URLs dos seus feeds. No meu caso, eu coloquei 3:</p> <p align="center"><img style="margin: 0px 0px 10px" height="399" alt="Feeds adicionados" src="http://lh4.ggpht.com/_NBm6T2_gd54/TUAhTiTpqwI/AAAAAAAACBI/IuuQ5kWDiMQ/ScreenClip000004%5B3%5D.jpg?imgmax=800" width="327" border="0" /> </p> <p><strong>Nota</strong>: Não coloque muitos itens de feed, senão o Yahoo Pipes não rodará a pipe. Eu limitei a 1 item para cada feed:</p> <p><a href="http://semnome.net/" target="_blank">http://semnome.net/atom.xml?redirect=false&<strong>max-results=1</strong></a> <br /><a href="http://www.blognerd.net/" target="_blank">http://www.blognerd.net/atom.xml?redirect=false&<strong>max-results=1</strong></a> <br /><a href="http://www.toosco.net/" target="_blank">http://www.toosco.net/atom.xml?redirect=false&<strong>max-results=1</strong></a> </p> <p>5 - No campo <strong>Sort</strong>, deixe as opções em “Sort by <strong>item.pubDate</strong> in <strong>descending order</strong>”:</p> <p align="center"><img style="margin: 0px 0px 10px" height="430" alt="Sort configurado" src="http://lh5.ggpht.com/_NBm6T2_gd54/TUAhXX9bcwI/AAAAAAAACBM/p8C0w7c2UGM/ScreenClip000005%5B3%5D.jpg?imgmax=800" width="327" border="0" /> </p> <p>6 - Clique em <strong>untitled</strong> e altere para o título de Feed desejado.</p> <p align="center"><img style="margin: 0px 0px 10px" height="63" alt="Untitled Pipe" src="http://lh5.ggpht.com/_NBm6T2_gd54/TUAhaDPM7vI/AAAAAAAACBQ/qKQibHeqLUw/ScreenClip000006%5B3%5D.jpg?imgmax=800" width="354" border="0" /></p> <p align="center"><img style="margin: 0px 0px 10px" height="63" alt="Pipe com novo nome" src="http://lh6.ggpht.com/_NBm6T2_gd54/TUAhdB9lWjI/AAAAAAAACBU/vGAFY6YjWrg/ScreenClip000007%5B3%5D.jpg?imgmax=800" width="553" border="0" /> </p> <p>7 - Clique em <strong>Save</strong></p> <p align="center"><strong><img style="margin: 0px 0px 10px" height="63" alt="Salvar pipe" src="http://lh3.ggpht.com/_NBm6T2_gd54/TUAhgEPOgPI/AAAAAAAACBY/wvyzM1xl0Ds/ScreenClip000008%5B3%5D.jpg?imgmax=800" width="363" border="0" /> </strong></p> <p>8 – Após salvar, clique em “<strong>Run pipe</strong>”.</p> <p align="center"><img style="margin: 0px 0px 10px" height="63" alt="Pipe Salva" src="http://lh6.ggpht.com/_NBm6T2_gd54/TUAhh4BufSI/AAAAAAAACBc/n6ztQrslcco/ScreenClip000009%5B3%5D.jpg?imgmax=800" width="449" border="0" /></p> <p>Veja como a nossa ficou (<a href="http://pipes.yahoo.com/pipes/pipe.info?_id=f2b7254d02b18a6735c01ab4342d0ed1" target="_blank">Clique aqui para ver em ação</a>): </p> <p align="center"><img style="margin: 0px 0px 10px" height="253" alt="Pipe em ação" src="http://lh6.ggpht.com/_NBm6T2_gd54/TUAhkQAcxdI/AAAAAAAACBg/ft7haq2UWP8/ScreenClip000010%5B2%5D.jpg?imgmax=800" width="320" border="0" /> </p> <p>9 - Na Pipe, clique em “<strong>Get as RSS</strong>” (<a href="http://pipes.yahoo.com/pipes/pipe.run?_id=f2b7254d02b18a6735c01ab4342d0ed1&_render=rss" target="_blank">Confira o nosso aqui</a>)</p> <p>10 - Copie a URL do feed na barra do navegador.</p> <p align="center"><img style="margin: 0px 0px 10px" height="22" alt="URL do feed mesclado" src="http://lh4.ggpht.com/_NBm6T2_gd54/TUAhnaG69eI/AAAAAAAACBk/UMk4akYx8UY/ScreenClip000011%5B3%5D.jpg?imgmax=800" width="500" border="0" /> </p> <p>11 - Pronto! Você pode usar esse feed com a URL dada ou usá-lo no FeedBurner.</p> <div class="blogger-post-footer"><hr />
Artigo original do blog <a href="http://semnome.net">SemNome</a>.<br/>
Plágio é crime.
<hr /></div>Tkoifthttp://www.blogger.com/profile/11641925802256054346noreply@blogger.com0tag:blogger.com,1999:blog-1104374957660263557.post-10678310189725004952011-01-23T10:39:00.001-03:002011-01-23T10:39:12.983-03:005 dicas para ganhar links espontâneos para seu blog<center><img style="display: block; margin: 10px; text-align: center" alt="Links" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpdIASsoqGqGsZnJUUw-fnrGbt1hW07YHzq4pBGZ0AWqc_7r5a_7c39qvRt1GGn6pR7rT0uPXGhTEmfzyy-K6YFl52AZ_zsLq8XR_pSvg_bYyY6cgRRyGyf7Rk2JARdCvFk8InHrxOxqBN/s400/corrente.jpg" border="0" /></center> <p><strong>Link</strong> é uma palavra inglesa que significa “ligação”. Na blogosfera, essas ‘ligações’ são importantes para que leitores de outros blogs possam encontrar o seu.</p> <p>Links espontâneos são aqueles que o seu blog recebe de outros blogs de forma espontânea: o blogueiro visita seu blog, acha seu artigo útil, legal ou importante e linka seu conteúdo.</p> <p>Porém, esses links não são tão fáceis de conseguir, pois não basta seu conteúdo apenas ser bom: tem que ser interessante suficiente para fazer outro blogueiro criar um artigo e linkar seu conteúdo.</p> <p>Hoje veremos algumas dicas para ganhar links espontâneos de outros blogs:</p> <a name='more'></a> <p><strong>1 - Seja o mais original possível</strong></p> <p>Você linkaria um conteúdo que já viu em dezenas de outros blogs? <br />Se você não linkaria, por que outros blogueiros linkariam o seu?</p> <p><strong>Seja original</strong> no que faz, de preferência, seja o único. Assim, os leitores acharão o seu post altamente útil e linkarão.</p> <p><strong>2 - Linke outros blogs</strong></p> <p>Ao linkar e mandar visitas para outro blog, o dono deste poderá sentir a necessidade de retribuir com a mesma moeda. Assim, você “corre o risco” de ser linkado num próximo post dele.</p> <p>Claro que essa tática não funcionará se o nível do seu blog é bem menor que o do blog que você quer linkar, mas tem grandes chances de funcionar caso você saiba escolher quais blogs linkar.</p> <p>Mas preste atenção: <strong>Não linke só para receber links de volta</strong>. Se você fizer isso, provavelmente não terá links. Como dito na <strong>dica 1</strong>, você deve produzir conteúdo original e útil para os outros leitores.</p> <p><strong>3 - Seja útil nos comentários</strong></p> <p> Você pode – e deve – escrever comentários que complementem o que o autor disse nos seus artigos. <br />Que dicas você daria para complementar o que o autor disse nesse post? Quais informações ele poderia ter passado? Ao ser útil para um autor nos seus comentários, você pode ganhar as visitas dele, assim como as visitas dos leitores deles, que entrarão no seu blog pelo fato de você ter sido útil.</p> <p>Assim, mais leitores encontrarão o seu blog por ser útil, o que aumenta as suas possibilidades de ganhar links.</p> <p><strong>Nota: </strong><a href="http://semnome.net/2009/01/como-ganhar-mais-visitas-comentando.html">Comente com OpenID</a> – Jamais coloque o link no corpo de seu comentário, nem como assinatura!</p> <p><strong>4 - Escreva artigos virais</strong></p> <p>Você pode realmente ver o sucesso dos artigos virais de outros blogs. Vários artigos sobre o que está acontecendo agora, sempre com algo inédito e interessante.</p> <p>Como o próprio nome já diz, esses artigos se espalham como vírus: você verá links para eles em vários blogs e redes sociais.</p> <p>Porém, escrever um artigo viral não é nada fácil. Confira no artigo “<a href="http://www.escoladinheiro.com/2010/11/03/25-formulas-para-criar-artigo-viral-em-seu-blog/" target="_blank">Como criar um artigo viral</a>”, do <a href="http://www.escoladinheiro.com/" target="_blank">Escola Dinheiro</a>, como fazer um.</p> <p><strong>5 - Seja visível na web</strong></p> <p>Não adianta escrever artigos originais se ninguém vai te achar por eles. Então, para dar mais visibilidade ao seu blog na web, siga as dicas:</p> <ul> <li><a href="http://semnome.net/2010/01/como-fazer-boas-parcerias.html">Faça parcerias</a> com outros blogs do mesmo nicho que o seu </li> <li>Nos fóruns, adicione seu blog à sua assinatura. Assim, todas as suas postagens terão seu link. </li> <li>Nas redes sociais, poste o link do seu blog no seu perfil. </li> <li>Nos outros blogs, <a href="http://semnome.net/2009/01/como-ganhar-mais-visitas-comentando.html" target="_blank">comente utilizando sua URL</a>. </li> <li>Escreva guest-posts em outros blogs do mesmo nicho que o seu. </li> </ul> <p> </p> <p>Dê ao seu blog a visualização que ele merece, assim você ganhará mais visitantes e mais links de outros blogs. Mas tome cuidado: <strong>Não faça SPAM!</strong></p> <p>Essas são minhas dicas para ganhar mais links de outros blogs. Tem alguma outra dica a ser compartilhada? Deixe nos comentários.</p> <div class="blogger-post-footer"><hr />
Artigo original do blog <a href="http://semnome.net">SemNome</a>.<br/>
Plágio é crime.
<hr /></div>Tkoifthttp://www.blogger.com/profile/11641925802256054346noreply@blogger.com0tag:blogger.com,1999:blog-1104374957660263557.post-1403116482895245302011-01-21T11:03:00.001-03:002011-01-21T11:03:06.127-03:00Como e porque escrever guest posts<center><img style="display: block; margin: 10px" height="320" alt="Escreva!" src="http://lh3.ggpht.com/_NBm6T2_gd54/TTmSGCQtohI/AAAAAAAAB_Y/v5R0MonFSis/image%5B2%5D.png?imgmax=800" width="320" border="0" /> </center> <p>Você já ouviu falar no termo <em>guest post</em>? Ele se refere às postagens de um blog que são escritas por outro escritor (guest = convidado).</p> <p>E por que eles têm importância? Não são artigos como quaisquer outros?</p> <p>Não. Eles não são. E você vai descobrir assim que ler os motivos:</p> <a name='more'></a> <p><strong>Motivo 1: Os blogs do seu nicho não são seus concorrentes</strong></p> <p>Você não deve tratar blogs do mesmo nicho que o seu como concorrentes. Eles são amigos, que irão te ajudar a crescer como um blogueiro. </p> <p>O conteúdo desses blogs poderá complementar o seu e servir de base para novos artigos. Além disso, os leitores deles procuram pelo mesmo conteúdo que você escreve.</p> <p><strong>Motivo 2: Você não irá perder conteúdo</strong></p> <p>Se você se perguntou “Por que eu deveria escrever um artigo para um blog se eu posso escrever para o meu?”, eis a resposta: você não perderá um artigo: você ganhará mais leitores com isso.</p> <p>Você não necessita escrever algo que nunca foi dito em nenhum lugar, basta apenas escrever algo que aquele blog não tenha. Você pode escrever uma lista exclusiva, algo como uma compilação de tudo que está relacionado ao nicho. </p> <p><strong>Motivo 3: Seu conteúdo estará disponível para todos os leitores deste blog</strong></p> <p>Pense assim: se seu blog tem 1000 assinantes de feed e o blog para qual você vai escrever tem 2000, <strong>no mínimo</strong> 1000 desses são <strong>leitores em potencial</strong>.</p> <p>Ao escrever para esse outro blog, o seu artigo – com seu link – será visto por esses possíveis leitores. Se o seu texto conseguir convencê-los, eles visitarão o seu blog em busca de conteúdo semelhante.</p> <p><strong>Motivo 4: Links externos</strong></p> <p>Você ganhará pelo menos um link externo para seu blog, provavelmente sem o atributo “nofollow”. Isso te ajudará com SEO, aumentando o Page Rank e a importância do seu blog para o Google: já pensou em seu blog ganhando um link num blog Page Rank 5 ou 6?</p> <p>Convencido das vantagens de escrever um guest post? Que tal aprender a escrever um? Confira as dicas:</p> <p><strong>Dica 1: Não explore</strong></p> <p>Se você escrever um artigo como se fosse de seu blog e encher de links para artigos de seu blog, o dono desse blog pode acreditar que você escreveu apenas para ganhar vários links para seu blog.</p> <p>Adicione o seu link apenas na área de “Autor”, no final do post. Ou melhor: mande seu link e deixe que o dono do blog coloque como ele achar melhor. Isso mostrará ao dono do blog que você não está louco por links, e sim por compartilhar conhecimento.</p> <p><strong>Dica 2: Não escreva artigos curtos</strong></p> <p>Confira quantas palavras, em média, o blog para qual você visa escrever tem nos seus posts. <br />Se o blog geralmente tem artigos com 1000 palavras, não escreva um artigo com menos de 500. <br />Você não teria o artigo postado nesse blog, perdendo seu tempo escrevendo. <br /><strong>Dica 3: Não escreva um artigo que já existe no blog</strong></p> <p>Tenha certeza de que o artigo que você irá escrever não tem uma versão semelhante no blog visado. Se já existir, </p> <p><strong>Dica 4: Seja impessoal</strong></p> <p>Não use a primeira pessoa do singular! Evite frases como “Como eu já disse” ou “como eu tenho feito em meus blogs”: os leitores do blog provavelmente não conhecem o seu e não conhecem você. <br />Ao escrever em primeira pessoa, o leitor pode achar que quem escreveu foi o dono do blog, não você.</p> <p>Esses foram os meus motivos e dicas para escrever um guest post. Qual a sua opinião sobre esse tipo de postagem?</p> <div class="blogger-post-footer"><hr />
Artigo original do blog <a href="http://semnome.net">SemNome</a>.<br/>
Plágio é crime.
<hr /></div>Tkoifthttp://www.blogger.com/profile/11641925802256054346noreply@blogger.com2tag:blogger.com,1999:blog-1104374957660263557.post-35012998032908002982011-01-18T23:09:00.001-03:002011-01-18T23:09:48.873-03:00Fale-nos sobre você!<center><img style="display: block; margin: 10px" height="320" alt="We Just Want You" src="http://lh4.ggpht.com/_NBm6T2_gd54/TTZH5tp7F-I/AAAAAAAAB_Q/7xLfYNxw0Ws/image%5B2%5D.png?imgmax=800" width="281" border="0" /><span class="legenda">[Precisamos de você!]</span></center> <p>Olá, leitor do SemNome. O nosso blog já tem mais de 2 anos e nós queremos que ele seja o melhor para você.</p> <p>Por isso, formulamos uma pesquisa rápida, para você falar um pouco sobre você, seus blogs e o que você acha do SemNome.</p> <p>Preenchendo essa pesquisa – coisa que não durará mais que 5 minutos – você estará ajudando o SemNome a ajudar você.</p> <p>Então, precisamos de sua opinião sincera: críticas e sugestões, não apenas elogios. Queremos saber o que nossos leitores mais desejam no blog, para assim podermos melhorar o blog.</p> <p>E então, você pode nos dar 5 minutinhos do seu tempo e responder essa pesquisa rápida? Preencha o formulário abaixo e ajude o SemNome a ser um blog melhor!</p> <a name='more'></a><center><iframe style="border-right: #000 1px solid; padding-right: 5px; border-top: #000 1px solid; padding-left: 5px; max-width: 600px; padding-bottom: 5px; margin: 5px auto; border-left: #000 1px solid; width: 95%; padding-top: 5px; border-bottom: #000 1px solid" src="https://spreadsheets.google.com/embeddedform?formkey=dDRIZUxmemZwSFRTY3BPUXRrYjJZUmc6MQ" frameborder="0" width="500" height="600">Se não consegue ver o formulário, <strong></strong><a href="https://spreadsheets.google.com/viewform?formkey=dDRIZUxmemZwSFRTY3BPUXRrYjJZUmc6MQ">clique aqui e preencha a nossa pesquisa</a></iframe></center> <div class="blogger-post-footer"><hr />
Artigo original do blog <a href="http://semnome.net">SemNome</a>.<br/>
Plágio é crime.
<hr /></div>Tkoifthttp://www.blogger.com/profile/11641925802256054346noreply@blogger.com0tag:blogger.com,1999:blog-1104374957660263557.post-32336572132473510802011-01-14T09:36:00.001-03:002011-01-14T09:36:18.256-03:00Barra de compartilhamento: Personalização<center><img style="clear: both; display: block; margin: 0px 0px 10px" height="320" alt="Compartilhamento no Twitter, Facebook, Orkut e Buzz" src="http://lh5.ggpht.com/_NBm6T2_gd54/TSxxfn-6MvI/AAAAAAAAB9E/jY7-zM4Ujsw/Barra_de_compartilhamento%5B2%5D.jpg?imgmax=800" width="320" border="0" /><span class="legenda">[Compartilhe seus artigos no Twitter, Facebook, Buzz e Orkut!]</span></center> <p>No dia 11 de janeiro, foi postada nesse blog a <a href="http://semnome.net/2011/01/barra-de-compartilhamento-twitter.html">Barra de compartilhamento Twitter, Facebook, Orkut e Buzz</a>. Como prometido, vou ensinar vocês a personalizar a barra de algumas maneiras, utilizando CSS.</p> <p>As personalizações dessa postagem serão basicamente relacionadas ao estilo da barra, relativamente simples.</p> <p>Pronto para começar? Vamos lá!</p> <a name='more'></a> <p><strong>Personalização 1: Barra na vertical</strong></p> <p>Para colocar a barra com os botões/ícones empilhados um em cima do outro, basta utilizar <a href="http://semnome.net/2011/01/barra-de-compartilhamento-twitter.html">a barra</a> logo antes de <strong><data:post.body/></strong> e colar esse código antes de <strong></b:skin></strong>:</p> <blockquote class="code">.sharebar{ <br />width:<strong>110</strong>px; /* A largura da barra, em pixels */ <br />float:<strong>left</strong>; /* A posição da barra; left = esquerda e right = direita */ <br />text-align:<strong>center</strong>; /* Alinha os botões no centro */ <br />} <br />.sharebar .sharebutton{ <br />clear:<strong>both</strong>; <br />display:<strong>block</strong>; <br />margin:<strong>5px auto</strong>; <br />}</blockquote> <p>Visualize para ver se está tudo OK e salve o modelo.</p> <p><strong>Personalização 2: Barra com fundo (não transparente) e borda</strong></p> <p>Essa personalização pode ser feita em qualquer modelo da barra. Cole isso antes de <strong></b:skin></strong>:</p> <blockquote class="code">.sharebar{ <br />padding:<strong>5</strong>px; /* espaçamento interno */ <br />margin:<strong>5</strong>px; /* margens ao redor */ <br />background:#<strong>CCCCCC</strong>; /* Cor de fundo */ <br />border:<strong>1</strong>px <strong>solid</strong> #<strong>999999</strong>; /* Largura, tipo e cor da borda */ <br />}</blockquote> <p><strong>Personalização 3: Efeito mouseover na barra horizontal</strong></p> <p>Nesse efeito, os ícones crescem ao passar o mouse por cima. Só funciona com o modelo “<strong>Ícones Grandes”</strong> (modelo: icone, tamanho:grande) e <strong>não</strong> funciona no Internet Explorer 6.</p> <blockquote class="code">.sharebar{ <br />margin:5px; /* Margem */ <br />text-align:center; /* Alinhamento dos ícones (left, right ou center)*/ <br />line-height:61px; /* Altura da linha na barra, para os ícones ficarem centralizados */ <br />height:61px; /* Altura da barra */ <br />} <br />.sharebar a{ <br />margin:0;padding:0; /* Retirar todo espaçamento dos botões */ <br />} <br />.sharebar .sharebutton{ <br />margin:0 5px; /* Espaçamento horizontal dos ícones */<u></u> <br />display:inline; /* Garante que as imagens fiquem alinhadas verticalmente */ <br />width:25px; /* Largura do ícone pequeno */ <br />height:25px; /* Altura do ícone pequeno */ <br />padding:13px; /* Espaçamento, para deixar os ícones centralizados */ <br />} <br />.sharebar .sharebutton:hover, .sharebar a:hover .sharebutton{ <br />width:50px; /* largura do ícone com o ponteiro do mouse em cima */ <br />height:50px; /* altura do ícone com o ponteiro do mouse em cima */ <br />padding:0; /* Espaçamento, para deixar os ícones centralizados */ <br />}</blockquote> <p><strong>Personalização 4: Efeito mouseover na barra vertical</strong></p> <p>Como o anterior, ele só funciona com <strong>ícones grandes</strong> e não funciona no Internet Explorer <strong>6</strong> (os ícones continuam pequenos):<strong> </strong></p> <blockquote class="code">.sharebar{ <br />margin:5px; /* Margem */ <br />text-align:center; /* Alinhamento dos ícones, centralizados*/ <br />line-height:61px; /* Altura da linha na barra, para os ícones ficarem espaçados corretamente */ <br />float: left; /* left ou right, onde você quer que a barra fique. */ <br />width:61px; /* Largura da barra */ <br />} <br />.sharebar a{ <br />margin:0;padding:0; /* Retirar todo espaçamento dos botões */ <br />} <br />.sharebar .sharebutton{ <br />margin:0; /* Espaçamento 0 dos ícones */<u></u> <br />display:block; /* Garante que as imagens fiquem uma em cada linha*/ <br />width:25px; /* Largura do ícone pequeno */ <br />height:25px; /* Altura do ícone pequeno */ <br />padding:13px; /* Espaçamento, para deixar os ícones centralizados */ <br />} <br />.sharebar .sharebutton:hover, .sharebar a:hover .sharebutton{ <br />width:50px; /* largura do ícone com o ponteiro do mouse em cima */ <br />height:50px; /* altura do ícone com o ponteiro do mouse em cima */ <br />padding:0; /* Espaçamento, para deixar os ícones centralizados */ <br />}</blockquote> <p><strong>Personalização 5: botões em movimento ao passar o mouse</strong></p> <p>Nessa personalização, os ícones apenas se elevam 5px com o ponteiro do mouse em cima deles.  Dessa vez, funciona com qualquer modelo, mas continua não funcionando no IE6.</p> <blockquote class="code">.sharebar .sharebutton{ <br />vertical-align:baseline; /* Faz com que os ícones continuem parados quando um estiver mais acima*/ <br />display:inline; /* Faz com que a linha acima funcione */ <br />padding:5px; /* espaçamento que irá aumentar quando o usuário passar o mouse por cima */ <br />} <br />.sharebar a:hover img{ <br />padding:0px 5px 10px 5px; /* aumenta o espaçamento abaixo e diminui acima: aí está o nosso efeito */ <br />}</blockquote> <p><strong>Personalização 6: Faça você mesmo</strong></p> <p>Com o básico de CSS, você pode fazer modificações simples na barra do seu blog. </p> <p>Você pode colocar ela para flutuar por fora do post e acompanhar o scroll do visitante ou apenas colocar seus ícones alinhados à esquerda, direita ou centralizados. Faça como quiser e achar melhor para seu blog!</p> <div class="blogger-post-footer"><hr />
Artigo original do blog <a href="http://semnome.net">SemNome</a>.<br/>
Plágio é crime.
<hr /></div>Tkoifthttp://www.blogger.com/profile/11641925802256054346noreply@blogger.com4tag:blogger.com,1999:blog-1104374957660263557.post-81102696751145301262011-01-11T12:05:00.001-03:002011-01-11T12:05:59.230-03:00Barra de Compartilhamento Twitter, Facebook, Orkut e Buzz<center><img style="clear: both; display: block; margin: 0px 0px 10px" height="320" alt="Compartilhamento no Twitter, Facebook, Orkut e Buzz" src="http://lh5.ggpht.com/_NBm6T2_gd54/TSxxfn-6MvI/AAAAAAAAB9E/jY7-zM4Ujsw/Barra_de_compartilhamento%5B2%5D.jpg?imgmax=800" width="320" border="0" /><span class="legenda">[Compartilhe seus artigos no Twitter, Facebook, Buzz e Orkut!]</span></center> <p>Que tal dar a oportunidade a seus visitantes de compartilharem os seus conteúdos nas redes sociais?</p> <p>Que tal abandonar a barrinha de compartilhamento do Blogger que não é atraente para o visitante?</p> <p>Por esse motivo, criei essa <strong>barra de compartilhamento</strong>. Ela, por enquanto, tem suporte a 4 redes sociais (Twitter, facebook, Orkut e Google Buzz), 2 modelos de botão e 2 tamanhos. Veja:</p> <center><img style="display: block; margin: 0px 0px 10px" height="215" alt="Modelos da barra de compartilhamento" src="http://lh4.ggpht.com/_NBm6T2_gd54/TSxxihLpncI/AAAAAAAAB9I/T1eihLzahu4/image%5B10%5D.png?imgmax=800" width="500" border="0" /></center><a name='more'></a> <ul> <li><strong>Modelo 1:</strong> ícones grandes, 50x50, com fundo transparente; </li> <li><strong>Modelo 2:</strong> ícones pequenos, 30x30, com fundo transparente; </li> <li><strong>Modelo 3:</strong> botões pequenos, 78x20 pixels; </li> <li><strong>Modelo 4:</strong> botões grandes, 101x26 pixels. </li> </ul> <p><strong>O Script</strong></p> <p>O script foi criado para ser expansível para vários modelos e também para a possível adição de novos botões e funcionalidades.</p> <p>Ele não foi escrito apenas para Blogger: ele funciona em qualquer plataforma. E, por funcionar em qualquer plataforma, ele funciona com a seguinte função, totalmente explicada:</p> <blockquote class="code"><script type="text/javascript"> <br />compartilha({ <br />"twitter":"sim", // Você seleciona <strong>"sim"</strong> ou <strong>"nao" </strong>(<u>sem acento</u>) para a exibição do botão do Twitter <br />"facebook":"sim", // O Mesmo para o botão do facebook <br />"orkut":"sim", // A mesma coisa para o botão do Orkut <br />"buzz":"sim", // O mesmo para o botão do Google Buzz <br />"modelo":"icone", // Dois modelos disponíveis: <strong>"icone"</strong> e <strong>"botao"</strong> <br />"tamanho":"grande", // Dois tamanhos: <strong>"grande" </strong>e <strong>"pequeno"</strong> <br />"url":"URL da página para compartilhar", <br />"titulo":"Título do artigo para compartilhar" <br />}); <br /></script></blockquote> <p>E, claro, para a função funcionar, necessita que o arquivo JavaScript abaixo seja inserido antes da função (preferencialmente no head da página):</p> <blockquote class="code"><script src=" http://semnomenet.googlecode.com/files/barra_compartilhamento.js" type="text/javascript"></script></blockquote> <p><strong>Como instalar</strong> <br />Como eu disse acima, o script funciona em qualquer página. Porém, só irei ensinar como instalar no Blogger:</p> <p>Na <a href="http://blogger.com/home" target="_blank">Home Page do Blogger</a>, clique em “Design” do seu blog. Após isso, vá em “Editar HTML”.</p> <p align="center"><img style="margin: 0px 0px 10px" height="114" alt="Blog » Design" src="http://lh4.ggpht.com/_NBm6T2_gd54/TSxxmAKjd0I/AAAAAAAAB9M/_dJnCClkaOI/ScreenClip000000%5B3%5D.jpg?imgmax=800" width="469" border="0" /></p> <p align="center"><img style="margin: 0px 0px 10px" height="138" alt="Blog » Design » Editar HTML" src="http://lh6.ggpht.com/_NBm6T2_gd54/TSxxny76iII/AAAAAAAAB9Q/Q4cruAxnZyE/ScreenClip000001%5B3%5D.jpg?imgmax=800" width="457" border="0" /> </p> <p>Marque a opção “Expandir modelos de widgets”:</p> <p align="center"><img style="margin: 0px 0px 10px" height="64" alt="Expandir modelos de widgets" src="http://lh4.ggpht.com/_NBm6T2_gd54/TSxxqcca6HI/AAAAAAAAB9U/OpJNrQ7qIYM/ScreenClip000002%5B3%5D.jpg?imgmax=800" width="500" border="0" /> </p> <p>Busque por <strong></head></strong> no seu código (Ctrl+F ajuda nessas horas):</p> <p align="center"><img style="margin: 0px 0px 10px" height="74" alt="</head>" src="http://lh3.ggpht.com/_NBm6T2_gd54/TSxxssbIXqI/AAAAAAAAB9Y/THqEiUIWtDM/ScreenClip000003%5B3%5D.jpg?imgmax=800" width="500" border="0" /> </p> <p>Então, cole a linha logo acima do </head>:</p> <blockquote class="code"><script src=" http://semnomenet.googlecode.com/files/barra_compartilhamento.js" type="text/javascript"></script></blockquote> <p>Ficará assim:</p> <p align="center"><img style="margin: 0px 0px 10px" height="74" alt="Script antes do </head>" src="http://lh4.ggpht.com/_NBm6T2_gd54/TSxxvZXuqwI/AAAAAAAAB9c/v5Gx2s0YFMM/ScreenClip000004%5B3%5D.jpg?imgmax=800" width="500" border="0" /> </p> <p>Então, busque por <strong>post.body </strong>(utilize Ctrl+F novamente)</p> <p align="center"><img style="margin: 0px 0px 10px" height="114" alt="ScreenClip000005" src="http://lh4.ggpht.com/_NBm6T2_gd54/TSxxyuVZUxI/AAAAAAAAB9g/ML9hN2tNXgA/ScreenClip000005%5B3%5D.jpg?imgmax=800" width="500" border="0" /> </p> <p>Cole o código a seguir uma linha acima, caso queira a barra acima da postagem ou uma linha abaixo, caso a queira abaixo da postagem:</p> <blockquote class="code"><div class="sharebar"> <br /><script type="text/javascript"> <br />compartilha({ <br />"twitter":"sim", <br />"facebook":"sim", <br />"orkut":"sim", <br />"buzz":"sim", <br />"modelo":"<strong>icone</strong>", <br />"tamanho":"<strong>grande</strong>", <br />"url":"<data:post.url/>", <br />"titulo":"<data:post.title/>" <br />}); <br /></script> <br /></div></blockquote> <p>Eu optei por colocar acima. Coloquei acima da div .post-body, mas isso depende do seu template:</p> <p align="center"><img style="margin: 0px 0px 10px" height="177" alt="ScreenClip000006" src="http://lh6.ggpht.com/_NBm6T2_gd54/TSxx09zSsoI/AAAAAAAAB9k/BDSQv3eJZ00/ScreenClip000006%5B3%5D.jpg?imgmax=800" width="500" border="0" /> </p> <p>Lembre-se de consultar a seção anterior para saber como modificar o modelo e o tamanho dos botões, além de escolher quais ícones você quer ou não.</p> <p>Então, clique em “Salvar modelo” e pronto! Sua barra já está lá!</p> <p>Provavelmente os botões estão colados e alinhados à esquerda. Então, temos duas soluções: <br />Para <strong>quem mexe com CSS</strong>, a div é da classe <strong>.sharebar</strong> e os botões são da classe <strong>.sharebutton</strong>. <br />Para <strong>quem não entendeu a linha acima</strong>, aguarde o próximo tutorial, onde irei ensiná-lo a personalizar a sua barra.</p> <p>Aproveite e <a href="http://feeds.feedburner.com/semnome-net" target="_blank">assine o nosso feed</a> para ficar por dentro das próximas dicas de como personalizar essa barra, com CSS e outros hacks!</p> <p><strong>E você, o que achou?</strong> Tem alguma sugestão ou crítica? <strong>Deixe nos comentários</strong>. Qualquer crítica, desde que construtiva, será bem aceita! Sugira novas redes sociais e novas funções para o widget, pois se o blog é feito para você, você é quem manda!</p> <p><strong>Obs.:</strong> Esse widget foi criado pelo <a href="http://semnome.net/">SemNome</a>. A modificação é proibida e a distribuição só é permitida com os devidos créditos. Recomendo <strong>não baixar o arquivo e republicá-lo</strong>, pois novas atualizações – como a adição de novos botões para redes sociais e outros recursos – serão colocadas nesses arquivos.</p> <div class="blogger-post-footer"><hr />
Artigo original do blog <a href="http://semnome.net">SemNome</a>.<br/>
Plágio é crime.
<hr /></div>Tkoifthttp://www.blogger.com/profile/11641925802256054346noreply@blogger.com10