Dicas Plugins Web Smart: Tutorial

Mostrando postagens com marcador Tutorial. Mostrar todas as postagens

Tutorial - CD do Windows XP com SP3, IE7, WMP11 e Firefox integrados

Willian Coutinho

Neste post vou mostrar um tutorial (que encontrei vagando pela net) muito interessante para integrar o Windosws XP SP3, Internet Explorer 7, Windows Media Player 11 e Mozilla Firefox 2.0.0.14 aos arquivos de instalação do Windows XP usando o nLite.

A versão do WebInLive (Dicas Plugins) está mais atualizada e u pouco melhor explicada, comparando com outros tutoriais semelhantes em outros blogs e fóruns.

O passo-a-passo é auto-explicativo, mas requer alguns cuidados e bastante atenção às dicas e as notas 1 e 2 para que não dê nada errado.

IMPORTANTE:

Se você estiver fazendo a integração do SP3 ao XP RTM no Windows Vista, use o nLite 1.4.1.
Se você estiver fazendo a integração do SP3 ao XP SP2 no Windows Vista, use nLite 1.4.5.
Se você não estiver fazendo a integração a partir do Windows Vista, use qualquer uma das duas versões.

Passo 1 – Instale o nLite (clique aqui para fazer download da versão 1.4.9.1 - 2,54 Mb)

Passo 2 – Baixe o WinXP SP3 (download do arquivo de instalação do Windows XP SP3 - 302,00 Mb)

Passo 3 – Coloque o CD do Windows XP no drive e copie os arquivos para uma pasta em seu HD (de preferência, crie uma pasta para colar os arquivos copiados do CD):

IMPORTANTE:
Se você quiser integrar o Windows Media Player 11 aos arquivos de instalação do Windows, veja a NOTA 1 no final deste artigo antes de prosseguir. O Windows Media Player deve ser integrado ANTES que qualquer modificação seja feita pelo nLite.

Passo 4 – Depois que você copiou os arquivos do Windows XP para seu HD, execute o nLite e clique em Próximo.

Passo 5 – Indique o caminho onde você copiou os arquivos de instalação do Windows XP e clique em Próximo.

Passo 6 – Se você não possui nenhuma pré-configuração do nLite, clique em Próximo.

Passo 7 – Na tela de seleção de tarefas, marque os itens Service Pack integrado e Criar uma imagem iso auto executável e clique em Próximo.

IMPORTANTE:
Se você quiser integrar o Internet Explorer 7 ou o Mozilla Firefox 2.0.0.14, veja a NOTA 2 no final deste artigo antes de prosseguir.

Passo 8 – Navegue até o local onde o arquivo e aguarde até que o processo de integração do Service Pack termine. Terminado o processo de integração, clique em Próximo.

Passo 9 – Esta é a tela onde você define alguns parâmetros da imagem ISO que será gravada em um CD. Deixe todas as opções como estão, dê um nome para sua imagem ISO (por exemplo, XP_SP3_BR) e clique no botão Criar iso.

Passo 10 – Quando a criação da imagem ISO terminar, clique no botão Finalizar e pronto.

Agora basta gravar o CD usando seu programa de gravação favorito. Uma boa alternativa é o gratuito ImgBurn.

NOTA 1:

Você precisa integrar o Windows Media Player 11 aos arquivos de instalação do Windows XP ANTES de fazer qualquer modificação com o nLite. Para isso, você precisará de dois itens específicos:

O arquivo de instalação do Windows Media Player 11 (clique para download - 24,60 Mb)
O WMP11 Integrator (clique para download – 90 Kb)

O WMP11 Integrator é fácil de usar:

Faça o download.
Instale o programa.
Execute-o (no Windows Vista, execute o programa como Administrador, caso contrário ocorrerá um erro).
Indique o caminho para o arquivo de instalação do Windows Media Player 11
Indique também o caminho da pasta onde vocçê colou os arquivos de instalação do Windows XP
Clique no botão Integrate e espere o programa executar o processo.
Após concluir a integração, feche o WMP11 Integrator.

ATENÇÃO: Ao tentar executar o integrador do Windows Media Player 11 ele exige a instalação do .NET Framework (caso seu pc ja o possua, nao será necessário)

Agora você pode prosseguir normalmente com o uso do nLite.

NOTA 2:

Para Integrar o Internet Explorer 7 ou o Mozilla Firefox ao CD de instalação do Windows XP SP3, você precisa fazer o download dos arquivos de instalação de um dos dois programas. Abaixo, se encontra o download do arquivo .cab do firefox 3.5.6 e, também, do WinRAR 3.91.

Firefox 3.5.6 em formato .cab (clique aqui para download – 7,88 Mb)
WinRAR 3.91 em formato .cab (clique aqui para download – 1,29 Mb)

Basta, nos passos seguintes selecioná-los no mesmo formato em que foram baixados (não extraí-los da pasta compactada,WinRAR).

Agora, no Passo 7 do processo de integração, tenha a certeza de marcar também a opção Atualizações críticas e add-ons:

Em seguida, prossiga normalmente com a integração e você chegará na parte onde precisa adicionar os arquivos de instalação do IE 7 ou do Firefox. Clique no botão Inserir e adicione os arquivos:

Feito isso, clique em Próximo para que o nLite integre os arquivos:

Na janelo seguinte clique em “Criar imagem ISO'”, aguarde a criação da imagem e, após, clique em próximo.

Você pode escolher também a opção “gravar no CD agora”. Basta ter um CD virgem e inserí-lo no drive de CD para criar o CD WinXP SP3.

Na janela final clique em “Concluir” e pronto. Dúvidas? Pergunte nos comentários.

Willian Coutinho

4 comments

Essa semana recebi um e-mail de um de nossos leitores, o Rafael A. M., perguntando com alterar imagem dos links postagens mais recentes, início e postagens mais antigas do rodapé da coluna do post.

Para quem já está acostumado com os mecanismos do Blogger, essa alteração não representa qualquer dificuldade, entretanto para aqueles que estão começando agora ou que utilizam o Blogger há algum tempo mas não são muito íntimos de HTML E XML, a coisa não parece ser das mais simples.

Modificar o texto ou usar imagens no lugar dos links postagens mais antigas, postagens mais recentes e inicio não é difícil, mas encontrá-lo no código HTML, só contrantando Sherlock Holmes. Quem já tentou procurar utilizando as frases ‘postagens mais antigas’ ou ‘postagens mais recentes’ concerteza não encontrou. O motivo: o Blogger utiliza tags XML para esses mecanismos.

Mas chega de história e mais explicações, vamos passar para o lado prático da coisa.

Para identificar esses links no código HTML do seu blog, prossiga da seguinte forma:

1 – Vá em Editar HTML e clique em expandir o modelo de widget, logo em seguida procure por:

<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'>

