Menu Flutuante

segunda-feira, 19 de maio de 2008

dynamicdriveEncontrei este site muito bacana que ensina algo muito legal e que muitos não sabem. Como colocar uma box em sua sidebar de modo que ela role automaticamente? Pois os seus problemas acabaram! O site oferece os códigos necessários porém, está em inglês e não fornece exclarecimentos detalhados de formatação, como nem todo mundo vai gostar do layout deste menu, vou explicar como fazer para deixá-lo com o seu jeito e combinando com a aparência de seu blog:

1º Vá ao layout de seu blog/site e nas definições Html. Clique Ctrl+F e uma barrinha de busca aparecerá. Digite: <head> e abaixo dele insira o seguinte código:


<style type="text/css">

#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}

</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>


Após colar este código abaixo da sessão <read> salve o novo modelo. Você verá que seu blog continuará a mesma coisa, o diferencial vem agora! O código abaixo você deve colar no local onde deseja inserir seu menu flutuante:

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

<!--YOUR SCROLL CONTENT HERE-->

<h4>Your scroller contents&lt;/h4>

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div>

Este segundo código você pode colocar em uma postagem, na sua sidebar, onde você quiser no blog! E como definir cor, altura, largura e velocidade?
Está vendo no código algumas cores destacadas? Pois então vamos lá:

  • Laranja - são respectivamente largura e altura e você pode trocar os valores 200 e 200 por qualquer outro de seu agrado. Você define como ficará a caixinha.
  • Vermelho - esta é a cor do fundo. O padrão é White (branco) porém, se você quiser uma outra cor é só escrevê-la no lugar: blue, black, green, você escolhe a cor (que deve ser escrita em inglês).
  • Azul Marinho - define a cor da borda de seu menu. O padrão é definido como laranja solido (solid orange) mas você também pode escolher a cor que desejar e substituir.
  • Verde - var marqueespeed=2 Este valor é responsável pela velocidade de rolagem, se quiser que seja mais rápida é só trocar o valor por outro (3,4,5,6...)

No segundo código que você irá colar em sua sidebar ou postagem a parte destacada em lilas será onde você incluirá o que deseja que fique dentro do menu. Você pode colocar qualquer coisa (os blogs favoritos, os prêmios, as últimas postagens, os links dos sites favoritos, as fotos do cachorro, enfim, qualquer coisa que você queira). Dica: eu aconselho que você abra duas páginas em seu blog: uma para alterar as configurações no html e outra do local onde o segundo código ficará. Desta forma quando você alterar algo nas configurações do Html e salvar é só atualizar a segunda página para ver como ficou.

ATENÇÃO:
Se você precisar usar mais de uma caixinha, defina de um modo que fique legal para as duas no seu HTML, não tem como criar duas caixinhas de tamanho e cores diferentes para o mesmo blog. Segundo o site, este esquema não funciona para Netscape 7 e Ópera pois a rolagem empurra o resto da página para baixo. Eles resolveram isso da seguinte forma: ao invés da rolagem automática, em Netscape 7 e Ópera aparece uma barrinha de rolagem manual. Muito bom não é mesmo! Gênios! Se você estiver com dúvidas se o método funciona mesmo ou não veja no link abaixo o exemplo de menu flutuante que coloquei em meu outro blog: Jaqueline by Jaqueline:



E se você gostou pode também visitar o site original de onde tirei esta dica, eles possuem outras coisas interessantes para sites e blogs. Clique aqui





FeedGostou do artigo? Assine nosso Feed e saiba tudo o que acontece no Super DicaSSS!!!

12 comentários:

Fernando César disse...

E você se coloca em qual das categorias? (sem falsa modéstia...)

Bjo.


[ps: favoritei esse blog, muitas dicas interessantes aqui]

Jaqueline Amorim disse...

Oi Fernando... não sei, mas não recebo elogios as 3 horas da manhã, eles vem antes... Mas sabe que eu preferiria estar na segunda categoria efetivamente. Elas são mulheres com muito mais sorte neste sentido. Obrigada pela visita. Beijos! O seu blog já está mais que favoritado. Adorei seus artigos...

Denial_Inside disse...

Oi jaqueline, como vai? Ótima dica. Está anotada. Beijo

Jaqueline Amorim disse...

Oi Denial! Ultimamente tem me faltado tempo, mas está tudo bem graças a Deus e espero que contigo também! Que bom que gostou da dica, espero que ela possa te ajudar! Beijos!

Mary disse...

Oi Jaqueline,
Muito boa esta dica, já copiei!
Bj e bom feriado!

Jaqueline Amorim disse...

Obrigada Mary! Bom feriado para você também! :)

Cidão disse...

Odeio mexer no html do blog, sempre faço caca... ;o)

Jaqueline Amorim disse...

Se fizer do jeitinho que eu coloquei aí vai ver que não tem erro Cidão. Beijos e bom feriado! :)

Eurico de Andrade disse...

Olá, Jaqueline!
Há muito tempo que esperava por essa dica. Agora só espero que consiga colocá-la no meu blog.
Parece que tá bem explicadinha e vou tentar seguir todos os passos que vc ensinou. Aguarde!

Jaqueline Amorim disse...

Consegue sim Eurico! Qualquer dúvida é só pedir um help! Fique com Deus e bom final de semana! :D

Filipe disse...

Oi!


Antes de mais os meus parabens pelo seu blog!

Eu colei esse script mas num site normal em html e não num blog. Acontece que o menu aparece mas não flutua.

Você sabe me dizer porque isso pode tar acontecendo?

Desde já agradeço a sua resposta!

Jaqueline Amorim disse...

Oi Filipe! Também não entendi porque não rolou. Esse mesmo código é aplicável a sites. Se você usa o Netscape ou o Ópera, realmente não irá rolar agora se usou outro navegador, talvez tenha gerado algumo conflito com outro código que você tenha instalado. Aqui no Super DicaSSS eu tinha este código e o gerador de emoticons instalado. Um criou conflito com o outro. Acabei retirando os dois mas o menú flutuante eu mantive no Jaqueline by Jaqueline (meu outro blog). Verifique os códigos que você já possui para tentar detectar conflitos ok? Obrigada pela visita e desculpa a demora na resposta. Beijos e volte sempre! :)

Postar um comentário

Oi obrigada por comentar! Assim que possível responderei você aqui no blog! Volte sempre! :)

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina
 

  ©Template 'Super DicaSSS' by Jaqueline Amorim - 2010

TOPO