Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

[TUTORIAL] Páginas HTML personalizadas

Fórum dos Fóruns :: Forumeiros e você ::   :: Tutoriais, dicas e astúcias :: Diversos

Ir para baixo

[TUTORIAL] Páginas HTML personalizadas Empty [TUTORIAL] Páginas HTML personalizadas

Mensagem por Thoth 27.09.14 21:24


[TUTORIAL] Páginas HTML personalizadas Html
Página HTML personalizada

Vamos disponibilizar neste tutorial um código HTML personalizado no modelo oficializado para o Fórum dos Fóruns. Esta página HTML possui também um slide integrado na qual você poderá usar para publicar as suas novidades.


1º - Aplicação do HTML:
Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML
(carregue na imagem para aumentar)
[TUTORIAL] Páginas HTML personalizadas Untitl13
[TUTORIAL] Páginas HTML personalizadas 110111Seta Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
[TUTORIAL] Páginas HTML personalizadas 110210Seta Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente.
[TUTORIAL] Páginas HTML personalizadas 110310Seta Usar esta página como página inicial? - Esta também deverá estar marcada como não, apesar de que não influencia em nada o código.
[TUTORIAL] Páginas HTML personalizadas 110410Seta Código HTML - Coloque aqui o código que trabalhamos no item anterior.
Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.

(carregue na imagem para aumentar)
[TUTORIAL] Páginas HTML personalizadas Untitl14

Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição).

(carregue na imagem para aumentar)
[TUTORIAL] Páginas HTML personalizadas Untitl15


2º - Aplicação do código:
Em seguida, cole o seguinte código:
Código:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
<!----------------------------------------------- Créditos: -----------------------------------------------!>
Está página foi desenvolvida por BrunoH.
Nome: Fórum dos Fóruns - Forumeiros
Autor: BrunoH.
Perfil: http://ajuda.forumeiros.com/u47318
Link: https://www.facebook.com/brunohenriqueweb.com.br
Data: 12/03/2014
<!-------------------------------- Não retire os créditos - @copyright 2013 -------------------------------!>


hr {
border-color: #fff;
}
#top5 {
display:none;
position: fixed;
left: 86.6%;
top: 97%;
color: #73AAFD;
font-family: "Courier New", Courier, monospace font-size:14px;
font-weight: bold;
text-shadow: black 0.15em 0.15em 0.2em;
opacity: 0.7;
-webkit-transition-duration: 1s;
background: rgb(27, 27, 27);
width: 20%;
-webkit-box-shadow: rgb(255, 255, 255) 1px 1px 6px;
}
#top5:hover {
height: 80%;
top: 47%;
opacity: 1;
}
#cssmenu {
height: 49px;
background: transparent;
margin-left: 50%;
margin-top: -7%;
width: 50%!important;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
background: transparent;
color: #fff;
display: inline-block;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
line-height: 35px;
padding: 0 20px;
text-decoration: none;
text-transform: uppercase;
border-radius: 3px;
margin-left: 5px;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
}
#cssmenu > ul > li:hover > a {
background: rgba(0, 0, 0, 0.1);
color: white;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.15) 0px 1px 3px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px, rgba(255, 255, 255, 0.1) 0px 1px 0px;
box-shadow: inset rgba(0, 0, 0, 0.15) 0px 1px 3px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px, rgba(255, 255, 255, 0.1) 0px 1px 0px;
}
#cssmenu a[href="/"] {
background: rgba(0, 0, 0, 0.2);
color: white;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 3px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.2) 0px 1px 0px;
box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 3px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.2) 0px 1px 0px;
}
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}
.menu {
width: 87.2%;
background: transparent;
margin-top: -4%;
position: absolute;
margin-left: 5%;
padding: 10px;
-webkit-border-radius: 7px 7px 0px 0;
color:#fff;
}
.menu a{
transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-webkit-moz-trasition:all linear 0.5s;
font-weight:bold;
color:#999999;
margin-right:35px;
text-decoration:none;
}
#tabela1 {
display: table;
background: #fff;
width: 90%;
height: 500px;
float: center;
border: 1px solid black;
margin-top: 165px;
border: 1px solid rgba(0, 0, 0, 0.35);
-webkit-box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;

}
#tabela1 a{
text-decoration:none;
color:#000;
}
body{
background: url(http://2img.net/i/fa/fdf3/bg.png);
background-attachment: fixed;
color: #5a5a5a;
font: normal 11px tahoma,helvetica,arial,sans-serif;
padding-bottom: 20px;
}
.conectado {
margin-top: -2.9%;
margin-left: 6%;
position: absolute;
background: rgba(0, 0, 0, 0.18);
height: 37px;
box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
-webkit-box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
border: 1px solid rgba(0, 0, 0, 0.35);
width: 87%;
}
.botao {
font-weight: bold;
color: white;
float: left;
padding: 0 13px 9px 13px;
line-height: 36px;
outline: none;
height: 26px;
text-decoration: none;
}
.botao a {
color: white;
text-decoration: none;
}
.botao:hover {
background: rgba(0, 0, 0, 0.1);
}
#brunoh {
background-color: #fbfbfb;
border: 1px solid rgb(231, 231, 231);
padding: 6px;
}
#footer {
font-size: 11px;
height: 23px;
margin: -12px;
padding: 8px;
margin-left: -5.8%;
margin-top: 1%;
width: 110.1%;
position: relative;
border-top: 1px solid #D8D8D8;
text-shadow: rgba(255, 255, 255, 0.8) 0px 1px 0px;
background: #EEE url('http://www.ipbforumskins.com/skindemo/public/style_images/overlayr34x/highlight_faint.png') repeat-x 0 0;
}
.redesociais {
position: absolute;
margin-top: -2.8%;
margin-left: 85%;
}
</style>

