Twitter Delicious Facebook Digg Stumbleupon Favorites More

Imagens, Textos ou Banners Rolando

Código de Imagem, Texto ou Banner.

Um widget muito interessante que descobri recentemente é o código para a utilização de imagens, textos ou banners rolando de baixo para cima. Achei muito legal e bem útil para diminuir o espaço que os banner ocupam no blog.

Quando você posiciona o cursor do mause sobre as imagens ela pára de rolar. Isso é bom, pois, ao contrário, se você não clicasse a tempo teria que esperar ela voltar de novo, heheh.

Abixo, está o código para essa função com as alterações possíveis.

No código abaixo, modifique o seguinte:

De vermelho, determine a altura a largura, respectivamente.
De verde, a direção: "up" - de baixo para cima
                                        "down" - de cima para baixo
                                        "up style" -  da esquerda para a direita
De azul, a velocidade do rolamento.
De laranja, insira os códigos de imagens, textos ou banners.

 
Código de Imagem, Texto ou Banner.
Código de Imagem, Texto ou Banner.
Código de Imagem, Texto ou Banner.

<marquee heigth="480" widht="480" direction="up" behavior="scroll" onmouseover="this.stop() " onmouseout="this.start()" scrollamount="3">

<center>

Código de Imagem, Texto ou Banner.

Código de Imagem, Texto ou Banner.

Código de Imagem, Texto ou Banner.

</center></marquee>

Ou utilize ainda duas outras variações mais simples:

<marquee> Código de Imagem, Texto ou Banner.</marquee>

Código de Imagem, Texto ou Banner.

<marquee height="300" direction="up">Código de Imagem, Texto ou Banner.</marquee>

Código de Imagem, Texto ou Banner.

Dica: Se quiser colocar uma borda em volta do local do marquee, pode utilizar tabela. Veja:

Código de Imagem, Texto ou Banner.

Basta inserir o código abaixo, formatando os valores de altura e largura da tabela:

<center>
<table width="300" heigth="40" valign="middle" border="1">
<tbody>
<tr>
<td>
<marquee>Código de Imagem, Texto ou Banner. </marquee></td></tr></tbody></table></center>

31 comentários:

Anônimo disse...

olá!
adorei os codigos!!
mas fiquei em duvida em uma coisa.
como faço para aumentar o tamanho onde as imagens vão passar?

Willian Coutinho disse...

Fácil. Basta formatar o tamanho da altura (height) e largura (width) da tag marquee.

marquee height="350" width="160"

Hélio disse...

Wllian,
Ótimas dicas, não conhecia estes macetes.
Uma duvida: como faço para colocar, num text widged, o código HTML que deve ser copiado para o outro blog? Como no seu LINK-ME, abaixo do "Divulgue o DIcas e Plugins".
Agradeço antecipadamente e bons ventos sempre,

Willian Coutinho disse...

Dá uma olhada no post "Código para caixa de texto

Hélio disse...

Willian,

Continuando a pesquisa, estava vindo de lá.
Obrigado, vamos continuar o papo no post "Código para caixa de texto".

ET: para sua informação, aqui o Dicas e Plugins, quando seleciono "Comentar como:" aí embaixo e escolho Wordpress, depois de informar o endereço, é acrescido automaticamente (Wordpress) ao fim do mesmo, daí recebo a msg: O URL contém caracters inválidos.
Só consigo comentar aqui escolhendo Nome/URL.

Bons ventos sempre,

Ronney disse...

Opa! Somos do blog Brasileiro "ByAvrilLavigne" Destinado a cantora canadense Avril Lavigne. Só queremos avisar que passamos por aqui e este seu código de rolar imagens ou texto foi muito útil para gente. com isso diminuimos espaço no blog que iamos perder com todas plaquinha de banners de parcerias. mais uma vez obrigado.

Depois se poder passe em nosso blog:

www.byavrillavigne.rg3.net

abraços!

Incógnita disse...