Logo abaixo deve conter, com poucas lterações dependendo do layout do seu blog, o seguinte código:

Nesse código, as tags marcadas em vermelho, represetam, respectivamente, Postagens mais recentes, Postagens mais antigas e Início (link que leva à homepage).

<data:olderPageTitle/> link para postagens mais antigas;
<data:newerPageTitle/> link para postagens mais recentes;
<data:homeMsg/> link para pagina inicial do blog, (esse aparece no código duas vezes, então modifique as duas da mesma maneira).

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'> <data:newerPageTitle/> </a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'> <data:olderPageTitle/> </a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'> <data:homeMsg/> </a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'> <data:homeMsg/> </a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Você tem algumas opções a serem trabalhadas nesses links. Você pode:

removê-los;
substituí-los por imagens(previamente hospedadas em provedores como o tynipic ou photobucket);
Substituir os nomes dos links (ex.: Página anterior e Próxima página) ou;
decorar os links utilizando CSS.

Para os efeitos didáticos deste post, veremos como substituílos por outros textos e por imagens:

Substituindo por outros textos:

Para substituir por outros textos, troque apenas da meneira como está sendo indicado abaixo:

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'> TEXTO A SER EXIBIDO </a>

Substituindo os textos por imagens:

Para substituir por outros textos, troque apenas da meneira como está sendo indicado abaixo:

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'> <img border="0" src="endereço da imagem"/> </a>

Observe que aqui nós substituimos os respectivos links por códigos de imagens. Estas imagens relacionadas à próxima página ou posts mais antigos e, página anterior ou postas mais recentes, você poderá encontrar na internet ou criá-la no seu PC utilizando programas como Flash, Fireworks ou CorelDraw e hospedá-las em servidores de imagnes como o tynipic, o photobucket ou imagehack.

Após fazer as alterações clique para visualizar e, se não der qualquer erro, clique em salvar e confira se esá tudo ok acessando um post seu.

Por hoje é só, tenho que estudar para prova. Dúvidas? Pergunte nos comentários.

Willian Coutinho

3 comments

Este é um post especial para quem estiver começando a trabalhar ou estudar a linguagem PHP utilizando o Dreamweaver MX.

Para visualizar corretamente no browser a página que você está construindo é necessário, melhor dizendo, obrigatório, a montagem de um servidor de teste local. Este irá simular um servidor de hospedadem na web permitindo que você visualize a sua página no seu próprio PC sem necessitar enviar a sua página para sua hospedagem.

Para uma página em HTML não é necessário essa burcracia, mas para uma página codificada em PHP é. No HTML, basta pressionar F12 e a página ira ser visualizada no browser. No caso do PHP, você precisa criar o servidor de teste para que seja possível visualizá-la no navegador.

Ocorre que eu estava tentando configurar um servidor de teste em casa, da mesma forma que eu havia vito no curso. Tentei, retentei, perambulei, quebrei a cabeça, os braços, as pernas e… NADA. Não consegui nem por Decreto, nem por Lei Complementar.

Então, voltei ao curso e anotei passo-a-passo todo o processo para criar o servidor de testes, que agora vou compartilhar com vocês.

Então, vamos ao que interessa!

Antes de tudo, é necessário que você tenha instalado e rodando em seu PC um software servidor. No meu caso, utilizo e recomendo o WampServer 2.0.

1 - Depois de instalado, inicie o servidor. Neste momento ele estará iniciado, entretanto no modo “Offline”.

2 – Clique com o botão esquerdo do mouser sobre o ícone do Wampserver na barra de notificação (perto do relógio) e clique em “put Online”. Pronto, agora ele está no modo Online.

3 – Feito isso, vamos configurar a nossa página no Dreamwevaer.

Aqui vale lembrar que a minha versão do Dreamweaver MX é em português.

4 – Abra o Dreanwever e, crie um novo documento “Páginas Dinâmicas > PHP”. Clique no menu “Site” em clique em “Novo Site”. Aparecerá uma janela onde iremos configurar as informações do site e o servidor de testes.

5 – Na guia “Avançado” altere o campo “Nome do site” para o nome do site que você está criando. No nosso exemplo, para fins didáticos, colocaremos “site_teste”.

6 – Agora altere o campo logo abaixo “Pasta Raiz Local” para “C:\wamp\www\site_teste\”. Insira a extensão do seu site no local indicado.

7 – No campo “Categoria”, a esquerda da janela, clique em “Servidor de Teste”.

8 – Altere o campo “Modelo do Servidor” para “PHP/mySQL” e o campo “Acesso” para “Local/Rede”. Automaticamente, aparecerá dois campos: Pasta do servidor e Prefixo da URL.

9 – Em “pasta do servidor” deve aparecer: “C:\wamp\www\site_teste\”. E em “Prefixo da URL” deve ficar: “http://localhost/site_teste/”. Veja o exemplo na imagem abaixo:

10 – Feito isso, clique em ok. Na página de trabalho do Dreamweaver, Insira algum código PHP ou digite algum texto entre as tags <body> e </body> e pressione F12 no teclado.

Se aparecer o texto que você digitou, então o servidor de testes foi criado com sucesso e você ja pode começar seus trabalhos com PHP. Caso contrário, refaça todo o passo-a-passo.

Willian Coutinho

No comments

Para você que se interessa em aprender sobre programação web, códigos, scripts e etc, vou compartilhar um pouco de meus estudos. Nós, neste post vamos analisar um código JavaScript para compreendermos a linguagem e sua lógica. Essa é uma boa pedida para os inciantes no assunto.

Atualmente, estou lendo um livro sobre JavaScript: “Faça um Site – JavaScript Orientado por Projeto – Scripts baseado em Objetos” de Carlos A. J. Oliviero da editora Érica, de 2001.

O problema é que o livro é de 2001, meio antigo em se tratando de internet e informática, principalmente sobr linguagens de programação. Embora tenha me dado um bom suporte aos conhecimentos iniciais, muitos dos códigos que tentei colocar em prática não funcionáram.

Então, passei a pegar códigos JavaScript na internet e a analisá-los, linha por linha para aprender e, claro, utilizando o livro em caso de dúvidas ou esquecimento de algum parâmetro ou método.

Um desses códigos que analisei foi o que apresentei no post: Código para Inserir Data e Hora no Blog.

Neste post, vamos analisar esse código para vermos como ele funciona e quais são suas sessões. Tenho certeza de que depois disso, JavaScript não será tão difícil assim e rumar para linguagens como PHP, ASP.NET e JAVA será o próximo passo rumo ao mundo da programação web.

Então, chega de muita conversa e vamos por a mão na massa!

Primeiro vamos dividir o código em sessões, para facilitar nossa compreenção geral:

Vale lembra que a ordem que aparecem os códigos aqui não necessariamente é a mesma em que irá aparecer no navegador; isso vai depender do último parâmetro: document.write(), que definirá o que vai aparecer e em que ordem.

<script type="text/javascript" language="JavaScript">	Início do código
var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var timeValue = "" + ((hours >12) ? hours -12 :hours) timeValue += ((minutes < 10) ? ":0" : ":") + minutes timeValue += (hours >= 12) ? " PM" : " AM" timerRunning = true;	__________________________ Inserção de variáveis referentes ao horário.
mydate = new Date(); myday = mydate.getDay(); mymonth = mydate.getMonth(); myweekday= mydate.getDate(); weekday= myweekday; myyear= mydate.getYear(); year = myyear	__________________________ Definição dos métodos que chamarão o dia, o mês e o ano.
if(myday == 0) day = " Domingo, " else if(myday == 1) day = " Segunda, " else if(myday == 2) day = " Terça, " else if(myday == 3) day = " Quarta, " else if(myday == 4) day = " Quinta, " else if(myday == 5) day = " Sexta, " else if(myday == 6) day = " Sábado, "	__________________________ Utilização dasinstruções condicionais if e else para definir o dia da semana. EX: Testamos mydy=xx Se myday=0 então domingo, caso contrário, myday==x+1? Se mayday==1, então Segunda, caso contrário, mayday==x+1+1...
if(mymonth == 0) month = " de Janeiro de " else if(mymonth ==1) month = " de Fevereiro de " else if(mymonth ==2) month = " de Março de " else if(mymonth ==3) month = " de April de " else if(mymonth ==4) month = " de Maio de " else if(mymonth ==5) month = " de Junho de " else if(mymonth ==6) month = " de Julho de " else if(mymonth ==7) month = " de Agosto de " else if(mymonth ==8) month = " de Setembro de " else if(mymonth ==9) month = " de Outubro de " else if(mymonth ==10) month = " de Novembro de " else if(mymonth ==11) month = " de Dezembro de "	__________________________ Utilização dasinstruções condicionais if e else para definir o mês. Ex: Testamos month==x Se month==0 então aparecerá “ de Janeiro de “, caso contrário o código passará para o próximo teste.
document.write( day + myweekday + month + year + " - " + timeValue);	__________________________ Esse parâmetro imprime no browser o que está entre parênteses.
</script>	__________________________ Fim do código

Agora, vamos analisar um pouco melhor cada etapa do código acima:

Etapa 1:

<script type="text/javascript" language="JavaScript">

Essa linha de código indica o início de um script em JavaScript. Aqui não tem muito o que se dizer. Basta sempre escrever do jeito que está sendo mostrado.

Etapa 2:

var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var timeValue = "" + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += (hours >= 12) ? " PM" : " AM"
timerRunning = true;

Nessa sessão temos a declaração das variáveis now, hours, minutes e timeValue, relacionados à horas, minutos. Refere-se à ultima parte do script: Ex.: 3:19 PM.

Uma variável em JavaScript é como na matémática. Imagine que X=Y + 2; sempre que o valor de Y mudar a variável X também mudará.

Em timeValue += (hours >= 12) ? " PM" : " AM" o programa pergunta: hours >= 12? Caso afirmativo, imprimirá PM; caso negativo, aparecerá AM.

Etapa 3:

mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
weekday= myweekday;
myyear= mydate.getYear();
year = myyear

Nesse sessão temos a declaração das variáveis referentes ao dia, mês e ano. Algo muito parecido como na sessão anterior.

Etapa 4:

if(myday == 0)
day = " Domingo, "
else if(myday == 1)
day = " Segunda, "
else if(myday == 2)
day = " Terça, "
else if(myday == 3)
day = " Quarta, "
else if(myday == 4)
day = " Quinta, "
else if(myday == 5)
day = " Sexta, "
else if(myday == 6)
day = " Sábado, "

Nessa etapa são utilizados os parâmetros if e else if para indicar o dia da semana numa escala de 0 a 6. O script lê da seguinte forma:

Se (comando if) myday é igual a 0, então será mostrado Domingo;
Caso contrário (comando else if) myday = 1?. Se afirmativo, sera mostrado Segunda;
Caso contrário myday = 2?. Se afirmativo, será mostrado Terça.
Caso contrário… e assim sucessivamente.

Etapa 5:

if(mymonth == 0)
month = " de Janeiro de "
else if(mymonth ==1)
month = " de Fevereiro de "
else if(mymonth ==2)
month = " de Março de "
else if(mymonth ==3)
month = " de April de "
else if(mymonth ==4)
month = " de Maio de "
else if(mymonth ==5)
month = " de Junho de "
else if(mymonth ==6)
month = " de Julho de "
else if(mymonth ==7)
month = " de Agosto de "
else if(mymonth ==8)
month = " de Setembro de "
else if(mymonth ==9)
month = " de Outubro de "
else if(mymonth ==10)
month = " de Novembro de "
else if(mymonth ==11)
month = " de Dezembro de "

Nessa etapa ocorre a mesma coisa da etapa anterior, só que desta vez para se definir o mês do ano:

Se (comando if) mymonth é igual a 0, então será mostrado de Janeiro de;
Caso contrário (comando else if) mymonth = 1?. Se afirmativo, sera mostrado de Fevereiro de;
Caso contrário mymonth = 2?. Se afirmativo, será mostrado de Março de.
Caso contrário… e assim sucessivamente.

Etapa 6 (FINAL):

document.write( day + myweekday + month + year + " - " + timeValue);

Aqui é onde tudo acontece. O parâmetro document.write() imprime na tela do seu navegador toda a codificação acima, de acordo com a ordem que está definida entre os parênteses.

O resultado será:

“dia da semana” + “dia do mes” + “ de ‘mês’ de” + “ano” + “-“ + “hora AM ou PM”

Bom, a explicação foi muito simples e básica. Espero que tenha sido útil para todos. Dúvidas? Pergunte nos comentário. Até a próxima!

Willian Coutinho

9 comments

Vamos fazer uma modificação no código HTML do Template para o Blogger de modo a deixá-lo no famoso e tão desejado formato de revista.

Esse tutorial é baseado na tradução do tutorial do Blogger Buster que achei no Louco de Bom e modificado por estimulanet.com para caber 2 colunas de Widgets ocupando 45% cada uma do box da postagem e + 1 coluna ocupando 100% do box da postagem, de forma que você pode alternar o tamanhos das apresentações e quebrar a monotonia do layout.

Antes de editar o modelo, é recomendável salvar uma cópia do mesmo. Para isso entre no Painel do Blogger clique em Layout > Editar Html > Baixar modelo completo que fica logo acima da caixa de Upload. Dessa forma caso as alterações não te agradarem ou não funcionarem, você pode restaurar o seu modelo antigo.

Agora vamos por a mão na massa. Entre no Painel do Blogger vá em Layout > Editar Html . Certifique-se que a caixa "Expandir modelo de Widget" está desmarcada.

1 - Procure no Html de seu blog o seguinte código (Ctrl + F)

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

(Caso não esteja exatamente dessa forma, procure por algo semelhante. Procure pela pela
</b:section> que esteja dentro da <div id='main-wrapper'>)

2 - Após localizar o código cole o próximo código logo após </b:section> e antes de </div>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='magazine-left' showaddelement='yes' >
<b:widget id='Text51' locked='false' title='Test Title 1' type='Text'/>
</b:section>
<b:section class='sidebar' id='magazine-right' showaddelement='yes' >
<b:widget id='Text52' locked='false' title='Test Title 2' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-center' showaddelement='yes' >
<b:widget id='Text53' locked='false' title='Test Title 2' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-left2' showaddelement='yes' >
<b:widget id='Text54' locked='false' title='Test Title 1' type='Text'/>
</b:section>
<b:section class='sidebar' id='magazine-right2' showaddelement='yes' >
<b:widget id='Text55' locked='false' title='Test Title 2' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-center2' showaddelement='yes' >
<b:widget id='Text56' locked='false' title='Test Title 2' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-left3' showaddelement='yes' >
<b:widget id='Text57' locked='false' title='Test Title 1' type='Text'/>
</b:section>
<b:section class='sidebar' id='magazine-right3' showaddelement='yes' >
<b:widget id='Text58' locked='false' title='Test Title 2' type='Text'/>
</b:section>
<div style="clear: both;"></div>
</b:if>

3 - Agora vamos inserir o código CSS (visual) da nossa homepage revista. Localize a tag </b:skin> e cole logo acima dela o seguinte código:

#magazine-left {
width: 45%;
float: left;
}
#magazine-right {
width: 45%;
float: right;
}
#magazine-center {
width: 100%;
float: left;
}
#magazine-left2 {
width: 45%;
float: left;
}
#magazine-right2 {
width: 45%;
float: right;
}
#magazine-center2 {
width: 100%;
float: left;
}
#magazine-left3 {
width: 45%;
float: left;
}
#magazine-right3 {
width: 45%;
float: right;

4 - Indo no seu layout, você poder ver as novas Widgets criadas com alternâncias entre 2 colunas e uma coluna.

4 - Pronto , agora salve seu modelo, mas ainda não terminamos. É preciso aprender a editar as manchetes e a home do blog. Deve ter ficado com novas widgets como mostra a foto

Como configurar o Layout Revista

Bem, agora vamos colocar a quantidade de postagens na página Inicial. Devemos lembrar sempre que as postagens que estiverem na home do blog sempre vão ficar acima das Novas Widgets criadas. Caso queira ter postagens na página inicial, surgiro que use os Posts resumidos.

Mude a quantidade de postagem da página inicial em Painel > Configurações > Fomatações e mude . No meu caso eu coloquei em zero, dessa forma a minha home só possui as widgets das notícias.

Ainda não acabou. Falta editar as notícias nas Widgets.

Vá em layout e adicione um novo elemento( Gadget) na widgets referente a HTML/JAVAscript. Nele você coloca a seguinte código que você tem que preencher na parte em negrito e respeite as aspas ( "")

<a href="LINK DA SUA POSTAGEM">_TÍTULO DA SUA POSTAGEM</a>
<p></p>
<p><a href="_LINK DA SUA POSTAGEM"><img border="0" style="border: 0px none ;" alt="" width="85" src="_LINK DA SUA IMAGEM" height="85" align="left"/></a></p>_RESUMO do TEXTO [...]
<p><a href="LINK DA SUA POSTAGEM">Leia Mais>></a></p>
<p></p>

width="85" e height="85" são atributos de largura e altura respectivamente, podem ser mudados esses valores para aumentar a foto ou diminui-la. Mas deve-se ficar atento para que o tamanho da width (largura) não exceda o box do post.

Pronto seu layout está em formato de revista. Dúvidas? Pergunte nos comentários.

Willian Coutinho

96 comments

No blog do Jean, o Super Downloads Free, encontrei uma widget tag cloud (ou Nuvem de tags) em flash, simplesmente sensacional.

Os efeitos dão de 10 em outros que vemos pela internet. Então, entrei em contato com ele que, de prondidão, me indicou como ele colocou no blog dele.

A Tag Cloud rola pra direita, pra esquerda, pra cima e pra baixo quando passa o mouse sobre ela. Assim, fazendo umas pesquisas entre o Blogger Buster e o Web Dois Ponto Zero Plus, criei um tutorial para adicionar essa tag cloud no seu blog.

Atenção: Entretanto, temos um problema que foi relatado por um de nosso leitores: quando se clica em um link de alguma categoria com a palavra acentuada (ex.: montização, domínios, vídeos) simplesmente não aparece as postagens da categoria. Provavelmente deve ser a codificação ou a formatação do script para o idioma inglês. Mas, por hora, eu não sei como corrigir. Então, uma solução temporária seria tirar as acentuações das palavras da lista de categorias.

Então, se você quiser adicionar ao seu blog, vamos lá!

1. Vá até o código HTML do seu blog (NÃO é preciso expandir modelo de widgets)
2. Procure a seguinte sequência:

<b:section class='sidebar' id='sidebar' preferred='yes'>

3. Logo abaixo dessa linha coloque o seguinte código:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Se, por acaso o código acima não funcionar, tente utilizar o código alternativo abaixo:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
    <h2><data:title/></h2>
</b:if>
<div class='widget-content'>
    <object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
        <param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
        <param name="bgcolor" value="#ffffff" />
        <param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
      <b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
</tags>" />
        <p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
    </object>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

4. Clique em visualizar e se tudo estirver ok, salve o modelo. Pronto! A nuvem de tag aparecerá na sua sidebar.

5. Agora, você poderá movê-la de lugar: vá em "Elementos de página" e verifique a widget "Label" que apareceu. Arraste-a para onde desejar.

Configurações

Agora, temos algumas opções de configurações para adequar a nuvem de tags ao seu blog. Nas marcações em vermelho, modifique:

1 - Largura e altura da widget: width = "240" height = "300"
2 - Cor do plano de fundo da widget: " #ffffff ");
3 - Cor do Texto: 0x333333
4 - Tamanho do texto: style='12'

Qualquer dúvida é só perguntar nos comentários.

Willian Coutinho

7 comments

Estava procurando por esse tutorial sobre como transformar a lista de marcadores do blog (categorias) em uma nuvem de tags (tag cloud).

Encontrei no Usuário Compulsivo e, resolvi postar aqui para compartilhar com vocês leitores.

Se desejar substituir sua lista de links de categorias do blog por uma nuvem de tags, siga o tutorial abaixo. Testei e funciou perfeitamente.

