Como adicionar um link/âncora para o topo da página

Este é mais um post para a secção Tutoriais Blogspot. Sendo assim pergunto: Quer saber como adicionar um link/âncora para o topo da página do seu blog, igual ou diferente ao que tenho actualmente (" ^ ") na parte inferior direita do template? Muito fácil...

No blogger, vá em editar HTML e adicione imediatamente antes da tag </body> o seguinte:

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Topo da página'><span style='font-size:180%;'>^</span></a>

Se preferir adicionar uma imagem em vez do carácter especial (" ^ ") , tem de usar o seguinte trecho:

href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Topo da página'><img src="http://url_daimagem/Topo.png"/></a>

Depois de colado o trecho de código no seu HTML, é só alterar a url a vermelho para a imagem que desejar.

Quer experimentar?...

Imagem: Caiaquelontras | Informação: UsuárioCompulsivo

Como criar um spot de "Patrocínios do Blog"

A pedido de um leitor, nomeadamente do Blog Ganhardinheironabolsa que diz ser assíduo deste Blog, vou explicar, para aqueles que não sabem, como criei o Spot "Patrocínios do Blog" existente na sidebar do meu Blog e como colocar os anúncios.

Passando à teoria, você deve primeiro alterar o tamanho da sua sidebar para poder incluir os três banners de 125x125 na largura. Para isso deve Editar o seu Html e procurar pelo seguinte trecho:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

E alterar o valor de width para um valor superior a 375px para ter espaço para os 3 banners na horizontal. Pode ficar por exemplo assim:

#sidebar-wrapper {
width: 400px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

Agora que tem o tamanho necessário, tem de ir em Esquema e adicionar na sidebar um widget, HTML/Javascript. E colocar o seguinte código, fazendo as alterações necessárias:

<center><p><a href="http://PÁGINA_DE_DESTINO/" rel="alternate" type="application/rss+xml"><img alt="" style="vertical-align:middle;border:0" src="http://IMAGEM_DO_BANNER.jpg"/></a> <a href="http://PÁGINA_DE_DESTINO/" rel="alternate" type="application/rss+xml"><img alt="" style="vertical-align:middle;border:0" src="http://IMAGEM_DO_BANNER.jpg"/></a> <a href="http://PÁGINA_DE_DESTINO/" rel="alternate" type="application/rss+xml"><img alt="" style="vertical-align:middle;border:0" src="http://IMAGEM_DO_BANNER.jpg"/></a><p>

<p><a href="http://PÁGINA_DE_DESTINO/" rel="alternate" type="application/rss+xml"><img alt="" style="vertical-align:middle;border:0" src="http://IMAGEM_DO_BANNER.jpg"/></a> <a href="http://informadorpessoal.blogspot.com/" rel="alternate" type="application/rss+xml"><img alt="" style="vertical-align:middle;border:0" src="http://http://img403.imageshack.us/img403/8281/cpiadelogodoinformadorpbl6.png"/></a> <a href="http://PÁGINA_DE_DESTINO/" rel="alternate" type="application/rss+xml"><img alt="" style="vertical-align:middle;border:0" src="http://IMAGEM_DO_BANNER.jpg"/></a><p>

<p><a href="http://PÁGINA_DE_DESTINO/" rel="alternate" type="application/rss+xml"><img alt="" style="vertical-align:middle;border:0" src="http://IMAGEM_DO_BANNER.jpg"/></a> <a href="http://PÁGINA_DE_DESTINO/" rel="alternate" type="application/rss+xml"><img alt="" style="vertical-align:middle;border:0" src="http://IMAGEM_DO_BANNER.jpg"/></a> <a href="http://PÁGINA_DE_DESTINO/" rel="alternate" type="application/rss+xml"><img alt="" style="vertical-align:middle;border:0" src="http://IMAGEM_DO_BANNER.jpg"/></a><p></center>

&nbsp;<a href="http://PÁGINA_DE_DESTINO.com" rel="alternate" type="application/rss+xml">TEXTO QUE SERÁ LINKADO PARA A PÁGINA DE DESTINO</a>

