quinta-feira

Bloggers - Webbdesign para bloggs - blog gratuito - html email - html script

Photobucket




Para Criar um Blog, blogger, de raiz passo a passo ir a



Depois de vos ter dado dicas passo a passo de raiz para criar um Blog, da blogger, colocar fotos, criar e aplicar um slide em www.criar1blog.blogspot.com, vamos agora explorar novas dicas e mais avançadas para complementar o nosso blog.

Nesta página vamos explorar um pouco os SCRIPTS em HTML para elementos para o blog, para colocar

  • Imagens de fundo
  • Texto a correr pela tela
  • Botões e links personalizados
  • Abrir hiperligações em nova janela
  • Aumentar o Ranking de visitas da página
  • Etc.


PhotobucketCriar um Blog é muito divertido.....

quarta-feira

Tutorial - photo blog - Script - html - COMO COLOCAR IMAGEM DE FUNDO no Blog

Photo Sharing and Video Hosting at Photobucket

O que é necessário para colocar uma imagem de fundo no BLOG

1. Em primeiro lugar é preciso criar ou encontrar uma imagem que se goste e contenha as dimensões requeridas para aplicação de fundo. Eu escolhi esta imagem a seguir.



Imagem que vamos usar como fundo neste tutorial


2. Este é o LINK da imagem que vamos usar neste Tutorial:
http://i828.photobucket.com/albums/zz210/saberdoser/Blogs/depresso.jpg



3. A seguir está o código de HTML para colocar no Blog. Terá de colocar neste código o LINK da Imagem que quiser colocar como fundo.

Código HTML
<style type="text/css">body {background-image: url( COLOCAR AQUI LINK DA IMAGEM ); background-position: center; background-repeat: no-repeat; background-attachment: fixed;}</style>>

4. Colocar o LINK da imagem que escolher, no código HTML, dentro dos parentesis ( ) onde diz LINK da IMAGEM.