1 - No código HTML do seu template NÃO clique em 'Expandir modelos de widgets'.

2 - Procure (Ctrl+F) pela linha ]]></b:skin> e adicione logo acima dela o código CSS abaixo (esse é o código CSS que vai definir o visual da sua tag cloud):

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

3 - Agora encontre (Ctrl+F) a linha ]]></b:skin> e insira o código abaixo entre ela e </head>. Pode haver outros códigos entre essas tags mas importante aqui e que seja adicionada antes da tag </head>.

<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://SEU_BLOGUE.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

4 - Entre as tags <div id='sidebar-wrapper'> ou equivalente dependendo do seu template) e </b: section></div> vamos inserir o código da nossa tg cloud:

Veja um exemplo de onde inserir o código:

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Mais Comentados' type='HTML'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

COLE O CÓDIGO AQUI

</b:section>
</div>

* Aqui, se você ainda não excluiu a sua lista de marcadores e está adicionando a tag cloud, é bem provável que sua lista esteja com a id='label1'. Então substitua o id da tag cloud para, por exemplo, id='label222' para não haver erros.

Esse (abaixo) é o código a ser copiado e inserido no seu template:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Não mude nada a partir desse ponto -----------------
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var ta=0
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<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>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Visualize o template. Se estiver tudo ok, salve.

Pronto, agora você ja tem sua lista de marcadores em forma de nuvens de tags (tag cloud). Dúvidas? Pergunte nos comentários.

Willian Coutinho

86 comments

Atendendo a pedidos de leitores ansiosos por instalarem esse recurso em seu blog e a falta de tutoriais em português, mostrarei aqui como colocar páginas numeradas no seu blog. Essa é uma tradução do Blogger Buster (em inglês) que pode ser conferido também no link: Numbered Page Navigation for Blogger.

POST REATUALIZADO

Eu testei e funcionou perfeitamente. Então, para queles mais iniciantes nos procedimentos de formatação e instalação de scripts e ecursos no código HTML, recomendo total atenção ao tutorial abaixo para depois não ficar desesperado porque não funcinou no seu blog.

Chega de conversa fiada e vamos entrar em ação.

Adicione o código CSS para o seu estilo

Em primeiro lugar, copie todo o código abaixo e cole este pouco antes do fechamento ]]</b:skin> em seu modelo:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

Isto deve mudar as cores do texto e links na paginação para combinar os estilos já presentes no seu modelo de blog.

Portanto, se o texto padrão é branco contra um fundo escuro, o "Páginas (#)" de que o script deve aparecer da mesma forma.

A cor de fundo e efeitos hover dos números podem ser alterados de acordo com suas preferências, editando o hexadecimal valores para que correspondam ao estilo do seu próprio modelo.

Adicione o código JavaScript, abaixo dos seus posts

A segunda parte da instalação é acrescentar o código JavaScript, abaixo dos seus posts que irá localizar e substituir os links "Recentes / Antigos Posts".

Para adicionar este script, vá até Layout> Editar HTML no seu Painel do Blogger, e não marque o "Expandir modelos de widgets" caixa (é muito mais fácil de adicionar o código enquanto os widgets são contratadas).

Em seguida, localize esta secção de código (ou similar) em seu modelo:

<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>

</b:section>

cole o código script aqui

</div>

Imediatamente após o fechamento </b:section> etiqueta, adicione a seguinte secção de código:

* Observe os campos em vermelho no código abaixo pois nós o formataremos a seguir.

<script type="text/javascript"> function showpageCount(json) { var thisUrl = location.href; var htmlMap = new Array(); var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/"; var isLablePage = thisUrl.indexOf("/search/label/")!=-1; var isPage = thisUrl.indexOf("/search?updated")!=-1; var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : ""; thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable; var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= ''; var upPageHtml =''; var downPageHtml ='';

var pageCount = 5; var displayPageNum = 5; var upPageWord = 'Previous'; var downPageWord = 'Next'; var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">'; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp = post.published.$t.substr(0,10); var title = post.title.$t; if(isLablePage){ if(title!=''){ if(post.category){ for(var c=0, post_category; post_category = post.category[c]; c++) { if(encodeURIComponent(post_category.term)==thisLable){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } postNum++; htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount; } } } }//end if(post.category){ itemCount++; } }else{ if(title!=''){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!='') postNum++; htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount; } } itemCount++; } } for(var p =0;p< htmlMap.length;p++){ if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ if(fFlag ==0 && p == thisNum-2){ if(thisNum==2){ if(isLablePage){ upPageHtml = labelHtml + upPageWord +'</a></span>'; }else{ upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>'; } }else{ upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>'; } fFlag++; } if(p==(thisNum-1)){ html += '<span class="showpagePoint">'+thisNum+'</span>'; }else{ if(p==0){ if(isLablePage){ html = labelHtml+'1</a></span>'; }else{ html += '<span class="showpageNum"><a href="/">1</a></span>'; } }else{ html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>'; eFlag++; } }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ }//end for(var p =0;p< htmlMap.length;p++){ if(thisNum>1){ if(!isLablePage){ html = ''+upPageHtml+' '+html +' '; }else{ html = ''+upPageHtml+' '+html +' '; } } html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += '</div>'; if(isPage || isFirstPage || isLablePage){ var pageArea = document.getElementsByName("pageArea"); var blogPager = document.getElementById("blog-pager"); if(postNum <= 2){ html =''; } for(var p =0;p< pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&&pageArea.length>0){ html =''; } if(blogPager){ blogPager.innerHTML = html; } } } </script> <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script>

Depois de ter adicionado o código, tente visualizar o modelo para garantir que não haja erros.

Você não será capaz de ver o script em ação sobre a pré-visualização, mas este passo não garante os efeitos adversos para o seu layout, ou seja, somente depois de salvar e acessando o seu blog você poderá ver as páginas numeradas.

Formatando o Código Java Script

Você pode necessitar de personalizar essas seções para se adequar melhor às suas preferências e para que funcione corretamente:

1 - Domínio Personalizado: Na linha 5, você pode precisar alterar as ". Com" a fim de reflectir a extensão de seu domínio se você usar um domínio personalizado.

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==" .com/";

Se seu blog termina com .blogspot.com, não altere nada. Formate apenas se você tiver um dómínio próprio como, por exemplo, .net, .org ou .info.

2 - Contagem de páginas e posts: Outra alteração é na linha 19 e 20:

O var pageCount = 5; define o número de postagens exibidas em cada página. Deve estar em sincronia com a quantidades de post que você definiu para aparecer na página principal. Ex.: se você definiu para em elementos de páginas para aparecerem somente 3 posts, você deve formatar para var pageCount = 3;

O var displayPageNum = 5; define o número de links que são exibidos (por exemplo: 1 - 2 - 3 - 4 - 5) abaixo da seção lugares.

3 - Tradução para português: Para colocar o next em português, vá até a linha 22 e altere a palavra next para sua versão apropriada. Exemplo: "Próxima".

Quando você adiciona este código JavaScript e fez todas as alterações nescessary para as suas necessidades, salve o seu modelo e abrir seu blog em seu navegador. Agora você deve ver a paginação links aparecem abaixo dos seus principais lugares seção, e também nos rótulos e Arquivo páginas.

Bom, por hora é isso. Espero ter ajudado. Dúvidas? Pergunte nos comentários.

Willian Coutinho

7 comments

Há algum tempo eu estava procurano um tutorial de como adicionar uma coluna horizontal lateral sobre as duas colunas do template. Não encontrei.

O que eu fiz? Utilizei alguns templates de teste e pesquisei no HTML dos templates como as sidebars horizontais ficavam sobre as duas colunas laterais. Então, com um pouco de paciência, descobri e vou postar aqui.

Em "Layout" e Editar "HTML", clique em "Expandir modelo de Widget". Encontre (Ctrl+F) primeira tag das sidebar do seu blog, como (no caso do meu template) no exemplo a seguir:

#sidebar {
    width:230px;
    float:left;
    text-align:left;
    padding: 5px;
    overflow: hidden;
}

