livro blogs

Just another WordPress.com site

Arquivos da Categoria: ♥ tutorial

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

“Como Fazer Um Template Ensinando detalhadamente”
…???…
Pesquisa 
rebuscada 
na net, 
e,

fonte + créditos, 
merecidamente para:

”  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 sitenele 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;

    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;

    Anúncios

    menu com sprites

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


    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: 


    Marcador: ♥ …

    Visualizar

    Visualizar

    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!♥ &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;leia mais