<link rel="shortcut icon" type="image/x-icon" href="http://cdn1.iconfinder.com/data/icons/crystalproject/128x128/devices/Globe2.png" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página Forumeiros personalizada</title>
</head>
<body>
<center><img src="http://i.imgur.com/DrTHtX5.png" style=" position: absolute; left: -157px; top: 37px;padding: 0px;"></center><div class="conectado"><div class="botao"><a href='Link1'><span>Menu1</span></a></div><div class="botao"><a href="Link2">Menu2</a></div><div class="botao"><a href="Link3">Menu3</a></div><div class="botao"><a href="Link4">Menu4</a></div>
</div>
<center><div class="menu"><div id='cssmenu'>
<ul>
  <li class='has-sub'><a href='/forum'><span>Fórum</span></a></li>
  <li class='active'><a href='/'><span>Home</span></a></li>
  <li class='has-sub'><a href='/portal'><span>Portal</span></a></li>
  <li class='last'><a href='/f60-'><span>Anúncios</span></a></li>
</ul>
</div></div>
<div class="redesociais"><a href="https://www.facebook.com/forumeirospt"><img src="http://i.imgur.com/UklM5rn.png" alt="Página Facebook" title="Página Facebook" style="height: 39px;"></a><a href="http://www.youtube.com/tvforumeiros"><img src="http://i.imgur.com/mTsSggT.png" alt="Youtube" title="Youtube" style="height: 39px;"></a></div>
<table id="tabela1">
<td><center><div style="border-radius:5px; background:transparent; margin-bottom:10px;width:90%; height:100%;margin-top: -1%;">
<br>
<! Slide Show !>
<style>.picshow{z-index:444;position:relative;background-color:#ffffff;width:100%;height:135px}.picshow_main{position:relative;width:105.6%;height:135px}.picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,motion=forward);width:105.7%;height:135px;margin-left: -5.5%;}.picshow_change{position:absolute;text-align:left;bottom:0px;height:30px;right:5px;left:60px}.picshow_change img{width:15px;height:15px}.picshow_change a{border:1px solid;display:block;float:left;margin-right:5px;-display:inline}a.axx{border-color:#555}a.axx:hover{border-color:#000}a.axx img{filter:alpha(opacity=40);opacity:0.4;-moz-opacity:0.4}a.axx:hover img{filter:alpha(opacity=100);opacity:1.0;-moz-opacity:1.0}a.bxx{border-color:#000}a.bxx:hover{border-color:#000}img{border:0px}</style>
<script>var counts = 5;
 img1 = new Image();
 img1.src = 'http://i.imgur.com/atkb0Ht.png';
 img2 = new Image();
 img2.src = 'http://i.imgur.com/jipwiLZ.png';
 img3 = new Image();
 img3.src = 'http://i.imgur.com/7HRdhVb.png';
 img4 = new Image();
 img4.src = 'http://i.imgur.com/6RTHtdV.png';
 img5 = new Image();
 img5.src = 'http://i.imgur.com/A5mJEe2.png';
 var smallImg = new Array();
 smallImg[0] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton1.gif';
 smallImg[1] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton2.gif';
 smallImg[2] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton3.gif';
 smallImg[3] = 'http://i.imgur.com/j9q7B.png';
 smallImg[4] = 'http://i.imgur.com/mzFKQ.png';

 url1 = 'http://skygames.sampforum.net/';
 url2 = 'http://skygames.sampforum.net/';
 url3 = 'http://skygames.sampforum.net/';
 url4 = 'http://skygames.sampforum.net/ ';
 url5 = 'http://skygames.sampforum.net/';
 alt1 = new Image();
 alt1.alt = 'Sky Games!';
 alt2 = new Image();
 alt2.alt = 'Sky Games - RPG';
 alt3 = new Image();
 alt3.alt = 'Sky Games!';
 alt4 = new Image();
 alt4.alt = 'Sky Games!';
 alt5 = new Image();
 alt5.alt = 'Sky Games!';
 var nn = 1;
 var key = 0;
 function change_img() {
 if (key == 0) {
 key = 1;
 } else if (document.all) {
 document.getElementById("pic").filters[0].Apply();
 document.getElementById("pic").filters[0].Play(duration = 2);
 }
 eval('document.getElementById("pic").src=img' + nn + '.src');
 eval('document.getElementById("url_theme").href=url' + nn);
 eval('document.getElementById("pic").alt=alt' + nn + '.alt');
 if (nn == 1) {
 document.getElementById("url_theme").target = "_blank";
 document.getElementById("url_theme").style.cursor = "pointer";
 } else {
 document.getElementById("url_theme").target = "_blank"
 document.getElementById("url_theme").style.cursor = "pointer"
 }
 for ( var i = 1; i <= counts; i++) {
 document.getElementById("xxjdjj" + i).className = 'axx';
 }
 document.getElementById("xxjdjj" + nn).className = 'bxx';
 nn++;
 if (nn > counts) {
 nn = 1;
 }
 tt = setTimeout('change_img()', 4000);
 }
 function changeimg(n) {
 nn = n;
 window.clearInterval(tt);
 change_img();
 }
 function ImageShow() {
 document.write('<div class="picshow_main">');
 document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
 document.write('<div class="picshow_change">');
 for ( var i = 0; i < counts; i++) {
 document.write('<a href="javascript:changeimg(' + (i + 1)
 + ');" id="xxjdjj' + (i + 1)
 + '" class="axx" target="_self"><img src="' + smallImg[i]
 + '"></a>');
 }
 document.write('</div></div>');
 change_img();
 }</script><script>ImageShow()</script>

<! Fim Slide Show !>
<center><div>
<br>
<span style="font-family: Arial, Helvetica, sans-serif;">O Fórum dos Fóruns é um espaço de contato pessoal entre Forumeiros e você, onde encontrará todo o tipo de informações: o nosso regulamento, as perguntas mais frequentes, as atualizações constantes e as principais dicas para administrar e personalizar o seu fórum Forumeiros.</span>
<br>
<hr>
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.youtube.com/v/Md4-0n7irLQ" width="425" height="350" type="application/x-shockwave-flash" wmode="transparent" quality="high" scale="exactfit"></embed>
<hr>
<table width="90%" style="padding: 3px; font-size: 0.8em; margin-bottom:0px; padding-bottom: 0px;margin-top: 15px;font-family: Verdana,Arial,Helvetica,sans-serif;"><tr valign="top"><td>
<b>Regulamentos e afins:</b>
<br><a href="/link">Equipe Forumeiros</a>
<br><a href="/link">Regras do fórum</a>
<br><a href="/link">Como entrar na equipe</a>
</td><td><strong> Seções do fórum:</strong><br><a href="link">  Ajuda e suporte</a><br><a href="link">  Serviços aos usuários</a><br><a href="/link">  Forumeiros e você</a></td>


<td><strong> Miscelânea:</strong><br><a href="/link">  Sugestões em geral</a><br><a href="/link">  Tutoriais em Geral</a><br><a href="/link"> Discussões gerais</a></td>
</tr></table>
</center>
<br>
<div id="footer">Todos os direitos autorais reservados ®️ Fórum dos Fóruns - Forumeiros</div>
</div></center>
</table></center>

</body>
</html>
<a href="http://www.forumeiros.com" target="_blank" style="display: none;"> Fórumeiros</a>

Algumas observações antes de seguir para as edições. Para encontrar as imagens correspondentes ao slide, basta pressionar o Ctrl + F e pesquisar pelas seguintes imagens:

[TUTORIAL] Páginas HTML personalizadas Step-2-creation-forum Atenção:
Para realizar as edições na página, aconselhamos que não remova os créditos internos do código, pois, mesmo deixando-os este não será visível na página e não atrapará em nenhuma função adicional ou atual da página. Ao mesmo tempo, informamos que você poderá obter ajuda adicional com a edição acessando o tutorial Estrutura duma página HTML disponível neste fórum.


  • Resultado
    [TUTORIAL] Páginas HTML personalizadas Result23




© Fórum dos Fóruns & BrunoH.


[TUTORIAL] Páginas HTML personalizadas Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Páginas HTML personalizadas
Thoth
Thoth
Hiper Membro

Membro desde : 01/11/2011
Mensagens : 2197
Pontos : 2820

https://testefdd.forumeiros.com/ https://www.youtube.com/@LMCanalTech/featured

Ir para o topo Ir para baixo

Ir para o topo

Fórum dos Fóruns :: Forumeiros e você ::   :: Tutoriais, dicas e astúcias :: Diversos

 
Permissões neste sub-fórum
Não podes responder a tópicos