Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RafaelSonyLock

[Resolvido] Pop-up abre automatico com o site por 10 segundos

Por , em Javascript

Recommended Posts

RafaelSonyLock    18

RafaelSonyLock
Postado

Queria um codigo para colocar no blog (blogger)(RafaelSonyLock) para que quando abra o site apenas exiba uma imagem com escrito BEM VINDO AO SITE XXXXXXXXXXXXXXXXXXXXXXX

XXXX é o nome, não pensa que é outra coisa não, (muitos risos)

 

E entre quais tags (Body, Head, .......) ?

 

 

Obrigado e para informação, sou burro no assunto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Então, cara.

 

O computador não vai saber o nome da pessoa que visita o site sem nenhum registro.

 

Para isso, você precisa fazer com que a pessoa se registre e fazer algo com alguma linguagem server-side, tal como o PHP. Por exemplo: Se a pessoa estiver registrada, mostre: "Bem vindo, User", se não, mostre: "(Entrar/Registrar)."

 

Tem uma segunda opção, que é armazenar um valor no cache no navegador. Por exemplo: quando a pessoa entra pela primeira vez no site, aparece um pop-up e nele é pedido o seu nome. Essa variável é armazenada no cache|cookie e cada vez que entrar, e estiver com essa informação armazenada, é apresentado sua mensagem.

 

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

Cara eu postei um negócio muito nada a ver no 1º post.

Mas vou tentar te explicar.

 

Vamos supor que você tem um campo de texto para o cara por o nome dele.

Ele coloca o nome e clica no botão

O botão vai fazer gravar aquela informação em um cookie para poder aparecer na janela entende ?!

 

O que o Thiago Retondar quis dizer é para você criar um cadastro para o usuário para que toda vez que ele logar(a maneira de reconhecer a pessoa)

seja criado um cookie para informar o nome que deve aparecer.

 

Deu para pegar a idéia ?

 

 

Acabei postando junto :P

Compartilhar este post

Link para o post
Compartilhar em outros sites

RafaelSonyLock    18

RafaelSonyLock
Postado

Não não, somente uma janela mostrando "Seja bem vindo ao site/blog RafaelSonyLok"

 

Nada a mais, somente isso !

 

Eu eu preciso do codigo que exiba isso, ai eu vou fazer uma imagem em 200 x 100 pixels !

 

Não teria como ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

RafaelSonyLock    18

RafaelSonyLock
Postado

Thiago

 

Se não for te incomodar, eu posso te mandaro link da imagem e voce coloca no codigo HTML do blog pois não intendi nada, eu sou bem burro (Alto nivel) em HTML !

 

Mas somente se não for te encomodar

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Pode ser. Porém, aconselho-te a estudar o XHTML e CSS.

 

Nunca mexi com JavaScript, então também vou tentar. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif Mas pode mandar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RafaelSonyLock    18

RafaelSonyLock
Postado

Tah beleza e muito obrigado

 

Estou estudando o HTML ainda para criação sites (ainda tenho 12 anos) !

 

Hummm... vou fazer a imagem no Photoshop e depois te mando o link da imagem já hospedada !

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Fico na espera. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

A faixa etária do pessoal jovem que anda começando nesse mundo é por aí mesmo, 12~15. Tenho 15 anos. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif Acho que comecei com 13 anos, só que como meu computador era muito bom http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif , acabava desistindo. No fim, comecei aestudar XHTML mais ou menos em Julho do ano passado e CSS em dezembro.

 

A dica que eu te dou é praticar. =]

 

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RafaelSonyLock    18

RafaelSonyLock
Postado

URL Imagem: http://pic1.piccdrop.com/i/2/1241711953.bmp

 

Codigo HTML do blog abaixo

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
	<!-- iconj.com favicon code -->
<link href='http://pic1.piccdrop.com/i/4/1240936162.ico' rel='shortcut icon' type='image/x-icon'/> 
<!-- end of iconj.com favicon code -->

	<b:include data='blog' name='all-head-content'/>
	<title><data:blog.pageTitle/></title>
	<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: 	  Thisaway (Blue)