Cole o seguinte código logo acima da tag encontrada. Este código abaixo é o da sidebar horizontal sobre as duas colunas.

* Se você quiser adicionar essa sidebar horizontal também abaixo das duas colunas, deverá procurar nas sequências da tag acima a que representa a última coluna e colar o seguinte código abaixo dela.

#rightsidebar2-wrapper {
background: url() top no-repeat;
width: 320px;
margin-top:10px;
margin-right:10px; _margin-right:0px;
margin-left: 0px;
float:right;
word-wrap: break-word;
overflow: hidden;

}

A marcação em vermelho é a largura da área destina à sidebar horzontal, que deve ser a soma das larguras das colunas (cuidado com margins e paddings). Altere de acordo. Veja o exemplo:

Sidebar Horizontal sobre as colunas= 250px

Coluna Esquerda= 100px Coluna Direita= 150px

A marcação de azul é a flutuação na página. Se as colunas do seu template são à esquerda da coluna do post, altere este valor para float:left;

Agora encontre a sequencia das sidebars do seu blog que indica as posições. (Mais ao final do código HTML)

Algo mais ou menos como: (Estas linhas do código representam as duas colunas do blog)

             <div id='sidebar2'>
<b:section id='sidebar2-widget' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='Your Feed Here' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Posts Recentes' type='HTML'/>
</b:section>
            </div>

            <div id='sidebar'>
<b:section id='categories-widget' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='ARCHIVES' type='BlogArchive'/>
</b:section>
            </div>

Cole o seguinte código logo acima da tag encontrada.

<div id='rightsidebar2-wrapper'>
<b:section class='rightsidebar' id='rightsidebar2' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Inscrever-se' type='Subscribe'/>
</b:section>
</div>

* Vale lembrar que, se você quiser adicionar essa sidebar horizontal também abaixo das duas colunas, deverá colar o código abaixo dessa tag.

Existem outras alterações masi complexas no código HTML do template a fazer, mas essa vai ficar pra uma outra postagem.

Visualize, faça vários testes e salve o template. Agora você inseriu uma sidebar superior às duas colunas do seu blog.

Willian Coutinho

10 comments

Normalmente, os widgets no blogger são exibidos em todas as páginas.

Um banner 468x60 acima da coluna do post, por exemplo, aparece tanto na home quanto em qualquer página de post que você esteja visualizando.

Agora, se você quiser exibir um widget somente na página inicial e fazer ele sumir quando estiver visualizando em uma postagem, existe um recurso bastante interessante e muito simples; um usuário intermediário talvez possa fazê-lo sem muitas dificuldades.

Basta utilizar-mos a sequência:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

</b:if>

Vale lembrar que será necessário editar essas configurações no código HTML do seu template.

Então, vamos aos procedimentos:

1- Primeiramente, localize ou escolha o que você deseja que apareça somente na Home. Localize visualizando em seu blog, em que lugar ele se encontra. se em uma coluna ou acima dela ou acima do post ou no rodapé (footer) do blog.

Por exemplo: Se for um widget acima do post, quando formas localizá-lo no código HTML deveremos procurar primeiro por <div id='class='main'> que representa a coluna principal (a coluna do post) na estrutura do blog. E, depois localizar, logo abaixo, no código, a widget a ser aplicada o efeito.

2- Feito isso, vá no código HTML do seu template e clique em "Expandir modelo de widget". Procure a partir das tags </head><body> a localização da widget que você deseja.

Veja, no exemplo abaixo, de vermelho, a widget em que apliquei o efeito.

Observe ainda que ela se encontra acima do post na coluna principla do blog (main-wrapper).

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
    <data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Observe ainda no exemplo acima (na marcação em vermelho) que a widget que eu escolhi NÃO tem título. Se a sua tiver título, será muito mais fácil encontrar. Apenas procure (Ctrl+F) pelo título dela.

Ex: Se o título for Categorias. Você poderá encontrar:

<b:widget id='HTML11' locked='false' title='categorias' type='HTML'>

3 - Agora, observe o código abaixo e preste bastante atenção ao local onde você deverá, acrescentar as seguintes linhas:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

</b:if>

Insira essas linhas no local adequado na sua widget como exemplificado abaixo:

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
    <data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Feito isso está tudo pronto. Visualize para ver se não há erros e slave o template.

Nota: Você pode exibir também um widget em todas as páginas do Blogger, exceto na homepage, simplesmente utilizando o código abaixo.
<b:if cond='data:blog.pageType == "item"'>

Ou você pode exibir um widget do Blogger apenas em uma determinada página seguinte código.
<b:if cond='data:blog.url == "blog pós URL"'>

Portanto, em última análise, você tem o controle total sobre a posição de widgets no Blogger.

Dúvidas? Pergunte nos comentários.

Willian Coutinho

37 comments

Alguns leitores pediram dicas a respeito de como inserir no blog o link "Continue lendo..." tendo o resumo do post ou os primeiros parágrafos na home e o link para acessar o post completo.

Então, resolvi postar aqui no Dicas Plugins um tutorial a respeito que pode ser encontrado, também, em diversos outros blogs de dicas e widgets.

Essa é uma dica fácil, para usuários intermediários que já conhecem o ambiente do Blogger e sabem, mais ou menos, a estrutura do código do template e a localizar tags no código HTML.

Siga os passos abaixo e, vamos lá! Antes de mais nada, faça o backup do seu template.

1 - Vá até o código HTML do seu template (Layout e marque a opção: "Expandir modelos de widgets").

