Mostrando postagens com marcador códigos. Mostrar todas as postagens
Mostrando postagens com marcador códigos. Mostrar todas as postagens

31/08/2018

Rodapé fixo na base do site




TEMA: Códigos | Rodapé
ARTIGO: Atualizado em 30/08/2018
VERSÃO: WA RC  |  WA 4

Olá galera do bem!! Vamos postar hoje uma gambiarra que funciona..hehehe

Hoje vou passar um truque que é muito útil para quem quer por  "Um rodapé fixo na base do site.". Este rodapé fica fixo enquanto o site rola por baixo dele.


Já vou falar um inconveniente que deve-se presta atenção:

Não crie botões redirecionando para  uma página na internet ou do próprio projeto, pois irá carregar dentro do rodapé; a não ser que defina para abri em uma nova guia.



Mãos a obra:

NO WEBACAPPELLA 4

O primeiro passo é se criar uma "página" no Webacappella com a mesma largura usada nas outras páginas. Dê um nome para essa página de rodape por exemplo. No caso deste post estamos mostrando somente para a versão desketop do site. Para quem está usando o WA4 criando sites nas versões desktop, tablet e celular terá que criar a página rodapé para cada versão. (Para saber mais sobre várias versões do site usando WA4 clique aqui)




Lembre-se de usar a mesma largura das outras páginas do seu projeto. No caso do exemplo 1024px. e a altura desejada de acordo com o tamanho do rodapé. Caso seu rodapé for ter menos de 100px, não se preocupe, configure com 100px pois o WebAcappella 4  não permite que seja menor do que isso.
Mas logo em frente vamos contornar esta situação.

Configure também a cor do fundo que você deseja para seu rodapé definindo a cor do plano de fundo da página.

No caso eu configure a cor preta de código #000000 no exemplo.



Dê um nome para sua página no browser. No caso do exemplo será rodape.html, marque para ignorar a página nos mecanismos de busca.




Agora preste atenção, se seu rodapé for ter a altura menor que 100px, Coloque uma marca na altura que você vai utilizar. Neste exemplo o meu rodapé vai ter 50px de altura. Veja na imagem abaixo como fiz a marcação:




Portanto se meu rodapé terá 50px de altura eu só vou trabalhar na parte superior da linha.

Fiz um exemplo de como editei meu rodapé bem simples para terem uma ideia, veja abaixo:





Agora copiem o código abaixo e cole no head das propriedades da página do seu rodapé.

<body style="overflow-y: hidden;overflow-x: hidden;">



Clique em OK


Agora vamos utilizar o seguinte código para configurar nosso rodapé. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">

#rodape /*rodapé do sistema */

{



background-color: códigocor;

width:100%;

text-align: center;

position:fixed;

bottom:0px;

left:0px;

}

</style>



<form id="form1" runat="server">

<div id="rodape">

<html>

<iframe src="urlrodape" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="altura" width="largura" allowfullscreen></iframe>

</html>


</div>






Você vai alterar somente os trechos de vermelho no código da seguinte maneira:

códigocor : Utilize o mesmo código da cor utilizada para o fundo da sua página definida como rodapé. No case deste exemplo foi #000000
largura: Utilize o mesmo valor que usou para largura da sua página rodapé. No caso do exemplo foi 1024

altura: Agora você vai usar o valor que você deseja para altura do rodapé, NÃO é o valor configurado para altura da sua página no caso do seu rodapé for menor que 100px. No caso deste exemplo é 50px.

urlrodape: Substitua pela url da página do seu rodapé (Ex: http://www.seudominio.com.br/rodape.html -> se a página se chamar rodape)


O código do exemplo ficou assim:


<style type="text/css">
#rodape /*rodapé do sistema */
{
background-color: #000000;
width:100%;
text-align: center;
position:fixed;
bottom:0px;
left:0px;
}
</style>
<form id="form1" runat="server">
<div id="rodape">
<html>
<iframe src="http://www.webacappellashow.com.br/wasevents/wa4/rodape.html" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="50px" width="100%" allowfullscreen></iframe>
</html>
</div>


Agora crie uma matriz, pode nomear como "rodapé" para facilitar depois. E lá você usa a opção do Webacappella INSERIR>> CÓDIGO HTML e insira seu código.



Agora nas páginas que deseja utilizar o rodapé fixo basta ir nas propriedades e Escolher o rodapé  que criou como matriz.




Clique abaixo para ver um exemplo on line:




NO WEBACAPPELLA RC (WA5 - RESPONSIVE)

O primeiro passo é se criar uma "página" no Webacappella . Dê um nome para essa página de rodape por exemplo.






Configure também a cor do fundo que você deseja para seu rodapé definindo a cor do plano de fundo da página.

No caso eu configure a cor preta de código #000000 no exemplo.





Dê um nome para sua página no browser. No caso do exemplo será rodape.html, marque para ignorar a página nos mecanismos de busca.





Agora copiem o código abaixo e cole no head das propriedades da página do seu rodapé.

<body style="overflow-y: hidden;overflow-x: hidden;">




Agora vamos utilizar o seguinte código para configurar nosso rodapé. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">
#rodape /*rodapé do sistema */

{
background-color: códigocor;
width:100%;
text-align: center;
position:fixed;
bottom:0px;
left:0px;
}
</style>
<form id="form1" runat="server">
<div id="rodape">
<html>
<iframe src="urlrodape" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="altura" width="100%" allowfullscreen></iframe>
</html>
</div>



Você vai alterar somente os trechos de vermelho no código da seguinte maneira:

códigocor : Utilize o mesmo código da cor utilizada para o fundo da sua página definida como rodapé. No case deste exemplo foi #000000


altura: Agora você vai usar o valor que você deseja para altura do rodapé,  Já no WARC você terá que ir ajustando o valor da altura ao publicar o site. Tipo, você ajusta, publica e ve se ficou bom, e assim por diante.

urlrodape: Substitua pela url da página do seu rodapé (Ex: http://www.seudominio.com.br/rodape.html -> se a página se chamar rodape)





O código do exemplo ficou assim:


<style type="text/css">
#rodape /*rodapé do sistema */
{
background-color: #000000;
width:100%;
text-align: center;
position:fixed;
bottom:0px;
left:0px;
}
</style>
<form id="form1" runat="server">
<div id="rodape">
<html>
<iframe src="http://www.webacappellashow.com.br/wasevents/warc/rodape.html" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" height="50" width="100%" allowfullscreen></iframe>
</html>
</div>


Agora crie uma subpage, pode nomear como "rodapé" para facilitar depois. E lá você usa a opção do Webacappella INSERIR>> CÓDIGO HTML e insira seu código.



Agora nas páginas que deseja utilizar o rodapé fixo basta inserir um box no fim da página e adicionar uma subpage que obviamente será a que você fez para o rodapé.



Maravilha. agora só publicar.


Clique abaixo para ver um exemplo on line:





12/11/2017

Inserindo efeito neve no site Webacappella



TEMA: Plugins e códigos
ARTIGO: Novo
VERSÃO: WA RC  

Está chegando o Natal, e muitos gostam de inserir alguns "flus flus" no webiste. 

E um ótimo e sugerido efeito é inserir um efeito de neve caindo sobre o website.


Pois é muito simples, veja só:


A primeira coisa a fazer é baixar um arquivo js neste link: https://webacappellashow.com.br/loja/home/20-efeito-neve-site-webacppella.html

Depois faça upload para um local na hospedagem do site o qual vai inserir o efeito

Agora basta incluir o código abaixo no HEAD do website (caso deseje que apareça no site todo) ou apenas no Head da página que deseja o efeito.

CÓDIGO
<script src="URL DO LOCAL DO ARQUIVO">
</script>

Substitua o texto em vermelho pela url onde foi inserido o código.

Exemplo: 

<script src="http://www.webacappellashow.com.br/neve/CodigoNeve.js">
</script>


Para ver on line clique aqui


Muito simples não é mesmo?


Os créditos desta postagem vai para Maiochristopher

17/08/2016

Coloque a data atual no seu site webcappella





TEMA: Código
ARTIGO: Novo
VERSÃO:  WA4 | WA5 
Fala galera, nuuuu, hoje foi tenso. Não sei o que comi, mas tava que nem pato hihihi


Para não passar batido, vou passar um código que muitos devem conhecer, mas muitos também não. Digo pois nem todo mundo é um profissional. Muitos até estão começando na área e aprendendo. 

Este código eu gosto de usar por exemplo em algum site em que possui uma calendário de eventos, ai e posto de uma maneira que fica bacana.. Assim o visitante do site já diante da agenda, no mesmo foco dos olhos ele já se atenta pra data atual, sem a necessidade de  desfiar o olhar para o relógio do Windows.

CÓDIGO

<center> 
<script language="JavaScript">
document.write("<font color='#fff' size='2' face='arial'>")
var mydate=new Date()
var year=mydate.getYear()
if (year<2000)
year += (year < 1900) ? 1900 : 0
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domingo","Segunda-feira","Terça-feira","Quarta-feira","Quinta-feira","Sexta-feira","Sábado")
var montharray=new Array(" de Janeiro de "," de Fevereiro de "," de Março de ","de Abril de ","de Maio de ","de Junho de","de Julho de ","de Agosto de ","de Setembro de "," de Outubro de "," de Novembro de "," de Dezembro de ")
document.write(" "+dayarray[day]+", "+daym+" "+montharray[month]+year+" ")
document.write("</b></i></font>")
 </script>

PERSONALIZAÇÃO

<center> ALTERE CASO QUEIRA A DATA DO LADO DIREITO,CENTRALIZADO OU ESQUERDO DA ÁREA DE IMPLEMENTAÇÃO DO CÓDIGO NO WA

#fff'  ALTERE PELA CÓDIGO DA COR DESEJADA 

2 ALTERE PELO TAMANHO DESEJADO

arial ALTERE PELA FONTE DESEJADA, LEMBRE QUE SE FOR ESCOLHER UM FONTE QUE NÃO É CONSIDERADA FONTE DE SISTEMA, A MESMA DEVE SER CONFIGURADA NA SUA HOSPEDAGEM 


IMPLEMENTAÇÃO NO WA4

Selecione a opção INSERIR>>CÓDIGO HTML, adicione o código no útlimo campo, marque Ativar pré visualização para poder ter a referência no site.
Posiceione onde desejar.


Para ver on line clique aqui

IMPLEMENTAÇÃO NO WA RC

Insira o box onde será inserido o código: Clique no ícon HTML do menu, clique para abri a edição , adicione o código no  campo,
Posiceione onde desejar.




Para ver on line clique aqui



24/08/2015

Fundo tela inteira usando somente códigos





Olá turma do bem,

Essa é hoje é rapidinha, pois é colocar um fundo tela inteira sem necessidade de Plugins. 


A vantagem de usar códigos é que você pode adaptar com um sistema ADM para que seu cliente possa ele próprio alterar a imagem quando quiser. Eu por exemplo uso o M7ADM com o módulo Upload de Arquivos. Daí, oriento o cliente em manter o mesmo nome e extensão do arquivo.

CÓDIGO A SER UTILIZADO:


<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="pt"><!--<![endif]-->
<style type="text/css">
#full-screen-background-image {
  z-index: -999;
  min-height: 386px;
  min-width: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
  <img  src="IMAGEMDOFUNDO.JPG" id="full-screen-background-image" />



APLICANDO NO WA 4

UTILIZANDO COM FUNDO ÚNICO EM TODO SITE
No WebAcappella vai em SITE>>PROPRIEDADES DO SITE clique
na catraca e cole o código acima no campo do head

ALTERE O TRECHO IMAGEMDOFUNDO.JPG pelo nome da sua imagem
que deve estar postada no mesmo diretório do site




** Caso deseja um fundo para cada página diferente basta em vez de colocar o código nas propriedades do site,  faça o mesmo inserido o código nas propriedades da página de cada página alterando o trecho IMAGEMDOFUNDO.JPG pelo nome da imagem a ser utilizada para cada página.

Nada de novo, só para alimentar nossa biblioteca mesmo. 

Demonstração WA 4






APLICANDO NO WA RC

UTILIZANDO COM FUNDO ÚNICO EM TODO SITE

No WebAcappella RC, na tela principal das configurações
do site clique em WEBSITE SETTINGS e clique em
EDIT HTML CODE cole o código acima no campo do head
ALTERE O TRECHO IMAGEMDOFUNDO.JPG pelo nome da sua
imagem que deve estar postada no mesmo diretório do site




** Caso deseja um fundo para cada página diferente basta em vez de colocar o código nas propriedades
 do site,  faça o mesmo inserido o código nas propriedades da página de cada página alterando
 o trecho IMAGEMDOFUNDO.JPG pelo nome da imagem a ser utilizada para cada página.

Nada de novo, só para alimentar nossa biblioteca mesmo. 

Demonstração WA RC

04/07/2015

Webmail da Roundcube diretamente no site Webacappela





Olá galera do bem,

Há um tempo atrás um colega  necessitava colocar uma forma de acessar o webmail da Roundcube diretamente do site. Pude prestar este auxílio e estou então postando aqui para enriquecer nossa biblioteca WebAcappella

No exemplo vocês não conseguirão acessar pois não sabem a senha da conta de e-mail. Mas já dá pra ter uma noção

TEMA: E-MAIL | CÓDIGOS
ARTIGO: Revisado e melhorado
VERSÃO:  WA  4  e WA RC



Vamos lá:


Vale a pena citar que acessar o webmail é algo que o internauta(visitante do site) não precisa ter acesso. Por isso eu acho interessante criar uma página que seja restrita para esta funcionalidade.

Só como exemplo não vou utilizar esta parte restrita para todos poderem visualizar.

Em outra postagem estarei explicando de como criar um sistema de login bacana para se colocar no site WebAcappella.



Para esta funcionalidade utilizaremos o código abaixo:



<form action="http://endereço_do_site:PORTA/login/" method="POST" target="_blank">
<input type="hidden" name="login_theme" value="cpanel">
<input type="hidden" name="goto_uri" value="/3rdparty/roundcube/index.php">
<input type="hidden" name="login_theme" value="cpanel">
E-mail:
<input type="text" name="user" size="TAMANHOCAMPOEMAIL" alt="E-Mail" value="@domínio" onblur="if(this.value=='') this.value='E-Mail';" onfocus="if(this.value=='E-Mail') this.value='@endereço_do_site';">
Senha:
<input type="password" name="pass" size="TAMANHOCAMPOSENHA" alt="" value="" onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';">
<button value="Login" name="Submit" type="submit" title="Login">Acessar</button>
</form>



Entendendo o código e fazendo alterações:


Observe as áreas do código em vermelho, estas serão substituídas por você.

endereço_do_site  -  Altere com o endereço do domínio referente ao e-mail , ex:Para o e-mail  contato@webacappellashow.com.br  usarei www.webacappellashow.com.br

PORTA : Substitua pela porta que acessa seu webmail. para descobrir basta acessar o webmail pelo cpanel da hospedagem. Assim você poderá saber a porta a ser utilizada.



E-mail: : Substitua com o texto que queira  que apareça na frente do campo do e-mail

TAMANHOCAMPOEMAIL : Informe o tamanho que você quer o campo onde será digitado o e-mail 

@domínio : Você preenche com uma máscara que irá aparecer no campo do e-mail antes que seja digitado algo ou pode deixar sem nada para que não apareça nada

SenhaSubstitua com o texto que queira  que apareça na frente do campo da senha

TAMANHOCAMPOSENHAInforme o tamanho que você quer o campo onde será digitado a senha

Acessar: Substitua com o texto que você quer que apareça dentro do botão  


O meu código alterado para este exemplo ficou assim:


<form action="http://www.webacappellashow.com.br:2095/login/" method="POST" target="_blank">
<input type="hidden" name="login_theme" value="cpanel">
<input type="hidden" name="goto_uri" value="/3rdparty/roundcube/index.php">
<input type="hidden" name="login_theme" value="cpanel">
Digite seu email:
<input type="text" name="user" size="40" alt="E-mail" value=@webacappellashow.com.br onblur="if(this.value=='') this.value='E-Mail';" onfocus="if(this.value=='E-Mail') this.value='@ed';">
Senha:
<input type="password" name="pass" size="10" alt="" value="" onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';">
<button value="Login" name="Submit" type="submit" title="Login">Enviar</button>
</form>


IMPLEMENTANDO NO WEBACAPPELLA:


No WA RC




Para ver o resultado clique aqui:




No WA 4


Agora no WebAcappella 4 utilize a opção INSERIR>>CÓDIGO HTML e insira o seu código já com suas alterações.



Para ver o resultado clique aqui:



Em funcionamento se as credenciais estiverem certas vai cair direto para o webmail do Roundcube.



Caso contrário vai ser redirecionado para a tela padrão do webmail do domínio.







É isso aê galera do bem..abração.



Related Posts Plugin for WordPress, Blogger...