Se fizer tudo certinho, terá um Spot de patrocínios parecido com o meu!

Qualqueres dúvidas, e só perguntar...

Descrição aleatória em baixo do título no Blogger

Construa facilmente as frases e lance o dado...

Já entrou em algum site (UsuárioCompulsivo, etc...) em que a descrição do blog é aleatório e muda sempre que carrega uma nova página e não sabe como fazer para o seu? Se não sabe, vai passar a saber...

Não pense que é difícil porque na realidade é extremamente simples e talvez nem tenha de alterar o seu código HTML, para conseguir virar o dado.

Antes de iniciarmos o processo, é necessário você verificar se é possível adicionar novos elementos no cabeçalho, através do painel de controle do Blogger nos Elementos de página, como representa a imagem:

Veja se é possivel adicionar novos elementos/ gadjets.

Em caso de não ter esta funcionalidade activa, siga os passos no nosso tutorial de como o fazer, intitulado de: Adicionando uma imagem (Widget) no cimo do blogger.


Descrição aleatória em baixo do título no Blogger

1- O primeiro que tem a fazer é apagar qualquer descrição que você epossa estar a usar. Caso esteja a usar uma descrição, pode apagá-la, nas opções de configuração básica do painel de controle ou nas configurações do cabeçalho nos elementos de página:

1. Apague qualquer descrição que possa utilizar

2- Em Layout do Painel de controle, já nas opção Elementos de página, adicione um novo Widget/ Gadjet do tipo HTML / JavaScript no cabeçalho do seu blog:

2- Adicione um novo Gadget Html / JavaScript

3- Mantenha o título do Widgeg em branco e no conteúdo, cole o código em baixo, editando as frases que pretende exibir aleatoriamente no cabeçalho do seu blog:

<div class="description">
<script language="JavaScript">
var quotes=new Array()
quotes[0]='Preencha com a frase aleatória #0'
quotes[1]='Preencha com a frase aleatória #1'
quotes[2]='Preencha com a frase aleatória #2'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
</div>

3- Cole o JavaScript editado para poder lançar o dado...

Você pode colocar quantas frases quiser, para isso basta criar mais frases e editar a contagem no início da linha.

Pronto para lançar o dado?...



Imagem 1 [Via: cienciahoje] | Informação [Via: UsuárioCompulsivo]

Como inserir anúncios Adsense dentro dos posts

Para colocar anúncios dentro dos posts do blogger tem de ir à sua conta Google Adsense e gerar o código do anúncio, ficando da seguinte forma:

<script type="text/javascript"><!--
código do anúncio
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

De seguida copie e cole no bloco de notas, substituindo os sinais a vermelho por estes "&lt; e &gt;" a azul , devendo ficar desta forma:

<script type="text/javascript">&lt;!--
código do anúncio
//--&gt;</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Feito isto vá em Editar HTML e clique em Expandir Modelos de Widget. Agora encontre este trecho no seu HTML:

<div class='post-header-line-1'/>

Logo abaixo insira o código do anúncio Adsense já modificado, de modo que fique idêntico ao seguinte:

<div class='post-header-line-1'/>
<script type="text/javascript">&lt;!--
código do anúncio
//--&gt;</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class='post-body'>

Agora visualize para verificar se ficou tudo bem e confirmando-se guarde. Preparado para ver os seus lucros Adsense aumentarem e ganhar dinheiro, ou não se quer dar ao trabalho de fazer isto?




Informação [Via: Templatesparanovoblogger]

Adicionando uma imagem (Widget) no cimo do blogger

O cimo da linda montanha da ilha do Pico, o ponto mais alto de Portugal

Para que seja possível adicionar widgets no cimo do blogger, da mesma forma que o faz na barra lateral, tem de alterar o seu código HTML. Porntanto, vá em editar HTML e assinale a caixa "Expandir modelos de widgets", procurando posteriormente o seguinte trecho:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='UsuárioCompulsivo (Cabeçalho)'
type='Header'/></b:section></div>

Agora altere para a seuginte forma:

<div id='header-wrapper'>

<b:section class='header' id='header' showaddelement='yes'>