2 - Procure (utilize Ctrl + F) pela tag </head>

3 - Cole o seguinte código antes da tag </head>:

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>

4 - Encontre a linha (Ctrl + f): <div class='post-body'> e substitua toda essa linha por (substitua apenas a linha encontrada):

<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>

5 - Procure (Ctrl + f): <p><data:post.body/></p> e substitua por:

<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Leia mais >></a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

6 - Salve o template e pronto o código está incluso.

Dica Importante

Nas postagens em que você for utilizar esse recurso, você deve usar a tag: <span class="fullpost"> no início da parte em que você deseja que não seja mostrada na homepage e no final: </span>.

Entretanto, se você usa diretamene o Blogger para postar seus artigos, você pode automatizar o processo para não ter que ficar decorando essas tags. Para isso, vá em "Configurações", depois em "Formatação" e, em seguida, "Modelo de postagem" e cole o seguinte trecho:

Digite aqui o resumo do post

<span id="fullpost">

Digite aqui o resto do post

</span>

Salve a alteração e pronto! Toda vez que quiser escrever uma nova postagem, o código vai estar aparecendo lá.

Caso você utilize, por exemplo, o Windows Livre Writer, como eu faço para escrever os posts, mesmo inserindo essa função automática, não aparece no programa. Então, terá que inseir manualmente as tags

<span id="fullpost"> e </span> nos locais desejados (clique no menu Exibir, depois em Código HTML para visualizar o HTML do seu post e insira as tags onde quiser.

Por hora é só. Espero que a dica tenha sido bastante útil.

Duvidas? Pergunte nos comentários.

Willian Coutinho

1 comment

Ja mensionei em outro artigo sobre o Adsense ("Adsense alinhado dentro do post" e "Anúncios do Google entre as postagens") que, para você inserir um código de anúncio do Adsense no HTML do seu template, por exemplo, dentra da postagem, entre o título e o post ao no rodapé do post, é necessário converter o código do seu anúncio para a linguagem que o Blogger utiliza.

Se você não realizar esse procedimento, poderá ocorrer de aparecer um espaço em branco justamente no local onde era para aparecer o anúncio. Esse problema já foi relatado por leitores do Dicas Plugins que tentaram inserir anúncios no código HTML do template, mas não sabiam que era necessário convertê-lo para que funcionasse corretamente.

Apesar de já ter mencionado como converter código do Adsense em outros artigos, resolvi criar esse post separado para facilitar a busca e a utilização desta informação por parte dos leitores.

*Vale ressaltar que essa dica é somete para se for incluir o código no HTml do template. Se for incluir em uma gadget HTML/ Java Scrript não é necessário converter o código.

Veja a explicação através das imagens abaixo:

1 - Acesse o link: http://www.blogcrowds.com/resources/parse_html.php

2 - Copie o código do seu anúncio fornecido no Google Adsense e cole no espaço em branco.

3 - Clique em Parse e será fornecido o novo código adaptado para o Blogger.

4 - Agora, cole o código gerado no local desejado do HTML do seu template.

Pronto. Se quiser saber como fazer com que o anúncio apareça somente na postagem e não na Home, caso esteja incluindu-o dentro da postagem, veja o post "Não mostrar código na Home, somente no Post".

Dúvidas? Pergunte nos comentários.

Willian Coutinho

37 comments

Nesse post vou mostrar como inserir a navbar (barra de navegação) acima (do template Revolution Church) no seu blog. Ela ja possui recursos formatados como a caixa de pesquisa e o menu suspenso. Além disso é uma navbar dupla (duas navbars junta, uma em cima e outra em baixo).

Então, mãos a obra!

1 - Primeiramente, vá o código HTML do seu template. Clique em "expandir modelo de widget".

Copie o código CSS abaixo e cole-o no CSS do seu template; antes da tag de fechamento ]] ></b:skin> (local onde aparece a formatação visual do blog) :

1.1 - Se seu template não possui navbar pode colá-lo abaixo de;

#outer-wrapper {
font: $bodyFont;
}

1.2 - Se ja possui navbar, substitua o código CSS da sua navbar pelo código CSS da nova navbar dado abaixo.

#NavbarMenu {
    background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgH29MbyHRloaXG11GW345h3-YTJMZakIiS4WM-_0hiPXgDccxX4uaMF5YyflArhOHucuHKfcc_L32nTws-W5QclMfIwchC_ua3i2iBFJkaAL5QN06QorLbSrHmGlxh5CBaDlTtKKAAdQ/s1600/navbar.png);
    width: 960px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color: #FFF;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