Olá!Conheci seu blog hoje e estou adorando.Ótimo mesmo!!!
Parabéns!Está me ajudando muito.

Willian Coutinho disse...

Obrigado.
Fico grato por saber que o blog está sendo bastante útil.

Anônimo disse...

COMO FAÇO FORMATAR AS FONTES

Willian Coutinho disse...

Para formatar as fontes do seu texto, dá uma olhada nesse link: http://www2.ufpa.br/dicas/htm/htm-font.htm

Anônimo disse...

pra quem nao sabe nada esses codigos ta de bom tamanho... isso nao se usa mais...
aff usar marquee... é carniça demais... faz um carrossel que é melhor e mais atual... marquee nao funciona em navegadores como firefox e alem do mais deixa um espaço vazio no final de cada texto ou imagem.

ჱჱ◦ღ♥¸¸.·*´¯`♥M♥®C!♥´¯`*·.¸¸♥ღ◦ჱჱ disse...

coloco as frase mais não aparece do jeito q coloquei seria melhor uns codigos com as frases prontas..

Fernando disse...

Muito legal o codigo que vc colocou no site, bem pratico e simples. Estes codigos simples sao melhores que aqueles de hoje em dia, pois sao bem praticos e se vc saber usar a seu favor e bem colocado. Obrigado pela dica, FUI...........

JL Martinns disse...

Muito Dez este blog... Das dicas sobre coluna horintal na lateral do blog, banners rolando, dividir colunas... ects,,, este blogs aqui foi que funcionou... veja a coluna horizontal que eu inserir abaixo das duas laterias: http://amigosemdebate.blogspot.com/

lembrando aos moderadores deste blog que para completar as configuações da coluna horizontal inseriada eu tive que acrescentar muitas coisas que não estão no tutorial, pois está incompleto..

mas aqui abaixo eu disponibilzo para voces como ficou depois umas mexidas:
Observem: Os pontinhos estão representando as demais sidebars sequenciais:

/* ----- SIDEBAR ----- */
#.................... {

#rightsidebar2-wrapper {
background: url() top yes-repeat;
width: 358px;
margin-top:10px;
margin-right:10px; _margin-right:0px;
margin-left: 1px;
color: $textColor;
font: $textFont;
font-weight: bold;
font-size: 13px;
float:right;
word-wrap: break-word;
overflow: hidden;

}

esta acima foi a nova coluna que eu adicioneie. E para configurar pra ficar do mesmo jeito que as outras sidebars eu acrescentei após a sequencia abaixo, assim:

#sidebar1 .widget {
margin: 0px 0px 4px 0px;
padding: 15px 15px 15px 15px;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;
}

#.........2. (representando as demais sidebars)
#.........3. ( '' '' '' '' '' '')
}

#rightsidebar2-wrapper .widget {
margin: 0px 0px 4px 0px;
padding: 15px 15px 15px 15px;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;
}

essa eu coloquei abaixo da sequencia que sucede do mesmo modo como eu fiz com a de cima. (isto é: se vc quer colocar em baixo das duas laterais é, claro.. vai do seu gosto)

Mais embaixo você vai encontrar esta outra sequencia. veja:

/* sidebar heading ----- */

#sidebar1 h2, #sidebar2 h2, #sidebar3 h2, #sidebar4 h2 {
margin: -15px -15px 10px -15px;
padding: 4px 15px 2px 15px;
text-align: center;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: none;
text-decoration: none;
background: $sidebar1HeaderBgColor;
border-bottom: 2px solid $sidebar1HeaderBorderColor;
}

no final dessa você acrescenta esta que é a nova, na mesma sequencia:

#rightsidebar2-wrapper h2 {
margin: -15px -15px 10px -15px;
padding: 4px 15px 2px 15px;
text-align: center;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: none;
text-decoration: none;
background: $sidebar1HeaderBgColor;
border-bottom: 2px solid $sidebar1HeaderBorderColor;
}

e após a de cima, mais esta:

#sidebar1 a, #sidebar2 a, #sidebar3 a , #sidebar4 a, #rightsidebar2-wrapper a {
color: $sidebar1LinkColor;
text-decoration: none;
}
no caso, eu acrescentei a nova sidebar na sequencia das demais.... dá pra notar né que ela, a #rightsidebar2-wraper a { está lá na sequencia das demais..

e assim acrescente ela sucessivamente até findar as sequencias de todas as sidebars como está abaixo:

#sidebar1 a:hover, #sidebar2 a:hover, #sidebar3 a:hover, #sidebar4 a:hover, #rightsidebar2-wrapper a:houver {
text-decoration: none;
color: $sidebar1HoverLinkColor;
}

#sidebar1 a:visited, #sidebar2 a:visited, #sidebar3 a:visited, #sidebar4 a:visited, #rightsidebar2-wrapper a:visited {
text-decoration: none;
color: $sidebar1VisitedLinkColor;
}

.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid $profileBorderColor;
}

fim das sidebars

/* ----- PROFILE ----- */

não deixe de visitar meu blog http://amigosemdebates.blogspot.com/ só pra ver como foi que ficou as colunas inseridas, lembrando que voce pode inserir quantas colunas quiser...

abraçoss...

BRUNNEUS disse...

obrigado pelos codigos sucesso

Neto disse...

Bom dia parabens pelos scrips muito interessante e de otima precisão so precisava saber como que faço para esta rolagem de imagens no caso eu configurei para lateral que ela nao venha parar ou seja parar nao que ela repita sem parar e nao deixe um espaço em branco no final e depois sim que volte a mostrar as imagens... Desde ja agradecido amiugos e parabens....

Neto

Anônimo disse...

é muito legal mais ´so uma perguntinha como coloco o texto hotizontal no blog uol zip net? bjz

Anônimo disse...

como eu faço pra fazer a fonte rolar sem mexer na imagem de fundo

Jesielle disse...

Legal...
eu fiz, deu certo! Mas eu queria saber como faço pra colocar uma borda diferente nesse quadro onde rolam as imagens?
Assim como tem nesse blog: beleza.rara.zip.net

Willian Coutinho disse...

Jesiele, você vai ter que inserir esse marquee dentro de uma tabela e, aí sim, definir o visual da borda da tabela. Veja um exemplo:

(table border="1px solid #ffff00")
(tr)
(td)
(marquee) .............. (/marquee)
(/td)
(/tr)
(/table)

♥Ryoko♥ disse...

Esse código é para colocar onde?

Hérida Ruyz disse...

Olá!
O meu ficou legal no firefox,mas no IE não funciona.
Existe alguma forma de configurar?

M!riam disse...

Oie! Que código devo colocar das imagens, pois coloco a url da imagem e ela não aparece, fica rolando o endereço http que inseri.

podes me ajudar?

livrosbg@gmail.com

agradeço,

Miriam

Jesielle disse...

obrigada! vou testar a dica!

Jefferson F. Carvalho disse...

Muito massa!!!!!! ja coloquei no meu blog... Parabéns pelo blog, estou te seguindo. Vai no meu e me da uma ajudinha me seguindo tbm!!!kkkkkkkkkkk
http://tendatutoriais.blogspot.com/

Nilvana disse...

Oi gostaria de saber como coloco cor diferente no texto

GOSPEL NIL MUSIC disse...

Awe mano vlw msm, fico muito bom!!!

CS disse...

Olá, como faço pra colocar as imagens ?

Roronoa disse...

brigadao cara

Alex brisa disse...

ei bhoder como eu faço para ter minhas noticias rolando em todo blog... ja tentei de tudo ou eu acho rrsrsrsrs dar uma diga mano abraço quero que ficar rolando a lateral do meu blog..ser der todas as noticias

FANGAMES disse...

a melhor dica vlw muito bom o blog ajudou muito

Postar um comentário

Envie um comentário!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates