livro blogs

Just another WordPress.com site

Arquivos da Categoria: ♥ tutorial

"Como Fazer Um Template Ensinando detalhadamente"…???…

Deixe um comentário Publicado por aaamorrr em junho 25, 2010

“Como Fazer Um Template Ensinando detalhadamente”

…???…

Pesquisa

rebuscada

na net,

fonte + créditos,

merecidamente para:

http://forum.wmonline.com.br/

topic/66199-

tutorial-de-como-fazer-um-template/

” Tutorial De Como Fazer Um Template Ensinando detalhadamente”

” Um

template é composto por 2 partes…

a parte do DESIGN

e a

parte do

CODIGO…

vou começa ensinado a parte do design que é mais facil… “

” PARTE 1 – PARTE DO DESIGN”

“ A parte do design surgi a parti da sua criatividade e talento… para vc poder fazer um template com imagens legais é necessario q saiba mecher em alguns programas de design… como o Corel Draw, PhotoShop, Fireworks( o mais facil de mecher e o mais usado)”

…”mais pra vc poder aprender a fazer o template mais rapido e sem nenhuma necessidade de fikar se preocupando com imagens eu coloquei duas imagens na internet”

Imagem 01

” Essa Imagem ela é a figura principal, aquela imagem que fika bem em cima”

Imagem 02

” Essa Imagem será o fundo, todo template precisa de um fundo”...

” Certo agora que a parte do design está feita, vamos para a parte mais ” CHATA ” de um template, o CODIGO FONTE “

” PARTE 2 – CODIGO FONTE“

“ O Codigo fonte é a parte principal de um site, blog, etc… é não é dificil aprender o CODIGO FONTE, ele é chamado de HTML… todos devem ter ouvidos já… certo… vou tentar explicar rapido e facil de aprender… vamos lá “

” O codigo fonte é compostos por tags, são elas:

HTML,

HEAD,

TITLE

e

BODY,

todas as

tags

é

necessário

que se fechem,

ex: <HTML> xxxxxxxxx </HTML>

“HTML é a tag principal
HEAD é a tags que poucas vezes é usado… é mais usado em alguns SCRIPT
TITLE como o nome mesmo diz, é a parte que ficará o titulo do seu site

BODY é o corpo do site… nele que colocaremos todo o codigo…“

” ai galera eu vou colocar o codigo inteiro aqui e depois vou explicando parte por parte certo”…

” CODIGO INTEIRO “

<html>
<head>

                                           <!-- NÃO MUDE NADA ATÈ ALI EM BAIXO-->
             
<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color: FFFFFF;
scrollbar-highlight-color: 000000;
scrollbar-3dlight-color: 000000;
scrollbar-darkshadow-color: FFFFFF;
scrollbar-shadow-color: FFFFFF;
scrollbar-arrow-color: 000000;
scrollbar-track-color: 000000;
}
-->
</STYLE>FIM  DO SEU PERFIL -->
       
    
     </p>
        <br> <p align="center">Template by<br>
          So_Templates</p></td>
    </tr>
  </table>
</div>
<div id="Layer2" style="position:absolute; left:252px; top:610px; width:488px; height:46px; z-index:2"> <div align="center"> 

        </p>

        <br>
        <p align="center">


                  <!--INICIO -  CODIGO DA HOSPEDAGEM -->







                 <!-- COLOQUE O CODIGO DA HOSPEDAGEM AQUI -->
                           
        






                           <!--FIM -  CODIGO DA HOSPEDAGEM-->

<meta http-equiv="Content-Language" content="pt-br">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="Javascript1.2" src="http://blig.ig.com.br/js/funcoes_templates.js"></script>

<STYLE type="text/css">
P, body, td, tr, div {
        font-style: normal;
        font-weight: normal;
        font-size: 10px;
        color: #FFFFFF;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        line-height: 12px;
}
A, A:link{color:#FFFFFF;text-decoration:none}
A:visited{color:#FFFFFF}
A:active{color:#FFFFFF}
a:hover {text-decoration: none; filter: shadow(Color=#666666, strength=1);      height:0px;     cursor: hand;   font-family: Verdana, Arial, Helvetica, sans-serif;     color: #FFFFFF}
hr{width:100%;color:#4FC7FB;height:5;border:1px solid #1A348B; text-align:center>}
</STYLE>

                                                          <!-- FIM DA ONDE NÂO È PRA MUDAR -->
                
                                                      <title>"COLOQUE O SEU TITULO AQUI"</title>
</head>

                                              <!-- AQUI QUE FICA O ENDEREÇO DA FIGURA (ESSE É O FUNDO O SITE) -->
<body background="http://sr.kremer.vila.bol.com.br/gorillaz_02.gif">
<table width="669" border="0" cellspacing="0" cellpadding="0" height="0">
   
           <!--  AQUI FICA O ENDEREÇO DA FIGURA PRINCIPAL -->
  <img src="http://sr.kremer.vila.bol.com.br/gorillaz_01.gif"></table>


<!--              INICIO DO SEU PERFIL                    -->
<div id="Layer1" style="position:absolute; left:20px; top:567px; width:161px; height:68px; z-index:1"> 
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td valign="top"> <p align="left"><b><font color="#FFFFFF" size="2"> Perfil</font></b><br>
          <br>
          <b>Nome</b>: Seu Nome<br>
          <b>Idade</b>: Sua Idade<br>
          <b> Icq</b>: Seu Icq<b> <br>
          Email</b>: Seu Email<br>
          <strong>Signo</strong>: Seu Signo<br>
          <b>Coisas que adoro</b>: "Coisas que você adora fazer"<br>
          <b> Coisas que odeio</b>: "Coisas que você odeia"<br>
        <p></p>
        <p> <font color="#FFFFFF"><b><font size="2">Blogs Amigos</font></b></font><br>
          <br>
          <a href="http://www.so_templates.blig.com.br" target="_blank">Blog do 
          So_Templates </a><br>
        </p>
        <p> <b><font color="#FFFFFF" size="2">Links</font></b><br>
          <br>
          <a href="http://www.so_templates.blig.com.br" target="_blank"> So_Templates</a><br>
          <a href="http://www.blig.com.br">Blig</a></p>
        <p> <b><font color="#FFFFFF" size="2">Arquivo</font></b><br>
          <br>
                                   <!--
         

 


            


</body>
</html>

“ ai ta o codigo certo... agora vou explica as partes mais importantes…

tem uma parte que não é aconselhavel mudar pra quem esta aprendendo agora...”

no comeco aonde ta escrito “COLOQUE AQUI SEU TITULO” é aonde você vai colocar o titulo é claro, é dentro da tags <title> </title>

“depois vem aonde fika o endereço das imagens, pra vc poder colocar o fundo e a imagem principal, ela precisa estar na internet…

depois vem o PERFIL… ai todos sabem né… coloca o nome…

ai vem a parte importante de um blog… o codigo que mandara as mensagens para o template… cada lugar q vc coloca o seu blog tem um… eles nunca são iguais… existem o blogger, blig, uol, weblogger... no codigo la em cima tem uma parte q ta escrito “COLOQUE O CODIGO DA HOSPEDAGEM AQUI” então la que vc vai colocar o codigo de qual vc vai usar…
aqui vou colocar os codigos do blogger, blig e do weblogger certo”

BLOGGER

<!--INICIO -  tags do Blogger -->
        <blogger> 
                
              <p class="mensagem"><small><b><$BlogItemDateTime$><
/font></b></small><br><br>
                <font size="1"><$BlogItemBody$></font><br><br>
                <small>Enviado por <b><$BlogItemAuthorNickname$></b></small></font>
</p>
              </blogger> 
<br>
<br>
                <div align="center"><br>
    <br>
    <br>
    *Template Exclusivo do So_Templates</div>
</div>
  <tr>
    <td>

        <!--FIM -  tags do Blogger --></p>
        </a></td>
    </tr>
  </table>
</div>
<div id="Layer2" style="position:absolute; left:252px; top:610px; width:488px; height:46px; z-index:2"> 
  <div align="center">

Blig

<!--INICIO -  tags do Blogger -->
<p class="mensagem" align="justify">[#LISTAGEM#]</p>  
<br>
<br>
                <p> </p>
                <p><div align="center">*Template exclusivo do So_Template</font> </div></p>
              </div>

        <!--FIM -  tags do Blogger -->

…

Weblogger

<!--INICIO -  tags do Blogger -->
<weblogger> 
                 <font size="1">
         <weblogcabecalhodata> 
    </font> 
        <tr align="left"> 
          <td width="520">
            <p align="center">
            <#weblogDataCabecalho#>
            <br>
            <br>
            </p>
          </td>
        </tr>
        </weblogcabecalhodata> 
        <tr> 
          <td width="520"> 
            <p align="justify"><#weblogMensagem#></p>
            <p align="left">
            :: Enviado por
 <a href="mailto:<#weblogEmail#>">
            <#weblogApelido#>
            </a>
            - <#weblogHora#> ::<br>
            <a href="javascript:wb_comentario(<#weblogcodigo#>)">
            <#weblogTotalComentarios#> 
              comentários.</a>
            <br>
            </p>
          </td>
        </tr>
      </table>
    <p align="left">
      </weblogger> 
<br>
<br>
                <p> </p>
                <p>*Template exclusivo do So_Templates</font> </div></p>
              </div>

        <!--FIM -  tags do Blogger -->

…

Pessoal se alguns desses ter problema é pq eu nao testei certo… so testei o codigo do blogger… ele ta funcionando

” O Template ta pronto… espero ter ensinado… aqueles que tiverem alguma dúvida é só mandar um email para mim sr.kremer@bol.com.br

eu fiz alguns outros templates… mais eu ainda tenho q arrumar os codigos dele… mais se vcs quiserem ver ta ai… se alguem quiser usar alguns dos templates q esta ai é so mandar um email q eu passo o codigo por inteiro… certo”

” TEMPLATE 01 – GORILLAZ

TEMPLATE 02 – IRON MAIDEN

TEMPLATE 03 – DIABLO “

ipb.global.registerReputation( ‘rep_post_340503’, { app: ‘forums’, type: ‘pid’, typeid: ‘340503’ }, parseInt(‘0’) );

// Show multiquote for JS browsers $(‘multiq_340503’).show(); if( $(‘toggle_post_340503’) ) { $(‘toggle_post_340503’).show(); }

var linkwithin_site_id = 71522;

c o n t a t o

var linkwithin_site_id = 71522;

bb_bid = “119535”;bb_lang = “pt-BR”;bb_keywords = “”;bb_name =

var linkwithin_site_id = 71522;

♥ tutorial

menu com sprites

Deixe um comentário Publicado por aaamorrr em maio 14, 2010

Um menu com sprites

“Estas ementas são originais e muito prático de demonstração do uso de sprites para criar efeitos.”

“Sempre parte do mesmo, o menu é uma lista:”

class="navi1"> <div
  <ul>
    <li class="sm1"> <a href="URL_enlace1"> </ a> </ li>
    <li class="sm2"> <a href="URL_enlace2"> </ a> </ li>
    <li class="sm3"> <a href="URL_enlace3"> </ a> </ li>
    <li class="sm4"> <a href="URL_enlace4"> </ a> </ li>
    <li class="sm5"> <a href="URL_enlace5"> </ a> </ li>
  </ Ul>
</ Div>

.navi1 {width: 525px;position: relative;display: block;margin:0 auto;height: 72px;} .navi1 ul {float: none;list-style-image: none;list-style-type: none;margin: 3px 0;} .navi1 ul li {height: 72px;background-image: url(http://2.bp.blogspot.com/_hljKDuw-cxQ/S6EpnbFVXyI/AAAAAAAAPUI/CYHVh6VJ_nM/s00/tab-1.png);background-repeat: no-repeat;float: left;margin: 0px;position: absolute;padding-top: 5px;} .navi1 ul li a {width: 100%;height: 100%;display: block;} .navi1 ul li.sm1 {background-position: 0px 0px;width: 125px;left: 0px;} .navi1 ul li.sm2 {background-position: -125px 0px;width: 124px;left: 100px;} .navi1 ul li.sm3 {background-position: -249px 0px;width: 124px;left: 200px;} .navi1 ul li.sm4 {background-position: -373px 0px;width: 125px;left: 300px;} .navi1 ul li.sm5 {background-position: -498px 0px;width: 126px;left: 400px;} .navi1 ul li:hover {z-index: 1000;} .navi1 ul li.sm1:hover {background-position: 0px -75px;} .navi1 ul li.sm2:hover {background-position: -125px -75px;} .navi1 ul li.sm3:hover {background-position: -249px -75px;} .navi1 ul li.sm4:hover {background-position: -373px -75px;} .navi1 ul li.sm5:hover {background-position: -498px -75px;}

Mas, como visto, não há textos sobre as relações, porque o menu inteiro é uma imagem transparente que tem duas partes, o que precede é o padrão e vê abaixo é o que vemos quando o mouse está sobre

A chave é o CSS e usando aritmética para calcular cada movimento.

Não muito pode ser explicado pela questão, devemos olhar e tentar:

. Navi1 (
  display: block;
  height: 72px;
  margin: 0 auto;
  position: relative;
  width: 525px;
}
. Ul Navi1 (
  float: none;
  list-style-image: none;
  list-style-type: none;
  margin: 3px 0;
}
. Navi1 ul li (
  height: 72px;
  background-image: url (URL_imagen);
  background-repeat: no-repeat;
  float: left;
  margin: 0px;
  padding-top: 5px;
  position: absolute;
}
. Navi1 ul li a (
  display: block;
  height: 100%;
  width: 100%;
}
. Navi1 li.sm1 ul (background-position: 0px 0px; left: 0px; width: 125px;)
. Navi1 li.sm2 ul (background-position:-125px 0px; left: 100px; width: 124px;)
. Navi1 li.sm3 ul (background-position:-249px 0px; left: 200px; width: 124px;)
. Navi1 li.sm4 ul (background-position:-373px 0px; left: 300px; width: 125px;)
. Navi1 li.sm5 ul (background-position:-498px 0px; left: 400px; width: 126px;)
. Navi1 ul li: hover (z-index: 1000;)
. Navi1 li.sm1 UL: hover (background-position: 0px-75px;)
. Navi1 li.sm2 ul: hover (background-position:-125px-75px;)
. Navi1 li.sm3 ul: hover (background-position:-249px-75px;)
. Navi1 li.sm4 ul: hover (background-position:-373px-75px;)
. Navi1 li.sm5 ul: hover (background-position:-498px-75px;)

As outras variantes seguir a mesma abordagem e todos os exemplos podem ser baixados do site do autor.

.navi2 {width: 525px;position: relative;display: block;margin:0 auto;height: 72px;} .navi2 ul {float: none;list-style-image: none;list-style-type: none;margin: 3px 0;} .navi2 ul li {height: 72px;background-image: url(http://4.bp.blogspot.com/_hljKDuw-cxQ/S6EpnvPqT6I/AAAAAAAAPUQ/qPrSvswcENI/s00/tab-2.png);background-repeat: no-repeat;float: left;margin: 0px;position: absolute;padding-top: 5px;} .navi2 ul li a {width: 100%;height: 100%;display: block;} .navi2 ul li.sm1 {background-position: 0px 0px;width: 125px;left: 0px;} .navi2 ul li.sm2 {background-position: -125px 0px;width: 124px;left: 100px;} .navi2 ul li.sm3 {background-position: -249px 0px;width: 124px;left: 200px;} .navi2 ul li.sm4 {background-position: -373px 0px;width: 125px;left: 300px;} .navi2 ul li.sm5 {background-position: -498px 0px;width: 126px;left: 400px;} .navi2 ul li:hover {z-index: 1000;} .navi2 ul li.sm1:hover {background-position: 0px -75px;} .navi2 ul li.sm2:hover {background-position: -125px -75px;} .navi2 ul li.sm3:hover {background-position: -249px -75px;} .navi2 ul li.sm4:hover {background-position: -373px -75px;} .navi2 ul li.sm5:hover {background-position: -498px -75px;}

.navi3 {width: 525px;position: relative;display: block;margin:0 auto;height: 72px;} .navi3 ul {float: none;list-style-image: none;list-style-type: none;margin: 3px 0;} .navi3 ul li {height: 72px;background-image: url(http://3.bp.blogspot.com/_hljKDuw-cxQ/S6Epn9Nk9aI/AAAAAAAAPUY/Q4cXu22ZOS0/s00/tab-3.png);background-repeat: no-repeat;float: left;margin: 0px;position: absolute;padding-top: 5px;} .navi3 ul li a {width: 100%;height: 100%;display: block;} .navi3 ul li.sm1 {background-position: 0px 0px;width: 125px;left: 0px;} .navi3 ul li.sm2 {background-position: -125px 0px;width: 124px;left: 100px;} .navi3 ul li.sm3 {background-position: -249px 0px;width: 124px;left: 200px;} .navi3 ul li.sm4 {background-position: -373px 0px;width: 125px;left: 300px;} .navi3 ul li.sm5 {background-position: -498px 0px;width: 126px;left: 400px;} .navi3 ul li:hover{z-index: 1000;} .navi3 ul li.sm1:hover {background-position: 0px -72px;} .navi3 ul li.sm2:hover {background-position: -125px -72px;} .navi3 ul li.sm3:hover {background-position: -249px -72px;} .navi3 ul li.sm4:hover {background-position: -373px -72px;} .navi3 ul li.sm5:hover {background-position: -498px -72px;}

.navi4 {width: 525px;position: relative;display: block;margin:0 auto;height: 72px;} .navi4 ul {float: none;list-style-image: none;list-style-type: none;margin: 3px 0;} .navi4 ul li {height: 72px;background-image: url(http://1.bp.blogspot.com/_hljKDuw-cxQ/S6EpoJB1EzI/AAAAAAAAPUg/t4w6ABeVLjM/s00/tab-4.png);background-repeat: no-repeat;float: left;margin: 0px;position: absolute;padding-top: 5px;} .navi4 ul li a {width: 100%;height: 100%;display: block;} .navi4 ul li.sm1 {background-position: 0px 0px;width: 125px;left: 0px;} .navi4 ul li.sm2 {background-position: -125px 0px;width: 124px;left: 100px;} .navi4 ul li.sm3 {background-position: -249px 0px;width: 124px;left: 200px;} .navi4 ul li.sm4 {background-position: -373px 0px;width: 125px;left: 300px;} .navi4 ul li.sm5 {background-position: -498px 0px;width: 126px;left: 400px;} .navi4 ul li:hover {z-index: 1000;} .navi4 ul li.sm1:hover {background-position: 0px -5px;} .navi4 ul li.sm2:hover {background-position: -125px -5px;} .navi4 ul li.sm3:hover {background-position: -249px -5px;} .navi4 ul li.sm4:hover {background-position: -373px -5px;} .navi4 ul li.sm5:hover {background-position: -498px -5px;}

Referências:DeepuBalan

fonte e créditos:

http://vagabundia.blogspot.com

Marcador: ♥ …

http://www.mensagensdiversificadas.com.br ♥Postar um comentário♥ ♥Postar um comentário♥ ♥Mensagem do formulário de comentário♥ ♥O Senhor te trouxe até aqui, não por coindência, ele tem um propósito para você,♥ … e, Obrigada pela visita! …comentário!?! ♥deixe-os aqui!!!♥ Ao ler teu comentário, respondêlo-ei, volte para ver ♥ 🙂 ♥Teu link, deixe-o (os) aqui, que visito e outras pessoas também, que passarem aqui… ♥A Paz do Senhor!♥ >>>>>>>>>>>>>>>>>>>>>>>leia mais

♥ tutorial

	Mr WordPress em Hello world!
	edilene - amor em Saiba Como:…"Respon…
	edilene - amor em "A formação de acne é uma…
	edilene - amor em "A formação de acne é uma…
	edilene - amor em TENDINITE !…atenção…

livro blogs

Arquivos da Categoria: ♥ tutorial

"Como Fazer Um Template Ensinando detalhadamente"…???…

menu com sprites

Posts recentes

Comentários

Arquivos

Categorias

Meta