#NavbarMenuleft {
    width: 680px;
    float: left;
    margin: 0;
    padding: 0;
}
#NavbarMenuright {
    width: 280px;
    font-size: 11px;
    float: right;
    margin: 0;
    padding: 6px 0 0;
}
#nav {
    margin: 0;
    padding: 0;
}
#nav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
    color: #FFF;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    margin: 0;
    padding: 9px 15px 8px;
}
#nav li a:hover, #nav li a:active {
    background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkm1SzUivbJ8SAdGmiHZlksmbGAGxQoLsSNqIPRQQmkIdPrvgqtLHMbqNE6pq61gWXQGm0n5W-A4iWRqwMxxQiFkScRfZ5s4caJRu-b5GQ3uqF21sZg84OivCnc1V26vUxbok0HU8Ec3o/s1600/navhov.png);
    color: #FFF;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #555;
    width: 150px;
    color: #FFF;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
    background: #777;
    color: #FFF;
    padding: 7px 10px;
}
#nav li {
    float: left;
    padding: 0;
}
#nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#nav li ul a {
    width: 140px;
}
#nav li ul ul {
    margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
}
#nav li:hover, #nav li.sfhover {
    position: static;
}
#searchform {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: inline;
}
#searchbox {
    background: #EEE !important;
    width: 220px;
    color: #202020;
    font-size: 12px;
    font-family: Georgia, Times New Roman, Trebuchet MS;
    font-weight: normal;
    margin: 0;
    padding: 4px 0 3px 5px;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
    display: inline;
}
#searchbutton {
    background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3TZXRgJrkxbhCc0X8UUUUvLixKdzxhWI3t65PXEh4dX7mIAECQsAGXDsavk6napVW1UKXl9eyCl6J-Zj7lCKftH3x9GD8ktygmO5zfUv4neN3Rux_6EHldwIQm7-1m3jdqYtX45owedo/s1600/topnav.png);
    color: #FFF;
    font-size: 11px;
    font-family: Georgia, Times New Roman, Trebuchet MS;
    margin: 0 0 0 5px;
    padding: 3px 3px 2px;
    font-weight: bold;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
}
#subscribe {
    margin: 0;
    padding: 5px 0 0;
    overflow: hidden;
}
#subbox {
    background: #EEE !important;
    width: 200px;
    color: #202020;
    font-size: 12px;
    font-family: Georgia, Times New Roman, Trebuchet MS;
    font-weight: normal;
    margin: 5px 0 0;
    padding: 3px 0 3px 5px;
    border-top: 1px solid #666;
    border-right: 1px solid #DDD;
    border-left: 1px solid #666;
    border-bottom: 1px solid #DDD;
    display: inline;
}
#subbutton {
    background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3TZXRgJrkxbhCc0X8UUUUvLixKdzxhWI3t65PXEh4dX7mIAECQsAGXDsavk6napVW1UKXl9eyCl6J-Zj7lCKftH3x9GD8ktygmO5zfUv4neN3Rux_6EHldwIQm7-1m3jdqYtX45owedo/s1600/topnav.png);
    color: #FFF;
    font-size: 11px;
    font-family: Georgia, Times New Roman, Trebuchet MS;
    margin: 0 0 0 7px;
    padding: 3px 3px 2px;
    font-weight: bold;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
}
#name, #email, #url {
    background: #EEE !important;
    width: 250px;
    color: #202020;
    font-size: 12px;
    font-weight: normal;
    margin: 5px 0 0;
    padding: 3px 0 3px 5px;
    border-top: 1px solid #666;
    border-right: 1px solid #DDD;
    border-left: 1px solid #666;
    border-bottom: 1px solid #DDD;
    display: inline;
}
#submit {
    background: #7B7B7B;
    color: #FFF;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    margin: 0;
    padding: 3px 3px 2px;
    font-weight: bold;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
}
#words {
    background: #EEE;
    width: 460px;
    color: #202020;
    font-size: 12px;
    font-weight: normal;
    margin: 5px 0 0;
    padding: 3px 0 3px 5px;
    border-top: 1px solid #666;
    border-right: 1px solid #DDD;
    border-left: 1px solid #666;
    border-bottom: 1px solid #DDD;
    display: inline;
}
#subnavbar {
    background: #666;
    width: 960px;
    height: 24px;
    color: #FFF;
    margin: 0;
    padding: 0;
}
#subnav {
    margin: 0;
    padding: 0;
}
#subnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#subnav li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
    color: #FFF;
    display: block;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 5px 0 0;
    padding: 6px 13px;
}
#subnav li a:hover, #subnav li a:active {
    background: #888;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0 5px 0 0;
    padding: 6px 13px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
    background: #666;
    width: 140px;
    float: none;
    margin: 0;
    padding: 6px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#subnav li li a:hover, #subnav li li a:active {
    background: #888;
    margin: 0;
    padding: 6px 10px;
}
#subnav li {
    float: left;
    padding: 0;
}
#subnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#subnav li ul a {
    width: 140px;
}
#subnav li ul ul {
    margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
    left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
    left: auto;
}
#subnav li:hover, #subnav li.sfhover {
    position: static;
}

2 - Agora, a partir da tag <bady> encontram-se os códigos na posição em que aparece no blog . Ou seja, é a estrutura do seu blog.

Aqui, vamos procurar (Ctrl+F) por:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Gestor Empreendedor (Cabeçalho)' type='Header'/>
</b:section>
</div>

E colar abaixo do código acima, o seguinte código (As marcações em vermelho estão em inglês, representam o nome do link. Formate da maneira como desejar):

* Lembre-se de adequar a id da sua antiga navbar à nova. Ex.: Se, depois de bady, a navbar era identificada por <div id="navbar"> , substitua pela nova identificação da navbar <div id='navbarmenu'>. Ou, simplesmente, cole a nova navabar inteiramente em cima do código da antiga.

<div id='NavbarMenu'>
       <div id='NavbarMenuleft'>
      <ul id='nav'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li>
          <a href='#'>Sample Page</a>
          <ul>
            <li>
              <a href='#'>Sub Page #1</a>
              <ul>
                <li><a href='#'>Sub Sub Page #1</a></li>
                <li><a href='#'>Sub Sub Page #2</a></li>
                <li><a href='#'>Sub Sub Page #3</a></li>
              </ul>
            </li>
            <li><a href='#'>Sub Page #2</a></li>
            <li><a href='#'>Sub Page #3</a></li>
            <li><a href='#'>Sub Page #4</a></li>
            <li><a href='#'>Sub Page #5</a></li>
          </ul>
        </li>
        <li><a href='#'>Sample Post</a></li>
        <li><a href='#'>Blog Page</a></li>
      </ul>
    </div>

    <div id='NavbarMenuright'>
      <form action='/demo/church/index.php' id='searchform' method='get'> <input id='searchbox' name='s' onblur='if (this.value == '') {this.value = 'Search this website...';}' onfocus='if (this.value == 'Search this website...') {this.value = '';}' type='text' value='Search this website...'/> <input id='searchbutton' type='submit' value='GO'/></form>
    </div>
</div>
<div style='clear:both;'/>
    <div id='subnavbar'>
      <ul id='subnav'>
        <li>
          <a href='#'>Community Events</a>
          <ul>
            <li>
              <a href='#'>Sub Category #1</a>
              <ul>
                <li>
                  <a href='#'>Sub Sub Category #1</a>
                </li>
                <li>
                  <a href='#'>Sub Sub Category #2</a>
                </li>
                <li>
                  <a href='#'>Sub Sub Category #3</a>
                </li>
              </ul>
            </li>
            <li>
              <a href='#'>Sub Category #2</a>
            </li>
            <li>
              <a href='#'>Sub Category #3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href='#'>Conferences</a>
        </li>
        <li>
          <a href='#'>Get Connected</a>
        </li>
      </ul>
    </div>
<div style='clear:both;'/>

Pronto. Agora você tem no seu blog, uma navbar personalizada e cheia de recursos igual a do Dicas Plugins.

Dúvidas? Pergunte nos comentários.

Dicas Plugins Web Smart

Categorias

O que você procura?

Mais Recentes

BlogRoll

Parceiros

Parceria

This is featured post 1 title

This is featured post 2 title

This is featured post 3 title

This is featured post 4 title

This is featured post 5 title

Tutorial - CD do Windows XP com SP3, IE7, WMP11 e Firefox integrados

Trocar links postagem mais antiga/Recente

PHP: Criar Servidor de Teste no Dreamweaver MX

JavaScript: Análise do Código Data e hora no Blog

Tutorial: Estilo Revista para o Blogger

Como configurar o Layout Revista

Flash Tag Cloud - Nuvens de Tags em Flash

Marcadores/ Categorias em Tag Cloud

Navegação em Páginas Numeradas no Blog

Adicionar coluna Horizontal Lateral

Display Widget somente na Home

Tutorial para inserir Hack "Continue Lendo"

Como converter códigos do Adsense para o Blogger

Tutorial Navbar Personalizada com Submenus