Código HTML já com o LINK da Imagem.
<style type="text/css">body {background-image: url( http://i828.photobucket.com/albums/zz210/saberdoser/Blogs/estetica/fundo-estetica1.jpg); background-position: center; background-repeat: no-repeat; background-attachment: fixed;}</style>


Para ver o resultado final visitem a página

http://www.cureasuadepressao.blogspot.com/


Photo Sharing and Video Hosting at Photobucket

Tutorial PASSO a PASSO para aplicar o código no BLOG

ONDE COLOCAR O CÓDIGO para conseguir inserir a imagem no blog?

Este procedimento pode ter outras formas de realização mas eu normalmente eu coloco este código nos elementos do esquema do blog...mais propriamente no "footer"...crio um elemento de HTML e aplico o código, gravo e pronto. está criado o fundo.




1. Seleccionar o separador "Esquema".
2. No separador "esquema" seleccionar "Elementos de Página"

Photobucket

Photo Sharing and Video Hosting at Photobucket


3. Seleccionar "adicionar miniaplicação".
4. Adicionar um "Elemento de HTML/JavaScript"

Photobucket

Photo Sharing and Video Hosting at Photobucket

5. "Colar" o código HTML e
6. Seleccionar "GUARDAR"

Photobucket
Photo Sharing and Video Hosting at Photobucket

7. Seleccionar "Guardar" de novo mas agora para validar as alterações gerais do Blog.
8. E por último clicar em "VER BLOG" para ver as alterações realizadas no Blog.

Photobucket

PARABÉNS neste momento a tua página já tem um novo Fundo.


Podes agora criar os teus próprios fundos

Photo Sharing and Video Hosting at Photobucket

Foto blog - SE QUISER COLOCAR UMA IMAGEM MINHA, ONDE vou encontrar um LINK para colocar no SCRIPT html?

Photo Sharing and Video Hosting at Photobucket



Photo Sharing and Video Hosting at Photobucket



Para colocar uma imagem no script ela tem de ter um URL/LINK que a represente.

Para adquirir um URL/LINK para a imagem ela tem de estar alojada(hospedada) numa página de alojamento de alojamento de imagens. Depois de alojada, a imagem, o proprio site de alojamento atribui um link correspondênte à imagem.

Vamos usar a página de alojamento PHOTOBUCKET


ADQUIRIR um URL/LINK para uma imagem.

1. Em primeiro lugar temos de ir a
http://photobucket.com/




Photobucket

Iniciar por fazer o "cadastro" no site de alojamento/hospedagem.

2. Escolher um nome de Utilizador.
3. Digitar uma palavra-passe.
4. Re-digitar a mesma palavra-passe.
5. Clicar em "NEXT STEP" para continuar.

Photobucket



6. Digitar o nome.
7. Digitar apelido.
8. Digitar email.
9. Optar por gênero feminino ou masculino.
10. Colocar dados de data de nascimento.
11. Digitar código postal.
12. Copiar código de segurança.
13. Validar a inscrição clicando em "I accept Sign me UP"

Photobucket


14. Seleccionar a opção "NO THANKS" para iniciar uma conta gratuita no Photobucket.
Photobucket



ESTÁ AGORA TUDO PRONTO PARA COMEÇAR A CARREGAR/UPLOAD DAS IMAGENS.

Photobucket


Photo Sharing and Video Hosting at Photobucket
Photo Sharing and Video Hosting at Photobucket


PROCEDER AO UPLOAD/CARREGAMENTO DE IMAGENS PARA OBTER URL/LINK PARA COMOCAR NOS SCRIPTS DE CÓDIGO HTML

1. Seleccionar a fonte de origem da imagem...neste caso vamos buscá-la ao nosso computador.
2. Embora este elemento não ter a elipse laranja a envolver é igualmente importante. É onde vamos escolher a opção da dimensão com que a imagem entra no Photobucket (se seleccionarmos um tamanho grande é preciso que a imagem tenha boa qualidade senão vai ficar desfocada).
3. "UPLOAD de IMAGENS", seleccionar este botão para ir buscar as imagens à fonte de origem...neste caso o nosso computador.
4. Depois de clicar em "UPLOAD de IMAGENS" apareçe uma janela onde estão todas as pastas do computador, onde iremos escolher a origem da imagem que queremos fazer o UPLOAD.
5. Depois de escolhida e seleccionada a imagem, clicar em "ABRIR"


Photobucket

6. Depois de feito o UPLOAD da imagem clicar em "SAVE & GET LINKS".

Photobucket
7. Depois de Gravada a Imagem aparece a imagem e os respectivos códigos. O URL/LINK que precisamos para colocar no código de HTML do SCRIPT que vimos no POST de adicionar imagem de fundo no BLOG é o "DIRECT LINK". O qual vamos copiar e colocar no respectivo código de HTML como vamos ver aqui.

Script para colocar imagem de fundo no BLOG com link de imagem.
<style type="text/css">body {background-image: url( http://i828.photobucket.com/albums/zz210/saberdoser/Blogs/estetica/fundo-estetica1.jpg); background-position: center; background-repeat: no-repeat; background-attachment: fixed;}</style>

Para VER como COLOCAR ESTE Script no BLOG ver POST anterior.

Photobucket

terça-feira

Html script para colocar no editor de HTML do seu Blog...

Photobucket




Script para Abrir um link/hiperligação em nova Janela


<a href="http://www.seulink.com" target="_blanck">Clique aqui!</a>




Photo Sharing and Video Hosting at Photobucket

SCRIPT Html para Criar um Botão de link/hiperligação




<input onclick="self.location.href=('LINK do BOTÃO')" type="button" value="TEXTO do BOTÃO">

Photo Sharing and Video Hosting at Photobucket

Script Html para fazer de TEXTO a CORRER pelo MONITOR

Photo Sharing and Video Hosting at Photobucket





PhotobucketScript de Texto a correr pela tela


<div align="center">
<marquee scrollamount="5" width="100%">
<div align="center">TEXTO<span ><strong></strong></span></div></marquee></div>



Photo Sharing and Video Hosting at Photobucket

Script Html - AUMENTAR o RANKING de VISITAS de um blog ou site.

Photo Sharing and Video Hosting at Photobucket

Aumentar o RANKING de VISITAS na sua Página Web


<HEAD>
<meta name="url" content="http://www.LINKdeSEUSITE.com">
<meta name="language" content="Portugues">
<meta name="description" content="DESCRIÇÃO DO SITE">
<meta name="keywords" content="PALAVRAS CHAVE separados por espaço exemplo criar blog script">
<meta name="reply-to" content="seu@email.com">
<meta name="copyright" content="Love Dolphin">
<meta name="category" content="Internet">
<meta name="Robots" content="Index,Follow">
<meta name="author" content="Seu Nome Vai aqui">
<link rev=made href="mailto:seu@email.com">
</HEAD>


Photo Sharing and Video Hosting at Photobucket

Script - Colocar Um TRADUTOR´na página - Código HTML - webdesign










<p></p>
<form action="http://www.google.com/translate " style="text-align:center">

<script language="javascript" type="text/javascript">
<!--
document.write ("<input name=u value="+location.href+" type=hidden>")
// -->
</script>

<noscript><input value="http://criar1blog2.blogspot.com/" name="u" type="hidden" /></noscript>

<input value="pt-PT" name="hl" type="hidden" />
<input value="UTF8" name="ie" type="hidden" />
<input value="" name="langpair" type="hidden" />

<input onclick="this.form.langpair.value=this.value" title="English" value="pt-PTen" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/724501/gse_multipart16505.png" width="30" name="langpair" />

<input onclick="this.form.langpair.value=this.value" title="Español/Spanish" value="pt-PTes" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png" width="30" name="langpair" />

<input onclick="this.form.langpair.value=this.value" title="Français/French" value="pt-PTfr" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/327620/gse_multipart12413.png" width="30" name="langpair" />

<input onclick="this.form.langpair.value=this.value" title="Italiano/Italian" value="pt-PTit" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/306145/gse_multipart12401.png" width="30" name="langpair" />

<input onclick="this.form.langpair.value=this.value" title="Deutsch/German" value="pt-PTde" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/734899/gse_multipart12400.png" width="30" name="langpair" />

<input onclick="this.form.langpair.value=this.value" title="&#1056;&#1091;&#1089;&#1089;&#1082;&#1080;&#1081;/Russian" value="pt-PTru" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/111692/gse_multipart12405.png" width="30" name="langpair" />