Designer: Dan Rubin
URL:	  www.superfluousbanter.org
Date:	 29 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="textColor" description="Text Color"
			 type="color" default="#204063" value="#000000">
   <Variable name="blogTitleColor" description="Blog Title Color"
			 type="color" default="#eef6fe" value="#000033">
   <Variable name="blogDescriptionColor" description="Blog Description Color"
			 type="color" default="#eef6fe" value="#808080">
   <Variable name="postTitleColor" description="Post Title Color"
			 type="color" default="#477fba" value="#cc0000">
   <Variable name="dateHeaderColor" description="Date Header Color"
			 type="color" default="#8facc8" value="#008000">
   <Variable name="sidebarHeaderColor" description="Sidebar Title Color"
			 type="color" default="#809fbd" value="#666666">
   <Variable name="mainLinkColor" description="Link Color"
			 type="color" default="#4386ce" value="#4386ce">
   <Variable name="mainVisitedLinkColor" description="Visited Link Color"
			 type="color" default="#2462a5" value="#800080">
   <Variable name="sidebarLinkColor" description="Sidebar Link Color"
			 type="color" default="#599be2" value="#599be2">
   <Variable name="sidebarVisitedLinkColor"
			  description="Sidebar Visited Link Color"
			 type="color" default="#3372b6" value="#800080">

   <Variable name="bodyFont" description="Text Font"
			 type="font" default="normal normal 100% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif" value="italic normal 98% Trebuchet, Trebuchet MS, Arial, sans-serif">
   <Variable name="headerFont" description="Sidebar Title Font"
			 type="font"
			 default="normal bold 100% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif" value="italic normal 121% Times, serif">
   <Variable name="pageTitleFont" description="Blog Title Font"
			 type="font"
			 default="normal bold 200% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif" value="italic bold 200% Georgia, Times, serif">
   <Variable name="blogDescriptionFont" description="Blog Description Font"
			 type="font"
			 default="normal normal 80% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif" value="italic bold 97% Times, serif">
   <Variable name="startSide" description="Start side in blog language"
			 type="automatic" default="left" value="left">
   <Variable name="endSide" description="End side in blog language"
			 type="automatic" default="right" value="right">
*/

/* global
----------------------------------------------- */
body {
  margin: 0;
  text-align: center; 
  min-width: 760px;
  background: #4386ce url(http://www.blogblog.com/thisaway_blue/bg_body.gif) repeat-x $startSide top;
  color: $textColor;
  font-size: small;
}

blockquote {
  margin: 0;
  padding-top: 0;
  padding-$endSide: 10px;
  padding-bottom: 0;
  padding-$startSide: 10px;
  border-$startSide: 6px solid #d8e7f78;
  border-$endSide: 6px solid #d8e7f7;
  color: $postTitleColor;
}

code {
  color: $postTitleColor;
}

hr {
  display: none;
}


/* layout
----------------------------------------------- */
#outer-wrapper {
  margin: 0 auto;
  width: 760px;
  text-align: $startSide;
  font: $bodyFont;
}

#header-wrapper {
  padding-bottom: 15px;
  background: url(http://www.blogblog.com/thisaway_blue/bg_header_bottom.gif) no-repeat $startSide bottom;
}

#header {
  background: #204063 url(http://www.blogblog.com/thisaway_blue/bg_header.gif) repeat-x $startSide bottom;
}

#content-wrapper {
  position: relative;
  width: 760px;
  background: #f7f0e9 url(http://www.blogblog.com/thisaway_blue/bg_main_wrapper.gif) repeat-y $startSide top;
}

#main-wrapper {
  display: inline; /* fixes a strange ie margin bug */
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 0;
  margin-bottom: 0;
  margin-$startSide: 3px;
  padding: 0;
  width: 483px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;	 /* fix for long non-text content breaking IE sidebar float */
}

#main {
  padding-top: 22px;
  padding-$endSide: 8px;
  padding-bottom: 0;
  padding-$startSide: 8px;
  background: url(http://www.blogblog.com/thisaway_blue/bg_content.gif) repeat-x $startSide top;
}

.post {
  margin-top: 0;
  margin-$endSide: 8px;
  margin-bottom: 14px;
  margin-$startSide: 21px;
  padding: 0;
  border-bottom: 3px solid #d8e7f7;
}

#comments {
  margin-top: 0;
  margin-$endSide: 16px;
  margin-bottom: 14px;
  margin-$startSide: 29px;
  padding: 10px;
  border: 1px solid #cedef0;
  background-color: #e4ecf5;
}

#sidebar-wrapper {
  display: inline; /* fixes a strange ie margin bug */
  float: $endSide;
  margin-top: 0;
  margin-$endSide: 3px;
  margin-bottom: 0;
  margin-$startSide: 0;
  width: 269px;
  color: $textColor;
  line-height: 1.4em;
  font-size: 90%;
  background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar.gif) repeat-x $startSide top;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;	 /* fix for long non-text content breaking IE sidebar float */
}

#sidebar {
  padding-top: 7px;
  padding-$endSide: 11px;
  padding-bottom: 0;
  padding-$startSide: 14px;
  background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar_arrow.gif) repeat-y 179px 0;
}

#sidebar .widget { 
  margin-bottom: 20px;
 }


#footer-wrapper {
  padding-top: 15px;
  background: url(http://www.blogblog.com/thisaway_blue/bg_footer_top.gif) no-repeat $startSide top;
  clear: both;
}