<b:widget id='Header1' locked='false' title='UsuárioCompulsivo (Cabeçalho)'
type='Header'/>

</b:section></div>

Para substituir o cabeçalho em texto por uma imagem, deverá ficar assim:

<div id='header-wrapper'>

<b:section class='header' id='header' showaddelement='yes'>

</b:section></div>

Feito isto, ao aceder aos elementos de página será possivel adicionar um widget no cabeçalho do blogger, e por sua vez uma imagem no cimo do blogger. Se o quiser fazer e só adicionar HTML/Javascript e usar por exemplo o seguinte modelo:

<div><a href="http://seublog.blogspot.com"><img style="border:
0px solid" alt="[Legenda]" src="http://enderece-da-imagem.png"

title="[Legenda]"></img></a></div>

Entenda que pode utilizar o modelo anterior para adicionar imagens em qualquer widget do blogger. Se fez tudo certinho, óptimo! Caso contrário poderá fazer alguma pergunta que responderei o quanto antes. Espero sinceramente ter ajudado alguém com este post.

Informação [Via: UsuárioCompulsivo]

Como retirar a Navbar do Blogger

Para retirar a incomodante (do meu ponto de vista) navbar do blogger, tem simplesmente que ir em Editar Html e procurar (Ctrl+F) pelo seguinte trecho:

]]></b:skin>

E cole imediatamente atrás o seguinte a vermelho:

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

Ficando da seguinte forma:

#navbar-iframe { height: 0px; visibility: hidden; display: none; }
]]></b:skin>

Se arrepender-se, e quiser de volta a Navbar só tem de apagar o que adicionou a vermelho no Html.

Informação [Via: Templatesparanovoblogger]

Numeração nos marcadores, credo! Tire-me isso!

Já reparou, o quanto as numerações à frente dos marcadores do Blogger (Carros(2), Motas(4), etc ), que servem para indicar o número de posts relacionados com aquela etiqueta, podem ser estéticamente incorrectas?

Caso tenha reparado nisso e está a procura de uma forma fácil e simples de remover, acabou de encontra-la. Para remover essas numerações tem de ir em Editar Html, assinalar Expandir Modelo de Widgets e de seguida procurar (Ctrl+F) o seguinte trecho:

<b:widget id='Label1' locked='false' title='Marcadores'
type='Label'>
<:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

Reparou no que está em negrito? Só tem de eliminar isso, pré-visualizar para ver se ficou tudo certinho, se ficou como desejado... guarde.

Informação [Via: Templatesparanovoblogger]

Criando uma caixinha link-me

Atendendo à minha recente necessidade, a qual resolvi facilmente, decidi postar aqui como fazer de um modo simples uma caixinha link-me semelhante à demonstrada em baixo para colocar no seu site.

"Muito Obrigado!" é editável.

Para começar deve já ter criado o seu banner e hospeda-lo por exemplo no ImageShack. De seguida deve copiar o seguinte trecho:

<div
style="border: 1px dotted rgb(204, 204, 204); padding: 5px; margin-top:
10px; margin-bottom: 10px; text-align: center;">
<img style="border: 1px solid rgb(0, 0, 0);" src="URL_DO_BANNER"
/><br/>
Divulgue o (nome do blog)<br/>
<input onfocus="this.select()" value="&lt;a
target=&quot;_blank&quot; href=&quot;URL_DO_BLOG&quot;
title=&quot;NOME_DO_BLOG&quot;alt=&quot;NOME_DO_BLOG&quot;&gt;&lt;img
src=&quot;URL_DO_ BANNER&quot;
style=&quot;border: 1px solid #000000&quot;
/&gt;&lt;/a&gt;" type="text"
onmouseover="this.focus()"
style="color: rgb(153, 153, 153); margin-top: 0.5em;" size="20"
name="Banner"/></div>

Agora cole o trecho no widget HTML/JavaScript no caso de usar o Blogger fazendo as seguintes alterações:

• Inserir o endereço do banner e do blog nos campos coloridos a vermelho.
• Inserir o nome do Blog nos campos coloridos a verde.

Informação [Via: DicasBlogger]