Início
Procurar
Últimas imagens
Registar
EntrarÚltimos assuntos
Parceiros
Codificando Layout Para Blog/Site
2 participantes
Página 1 de 1
Gostou Desse Topico ? Vote !
Codificando Layout Para Blog/Site
Adm_Murilo Qua Jul 27, 2011 12:54 pm
Ola Mais Uma Vez eu Murilo Estou Aqui Para Postar um Tutorial que Poucas das Pessoas Sabem, Muito Procuram no Google ou em Qualquer outro Site de Busca Mais Raramente Encontram o Que Querem, Bom Vamos lá. Estarei Ensinando Hoje Como Codificar um Layout, Mãos a Massa !
1° Passo; Crie 3 Imagens Para Seu Layout ( Cabeçalho, Conteúdo e Rodapé ) ...
2° Passo; Copie Este Codigo e Cole Na Parte Onde Você Edita as Tags de HTML de Seu Blog/Site:
Codigo:
3° Passo; Apos Copiar e Colar Este Codigo Seu Template/Layout Ficara com um Aspecto e Estilo Diferente,e em Seguida Abra este Codigo Todo com o DreamWeaver CS5 e Click na Opção Code em Vez de Desing e Encontre os Seguintes Textos:
- URL DE IMAGEM DE FUNDO FUNDO
- URL DE IMAGEM DE CABEÇALHO
- URL DE IMAGEM CONTEUDO
- URL DE IMAGEM DE RODAPE
4° Passo; Apos Encontrar Estes Textos Troque Eles Pelos Links Das Imagens Hospedadas em Um Servidor Imagens ( Recomendo o Tinypic ), e Pronto Basta Visualizar seu Layout/Template e Ele Estara Configurado com as Imagens que Você Mesmo Codificou
Simples Não ? Ate a Proxima
1° Passo; Crie 3 Imagens Para Seu Layout ( Cabeçalho, Conteúdo e Rodapé ) ...
2° Passo; Copie Este Codigo e Cole Na Parte Onde Você Edita as Tags de HTML de Seu Blog/Site:
Codigo:
- Código:
<?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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------------
Blogger Template Style Sheet
Name: Scribe
Date: 27 Feb 2004
Updated by: Blogger Team
------------------------------------------------------ */
/*
Variable definitions
====================
<Variable name="textColor" description="Text Color" type="color"
default="#29303b" value="#29303b">
<Variable name="postTitleColor" description="Post Title Color" type="color"
default="#1b0431" value="#1b0431">
<Variable name="linkColor" description="Link Color" type="color"
default="#473624" value="#473624">
<Variable name="visitedLinkColor" description="Visited Link Color" type="color"
default="#956839" value="#956839">
<Variable name="pageHeaderColor" description="Blog Title Color" type="color"
default="#612e00" value="#612e00">
<Variable name="blogDescriptionColor" description="Blog Description Color"
type="color" default="#29303B" value="#29303B">
<Variable name="sidebarHeaderColor" description="Sidebar Title Color"
type="color"
default="#211104" value="#211104">
<Variable name="bodyFont" description="Text Font"
type="font"
default="normal normal 100% Georgia, Times New Roman,Sans-Serif;" value="normal normal 100% Georgia, Times New Roman,Sans-Serif;">
<Variable name="headerFont" description="Sidebar Title Font"
type="font"
default="normal normal 150% Georgia, Times New Roman,sans-serif" value="normal normal 150% Georgia, Times New Roman,sans-serif">
<Variable name="pageTitleFont" description="Blog Title Font"
type="font"
default="normal normal 225% Georgia, Times New Roman,sans-serif" value="normal normal 225% Georgia, Times New Roman,sans-serif">
<Variable name="blogDescriptionFont" description="Blog Description Font"
type="font"
default="italic normal 100% Georgia, Times New Roman, sans-serif" value="italic normal 100% Georgia, Times New Roman, sans-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">
*/
Defaults
----------------------------------------------- */
body {
margin:0;
padding:0;
font-size: small;
text-align:center;
color:$textColor;
line-height:1.3em;
background:#483521 url("URL DE FUNDO") repeat;
}
blockquote {
font-style:italic;
padding:0 32px;
line-height:1.6;
margin-top:0;
margin-$endSide:0;
margin-bottom:.6em;
margin-$startSide:0;
}
p {
margin:0;
padding:0;
}
abbr, acronym {
cursor:help;
font-style:normal;
}
code {
font-size: 90%;
white-space:normal;
color:#666;
}
hr {display:none;}
img {border:0;}
/* Link styles */
a:link {
color:$linkColor;
text-decoration:underline;
}
a:visited {
color: $visitedLinkColor;
text-decoration:underline;
}
a:hover {
color: $visitedLinkColor;
text-decoration:underline;
}
a:active {
color: $visitedLinkColor;
}
/* Layout
----------------------------------------------- */
#outer-wrapper {
background-color:#473624;
border-$startSide:1px solid #332A24;
border-$endSide:1px solid #332A24;
width:700px;
margin:0px auto;
padding:8px;
text-align:center;
font: $bodyFont;
}
#main-top {
width:700px;
height:49px;
background:#FFF3DB url("URL DE TOPO") no-repeat top $startSide;
margin:0px;
padding:0px;
display:block;
}
#main-bot {
width:700px;
height:81px;
background:#FFF3DB url("URL DE RODAPE") no-repeat top $startSide;
margin:0;
padding:0;
display:block;
}
#wrap2 {
width:700px;
background:#FFF3DB url("URL DE CONTEUDO") repeat-y;
margin-top: -14px;
margin-$endSide: 0px;
margin-bottom: 0px;
margin-$startSide: 0px;
text-align:$startSide;
display:block;
}
#wrap3 {
padding:0 50px;
}
.Header {
}
h1 {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:6px;
padding-$startSide:0;
font: $pageTitleFont;
color: $pageHeaderColor;
}
h1 a:link {
text-decoration:none;
color: $pageHeaderColor;
}
h1 a:visited {
text-decoration:none;
}
h1 a:hover {
border:0;
text-decoration:none;
}
.Header .description {
margin:0;
padding:0;
line-height:1.5em;
color: $blogDescriptionColor;
font: $blogDescriptionFont;
}
#sidebar-wrapper {
clear:$startSide;
}
#main {
width:430px;
float:$endSide;
padding:8px 0;
margin:0;
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 {
width:150px;
float:$startSide;
padding:8px 0;
margin:0;
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 */
}
#footer {
clear:both;
background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat top $startSide;
padding-top:10px;
_padding-top:6px; /* IE Windows target */
}
#footer p {
line-height:1.5em;
font-size:75%;
}
/* Typography :: Main entry
----------------------------------------------- */
h2.date-header {
font-weight:normal;
text-transform:uppercase;
letter-spacing:.1em;
font-size:90%;
margin:0;
padding:0;
}
.post {
margin-top:8px;
margin-$endSide:0;
margin-bottom:24px;
margin-$startSide:0;
}
.post h3 {
font-weight:normal;
font-size:140%;
color:$postTitleColor;
margin:0;
padding:0;
}
.post h3 a {
color: $postTitleColor;
}
.post-body p {
line-height:1.5em;
margin-top:0;
margin-$endSide:0;
margin-bottom:.6em;
margin-$startSide:0;
}
.post-footer {
font-family: Verdana, sans-serif;
font-size:74%;
border-top:1px solid #BFB186;
padding-top:6px;
}
.post-footer a {
margin-$endSide: 6px;
}
.post ul {
margin:0;
padding:0;
}
.post li {
line-height:1.5em;
list-style:none;
background:url("http://www.blogblog.com/scribe/list_icon.gif") no-repeat $startSide .3em;
vertical-align:top;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: .6em;
padding-$startSide: 17px;
margin:0;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
/* Typography :: Sidebar
----------------------------------------------- */
.sidebar h2 {
margin:0;
padding:0;
color:$sidebarHeaderColor;
font: $headerFont;
}
.sidebar h2 img {
margin-bottom:-4px;
}
.sidebar .widget {
font-size:86%;
margin-top:6px;
margin-$endSide:0;
margin-bottom:12px;
margin-$startSide:0;
padding:0;
line-height: 1.4em;
}
.sidebar ul li {
list-style: none;
margin:0;
}
.sidebar ul {
margin-$startSide: 0;
padding-$startSide: 0;
}
/* Comments
----------------------------------------------- */
#comments {}
#comments h4 {
font-weight:normal;
font-size:120%;
color:#29303B;
margin:0;
padding:0;
}
#comments-block {
line-height:1.5em;
}
.comment-author {
background:url("http://www.blogblog.com/scribe/list_icon.gif") no-repeat 2px .35em;
margin:.5em 0 0;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:20px;
font-weight:bold;
}
.comment-body {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:20px;
}
.comment-body p {
font-size:100%;
margin-top:0;
margin-$endSide:0;
margin-bottom:.2em;
margin-$startSide:0;
}
.comment-footer {
color:#29303B;
font-size:74%;
margin:0 0 10px;
padding-top:0;
padding-$endSide:0;
padding-bottom:.75em;
padding-$startSide:20px;
}
.comment-footer a:link {
color:#473624;
text-decoration:underline;
}
.comment-footer a:visited {
color:#716E6C;
text-decoration:underline;
}
.comment-footer a:hover {
color:#956839;
text-decoration:underline;
}
.comment-footer a:active {
color:#956839;
text-decoration:none;
}
.deleted-comment {
font-style:italic;
color:gray;
}
/* Profile
----------------------------------------------- */
#main .profile-data {
display:inline;
}
.profile-datablock, .profile-textblock {
margin-top:0;
margin-$endSide:0;
margin-bottom:4px;
margin-$startSide:0;
}
.profile-data {
margin:0;
padding-top:0;
padding-$endSide:8px;
padding-bottom:0;
padding-$startSide:0;
text-transform:uppercase;
letter-spacing:.1em;
font-size:90%;
color:#211104;
}
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
border:1px solid #A2907D;
padding:2px;
}
#header .widget, #main .widget {
margin-bottom:12px;
padding-bottom:12px;
}
#header {
background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat bottom $startSide;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
margin-top: 0;
padding-top: 0;
}
body#layout #wrap2,
body#layout #wrap3 {
margin-top: 0;
}
body#layout #main-top {
display:none;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'>
<div id='main-top'/> <!-- placeholder for image -->
<div id='wrap2'><div id='wrap3'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Murilo Desing e Programação - O Futuro do Desing e Programação Esta Aqui !!! (Cabeçalho)' type='Header'/>
</b:section>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'>
<b:widget id='CustomSearch1' locked='false' title='Pesquisar Neste Blog' type='CustomSearch'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Menu Principal' type='HTML'/>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div></div>
<div id='main-bot'/> <!-- placeholder for image -->
</div>
</body>
</html>
3° Passo; Apos Copiar e Colar Este Codigo Seu Template/Layout Ficara com um Aspecto e Estilo Diferente,e em Seguida Abra este Codigo Todo com o DreamWeaver CS5 e Click na Opção Code em Vez de Desing e Encontre os Seguintes Textos:
- URL DE IMAGEM DE FUNDO FUNDO
- URL DE IMAGEM DE CABEÇALHO
- URL DE IMAGEM CONTEUDO
- URL DE IMAGEM DE RODAPE
4° Passo; Apos Encontrar Estes Textos Troque Eles Pelos Links Das Imagens Hospedadas em Um Servidor Imagens ( Recomendo o Tinypic ), e Pronto Basta Visualizar seu Layout/Template e Ele Estara Configurado com as Imagens que Você Mesmo Codificou
Simples Não ? Ate a Proxima
Adm_Murilo- Admin
- Mensagens : 9
Data de inscrição : 25/07/2011
Idade : 26
Localização : Promissão -
Ajuda ae
.:Seiken:. Ter Ago 07, 2012 6:50 pm
Ei que tipo de formato eu tenho que pega o link para coloca no lugar dos textos.
.:Seiken:.- Mensagens : 1
Data de inscrição : 07/08/2012
Facil
Adm_Murilo Sáb Dez 15, 2012 2:22 pm
.:Seiken:. escreveu:Ei que tipo de formato eu tenho que pega o link para coloca no lugar dos textos.
No Lugar dos Link Textos é Necessario Formato de Imagem, Porque Aonde Esta Escrito "Link Aqui" é Aonde Vai a Imagem de Acordo Com a Descrição Como Banner Conteudo e Rodape
Adm_Murilo- Admin
- Mensagens : 9
Data de inscrição : 25/07/2011
Idade : 26
Localização : Promissão -
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
» Criando Menu Lateral em CSS
» Criando Seu Proprio Trains Trainer...
» Cheat Engine 6.0 - Download.
» Criando Enquete com DreamWeaver CS5
» Criando Jogo de Vestir o Personagem no FLASH CS5
» Codigos Basicos Para Iniciantes