#footer {
  background: #152e49 url(http://www.blogblog.com/thisaway_blue/bg_footer.gif) repeat-x $startSide top;
  text-align: center;
  min-height: 2em;
}

/* headings
----------------------------------------------- */

#header h1 {
  margin: 0;
  padding-top: 24px;
  padding-$endSide: 0;
  padding-bottom: 0;
  padding-$startSide: 84px;
  background: url(http://www.blogblog.com/thisaway_blue/icon_header_$startSide.gif) no-repeat 16px 26px;
}

h2.date-header {
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: 0;
  padding-$startSide: 29px;
  text-transform: uppercase;
  color: $dateHeaderColor;
  background: url(http://www.blogblog.com/thisaway_blue/icon_date.gif) no-repeat 13px 0;
  font-size: 80%;
  font-weight: normal;
}

.date-header span {
  margin-top: 0;
  margin-$endSide: 0;
  margin-bottom: 0;
  margin-$startSide: 5px;
  padding-top: 0;
  padding-$endSide: 25px;
  padding-bottom: 0;
  padding-$startSide: 25px;
  background: url(http://www.blogblog.com/thisaway_blue/bg_date.gif) no-repeat $startSide 0;
}

.sidebar h2 {
  padding-top: 1px;
  padding-$endSide: 0;
  padding-bottom: 0;
  padding-$startSide: 36px;
  color: $sidebarHeaderColor;
  background: url(http://www.blogblog.com/thisaway_blue/icon_sidebar_heading_$startSide.gif) no-repeat $startSide 45%;
  font: $headerFont;
}

.sidebar .Profile h2 {
  color: #527595;
  background: url(http://www.blogblog.com/thisaway_blue/icon_sidebar_profileheading_$startSide.gif) no-repeat $startSide 45%;
}

.post h3 {
  margin-top: 13px;
  margin-$endSide: 0;
  margin-bottom: 13px;
  margin-$startSide: 0;
  padding: 0;
  color: $postTitleColor;
  font-size: 140%;
}

.post h3 a, .post h3 a:visited { 
  color: $postTitleColor;
 }

#comments h4 {
  margin-top: 0;
  font-size: 120%;
}


/* text
----------------------------------------------- */

#header h1 {
  color: $blogTitleColor;
  font: $pageTitleFont;
}

#header .description {
  margin: 0;
  padding-top: 7px;
  padding-$endSide: 16px;
  padding-bottom: 0;
  padding-$startSide: 84px;
  color: $blogDescriptionColor;
  font: $blogDescriptionFont;
}

.post-body p {
  line-height: 1.4em;
  /* Fix bug in IE5/Win with italics in posts */
  margin: 0;
  height: 1%;
  overflow: visible;
}

.post-footer {
  font-size: 80%;
  color: $dateHeaderColor;
}

.uncustomized-post-template .post-footer {
  text-align: $endSide;
}

.uncustomized-post-template .post-footer .post-author,
.uncustomized-post-template .post-footer .post-timestamp {
  display: block;
  float: $startSide;
  text-align: $startSide;
  margin-$endSide: 4px;
}

p.comment-author {
  font-size: 83%;
}

.deleted-comment {
  font-style:italic;
  color:gray;
}

.comment-body p {
  line-height: 1.4em;
}

.feed-links { 
  clear: both;
  line-height: 2.5em;
  margin-bottom: 0.5em;
  margin-$startSide: 29px;
}

#footer .widget { 
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: 15px;
  padding-$startSide: 55px;
  color: #fef6ee;
  font-size: 90%;
  line-height: 1.4em;
  background: url(http://www.blogblog.com/thisaway_blue/icon_footer.gif) no-repeat 16px 0;
}


/* lists
----------------------------------------------- */

.post ul {
  padding-$startSide: 32px;
  list-style-type: none;
  line-height: 1.4em;
}

.post li {
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: 4px;
  padding-$startSide: 17px;
  background: url(http://www.blogblog.com/thisaway_blue/icon_list_item_$startSide.gif) no-repeat $startSide 3px;
}

#comments ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#comments li {
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: 1px;
  padding-$startSide: 17px;
  background: url(http://www.blogblog.com/thisaway_blue/icon_comment.gif) no-repeat $startSide 3px;
}

.sidebar ul {
  padding: 0;
  list-style-type: none;
  line-height: 1.2em;
  margin-$startSide: 0;
}

.sidebar li {
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: 4px;
  padding-$startSide: 17px;
  background: url(http://www.blogblog.com/thisaway_blue/icon_list_item.gif) no-repeat $startSide 3px;
}

#blog-pager-newer-link {
  float: $startSide;
  margin-$startSide: 29px;
 }
 
#blog-pager-older-link {
  float: $endSide;
  margin-$endSide: 16px;
 }
 
#blog-pager {   
  text-align: center; 
 }

/* links
----------------------------------------------- */
a {
  color: $mainLinkColor;
  font-weight: bold;
}

a:hover {
  color: $mainVisitedLinkColor;
}

a.comment-link {
/* ie5.0/win doesn't apply padding to inline elements,
   so we hide these two declarations from it */
  background/* */:/**/url(http://www.blogblog.com/thisaway_blue/icon_comment.gif) no-repeat $startSide 45%;
  padding-$startSide: 14px;
}

html>body a.comment-link {
  /* respecified, for ie5/mac's benefit */
  background: url(http://www.blogblog.com/thisaway_blue/icon_comment.gif) no-repeat $startSide 45%;
  padding-$startSide: 14px;
}

.sidebar a {
  color: $sidebarLinkColor;
}

.sidebar a:hover {
  color: $sidebarVisitedLinkColor;
}


#header h1 a {
  color: $blogTitleColor;
  text-decoration: none;
}

#header h1 a:hover {
  color: #b4c7d9;
}

.post h3 a {
  text-decoration: none;
}

a img { 
 border-width: 0;
}

.clear {
  clear: both;
  line-height: 0;
  height: 0;
}

.profile-textblock { 
  clear: both;
  margin-bottom: 10px;
  margin-$startSide: 0;
}

.profile-img { 
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 3px;
  border: 1px solid #bdd4eb;
}

.profile-link { 
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: 0;
  padding-$startSide: 17px;
  background: url(http://www.blogblog.com/thisaway_blue/icon_profile_$startSide.gif) no-repeat $startSide 0;
}

/** Page structure tweaks for layout editor wireframe */

body#layout #main,
body#layout #sidebar { 
  padding: 0;
}
]]></b:skin>
  </head>

  <body>
  <div id='outer-wrapper'><div id='wrap2'>

	<!-- skip links for text browsers -->
	<span id='skiplinks' style='display:none;'>
	  <a href='#main'>skip to main </a> |
	  <a href='#sidebar'>skip to sidebar</a>
	</span>

	<div id='header-wrapper'>
	  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RafaelSonyLock® Dicas para Windows™ (Cabeçalho)' type='Header'/>
</b:section>
	</div>
 
	<div id='content-wrapper'>

	  <div id='crosscol-wrapper' style='text-align:center'>
		<b:section class='crosscol' id='crosscol' showaddelement='no'/>
	  </div>

	  <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>

	  <div id='sidebar-wrapper'>
		<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Categorias' type='Label'/>
<b:widget id='HTML2' locked='false' title='Suas Informações' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Contador Visitas' type='HTML'/>
<b:widget id='HTML1' locked='false' title='Visitas Online' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Favoritos / Link's' type='HTML'/>
</b:section>
	  </div>

	  <!-- spacer for skins that want sidebar and main to be the same height-->
	  <div class='clear'> </div>

	</div> <!-- end content-wrapper -->

	<div id='footer-wrapper'>
	  <b:section class='footer' id='footer'/>
	</div>

  </div></div> <!-- end outer-wrapper -->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Tentei algum coisa aqui, mas nem deu. Não peguei JavaScript ainda.

 

window.alert(document.write("<img src=\"http://pic1.piccdrop.com/i/2/1241711953.bmp\" alt=\"Bem vindo\" />"));

Tópico movido:

 

Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript / DHTML

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Cara, se você quer um Popup normal, uma outra janela do navegador que abre com a imagem saiba que muitos navegadores vão bloqueá-lo...

 

A solução é fazer com uma div...

 

Coloque essa div na página:

 

<div id="popup">
Aqui vai a imagem...
</div>

CSS:

 

#popup {
	 width: 400px; /*só um exemplo*/
	 height: 200px; /*só um exemplo*/
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 margin: -100 0 0 -200px /*primeiro, metade da altura da imagem, só que negativo, depois, metade da largura, negativo tbm, com dois zeros no meio*/
}

Dentro da tag HEAD coloque assim:

 

<script type="text/javascript">
window.onload = function(){
	setTimeout(function(){
		document.getElementById("popup").style.display = "none"; //esconder a div
	}, 10000);
}
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Se você quer um Popup tradicional, te aviso que a maioria dos navegadores atuais bloqueia...

 

A solução é usar uma div:

 

HTML:

<div id="popup">
<img src="....
</div>

CSS:

#popup {
	width: 400px; /*Só um exemplo*/
	heigth: 200px;
	position: absolute;
	margin: -100px 0 0 -200px /*metade da altura (com sinal negativo), dois 0's e metade da largura (negativo tbm)*/
}

Agora dentro da tag HEAD coloque:

<script type="text/javascript">
	window.onload = setTimeout(function(){
		var popup = document.getElementById("popup");
		popup.style.display = "none";
	}, 1000)
</script>

Att,

 

Rick

 

Edit: Desculpe o post duplicado... Apaga aew Thiago xD

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito