Designer of Club Penguin: 2013

Olá Penguins Designers,

Hoje eu Venho aqui para ensinar a vocês, como fazer um template! é muito avançado...Porem quero ensinar a vocês isso. Primeiro pegue esse codigo:

<?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 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'>
<script src='http://code.jquery.com/jquery-1.4.4.min.js' type='text/javascript'/>
<head>
<link href='.' rel='shortcut icon'/>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<b:skin><![CDATA[/*
/*
-----------------------------------------------
Nome: Nome do Blog
Layout por Seu Nome
Editado por Seu nome
Contribuições para Seu nome
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="cordasidebar" description="Cor do Background da Sidebar"
type="color" default="#1f9ddf" value="#1f9ddf">
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#279cd8" value="#279cd8">
<Variable name="textcolor" description="Text Color"
type="color" default="#000000" value="#000000">
<Variable name="linkcolor" description="Link Color"
type="color" default="#000000" value="#000000">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#000000" value="#000000">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#000000" value="#000000">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#16110D" value="#16110D">
<Variable name="bordercolor" description="Border Color"
type="color" default="#FDFDFD" value="#FDFDFD">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#E7B99A" value="#E7B99A">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#000000" value="#000000">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#1f9ddf" value="#1f9ddf">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% 'Palatino Linotype',Trebuchet,Verdana,Sans-serif" value="normal normal 100% IM Fell Double Pica SC">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal bold 0% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal bold 0% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 0% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 0% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
*/
body {
background: #FFFFFF url(LINK DO FUNDO DO BLOG) fixed;
;
color:#000000;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: lcenter;
}
a:link {
color:#000000;
text-decoration:none;
}
a:visited {
color:#000000;0
text-decoration:none;
}
a:hover {
color:#000000;
text-decoration:underline;
}
a {
outline: none;
}
a img {
border-width:0;
}
#navbar #Navbar1 iframe{
display:none;
visibility:none;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:982px;
height:400px;
margin:0 auto 0px;
border-bottom: 0px solid #63e812;
}
#header {
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
width:982px;
height:400px;
background: url() bottom center no-repeat;
text-align: ;
color: transparent;
}
#header h1 {
margin:0px auto 0px;
padding: 0px 0px 0px 0px;
line-height:1.2em;
text-transform:capitalize;
letter-spacing:.2em;
font: normal normal 0% Trebuchet, Trebuchet MS, Arial, sans-serif;
}
#header a {
color:#ffffff;
text-decoration:none;
}
#header a:hover {
color:#ffffff;
}
#header .description {
margin:0px auto 0px;
padding: 0px 0px 0px 30px;
max-width:895px;
text-transform:capitalize;
letter-spacing:.2em;
line-height: 1.2em;
font: 0px;
color: #e6e6e6;
}
#header-center{
margin: 0px;
border-bottom: 0px solid #bf0e0e;
text-align: center;
float:center;
width:100%;
color:#F2C888;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 982px;
margin:0 auto 0px;
padding:0px;
text-align:left;
font: normal normal 88% Verdana, sans-serif;
background-color:transparent;
border: 0px solid #bf0e0e;
-moz-border-radius:31px;
-webkit-border-radius:31px;
-goog-ms-border-radius:31px;
}
#content-wrapper {
background:transparent url(LINK DA SIDEBAR) repeat scroll center top;
}
#outerbottom-wrap1 {
background:url(http://img167.imageshack.us/img167/2618/bgpagetopel1.gif) no-repeat left top;
margin:0 0 px;
padding:0px;
}
#outerbottom-wrap2 {
background:url() no-repeat left bottom;
margin:0 0 px;
padding: 0px;
}
#main-wrapper {
margin-left: 37px;
_margin-left: 37px;
margin-right: 0px;
_margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
border-left: 0px solid #bf0e0e;
border-right: 0px solid #bf0e0e;
border-bottom: 0px solid #bf0e0e;
background: #ffffff repeat-y;
width: 642px;
float: left;
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 */
}
#mainbottom-wrap1 {
background:url() no-repeat left top;
margin:0 0 px;
padding:0px;
}
#mainbottom-wrap2 {
background:url() no-repeat left bottom;
margin:0 0 px;
padding: 0px;
}
#sidebar-wrapper {
margin-right: 23px;
_margin-right: 23px;
margin-left: 0px;
margin-top: 0px;
color: transparent;
background-color: transparent;
width: 232px;
float: right;
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 */
}
#newsidebar-wrapper {
margin-left: 0px;
_margin-left: 0px;
margin-top: 0px;
color: transparent;
background-color: transparent;
width: 208px;
float: left;
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 */
}
/* Headings
------------------------------------------------ */
h2 {
margin:1.5em 0 .75em;
font:normal bold 95% Arial, sans-serif;
line-height: 1.4em;
text-transform:capitalize;
letter-spacing:.2em;
color:#000000;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
text-align: center;
font: normal normal 0% Verdana, sans-serif;
color: transparent;
}
.post {
padding: 9px 16px 15px;
line-height: 1.4em;
border:0px dotted #000000;
}
.post h3 {
padding: 0 0 2px;
font-size: 140%;
font-weight: bold;
line-height: 1.1em;
color: #00000;
border-bottom: 2px solid #009933;
text-align:center;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration: none;
color: #000000;
}
.post h3 strong, .post h3 a:hover {
color:#000000;
color: #000000;
}
.post p {
margin:10 0 .75em;
line-height:1.1em;
}
.post-footer {
margin: .75em 0;
color:#000000;
padding-left: 5px;
text-transform:normal;
letter-spacing:.1em;
font: normal normal 86% 'Tahoma', Trebuchet, Trebuchet MS, Verdana, Sans-serif;
font-weight: normal;
line-height: 1.1em;
border:3px solid #009933;
text-align:center;
}
.comment-link {
margin-left:.6em;
color: #000000;
}
.post img {
padding:4px;
}
.post blockquote {
margin: 12px 20px 12px 20px;
padding: 0px 0px 0px 10px;
color: #000000;
font: Arial Italic
line-height: 1.6em;
color: #000000;
border: 2px solid #009933;
background: #1fab1f;
}
.post blockquote p {
}
/* Comments
----------------------------------------------- */
#comments h4 {
padding-left: 10px;
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #000000;
}
#comments li {
padding-top: 0;
padding-right: 0;
padding-bottom: 1px;
padding-left: 17px;
background: url() no-repeat left 3px;
}
#comments-block {
padding-left: 5px;
margin:1em 0 1.5em;
line-height:1.3em;
}
#comments-block .comment-author {
padding-left: 5px;
margin:.5em 0;
}
#comments-block .comment-body {
padding-left: 5px;
margin:.25em 0 0;
}
#comments-block .comment-footer {
padding-left: 5px;
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
padding-left: 5px;
margin:0 0 .75em;
}
.deleted-comment {
padding-left: 5px;
font-style:italic;
color:gray;
}
#feed-links {
padding-left: 5px;
clear: both;
line-height: 2.5em;
text-indent:-9999em;
}
#blog-pager-newer-link {
padding: 5px;
float: left;
}
#blog-pager-older-link {
padding: 5px;
float: right;
}
#blog-pager {
text-align: center;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: #000000;
background: transparent;
line-height: 1.6em;
margin:0px;
}
.sidebar h2 {
text-align: center;
color: #ffffff;
height: 40px;
margin:0px;
padding-top: 1px;
font-weight: bold;
line-height: 3em;
background:url(LINK DO TITULO DE GADGET) no-repeat left top;
}
.sidebar ul {
list-style:none;
margin:0px;
padding:0 0 0;
color:#2f96b9
backround:#2f96b9
border-bottom : 1px solid #f2f2f2;
}
.sidebar li {
margin:0px;
padding:0 0 .50em 20px;
text-indent:1px;
line-height:1.5em;
border-bottom : 2px solid #009933;
background:transparent url(http://img227.imageshack.us/i/setinha.png/) no-repeat;}
}
.sidebar .widget {
margin: 0px 0 0;
padding: 9px 16px 15px;
color: #bf0e0e;
border:1px solid #2f96b9;
}
.main .widget {
margin: 0px;
padding:0 0 0.9em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: center;
margin: 5px;
padding: 4px;
border: 1px solid #009933;
}
.profile-data {
margin:5px;
text-transform:uppercase;
letter-spacing:.1em;
font: normal normal 86% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: #000000;
font-weight: bold;
line-height: 1.2em;
}
.profile-datablock {
margin:5px;
}
.profile-textblock {
margin: 5px;
line-height: 1.6em;
}
.profile-link {
margin: 5px;
font: normal normal 86% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
------------------------------------------------ */
#footer {
width:982px;
height:150px;
clear:both;
background:transparent url(LINK DO RODAPE) no-repeat scroll left top;
margin-top: 0px;
padding-top:0px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
border-top: 0px solid #bf0e0e;
}
/* Credit
------------------------------------------------ */
#credit {
width:900px;
margin:0 auto;
text-align: center;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
#navbar-iframe { height: 0px; visibility: hidden; display: none; }
.feed-links {
clear: both;
line-height: 2.5em;
text-indent:-9999em;
}
]]></b:skin>
<script src='http://code.jquery.com/jquery-1.4.4.min.js' type='text/javascript'/>
<link href='http://hosthcp2.webs.com/jqueryhover.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "medium");
},
function() {
$(this).stop().animate({"opacity": "1"}, "medium");
});
});
</script>
<link href='' rel='shortcut icon' type='image/png'/>
<script>
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false';
}
}
document.onmousedown=click
document.oncontextmenu = new Function("return false;")
</script>
<script>
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false';
}
}
document.onmousedown=click
document.oncontextmenu = new Function("return false;")
</script>
<script language='JavaScript'>
//Blocker1
function clique() {if (event.button==2||event.button==3) {oncontextmenu='return false';}}
document.onmousedown=clique
document.oncontextmenu = new Function("return false;")
</script>
</head>
<body oncontextmenu='return false'>
<div id='outer-wrapper'><div id='wrap2'>
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
HTML DO CABEÇALHO MAPEADO
<b:section id='header'>
<b:widget id='Header1' locked='true' title='MUNDO DO PENGUIN (Cabeçalho)' type='Header'/>
</b:section>
</div>
<b:section class='header-center' id='header-center' maxwidgets='1' showaddelement='yes'/>
<div id='content-wrapper'>
<div id='page-footer'/>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Stats1' locked='false' title='Total de visualizações de página' type='Stats'/>
<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>
<div class='clear'> </div>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Feed1' locked='false' title='Blog and web' type='Feed'/>
</b:section>
</div>
<div align='center' class='credit'>
</div>
</div></div>
<script type='text/javascript'>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker("UA-7250311-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

Agora baixa essas imagens são componentes do template(cabeçalho,sidebar,rodapé, e titulo) editem apenas as cores e margens, as paginas se Você quiser colocar mais no menu, titulo do blog e coloquem imagens de penguins no cabeçalho ao lado do titulo, etc

Aqui estão as imagens para vocês fazerem download

Cabeçalho edite do jeito que vocês quiserem se voces quiserem fazer o titulo com a letra do cp baixe a letra bumbastika clicando aqui e cole na pasta fonts

Depois de editar voces vao mapear a imagem se nao souberem
clique aqui

Sidebar Mudem apenas as cores

Titulo de gadget Edite as cores

Rodape edite os nomes e a imagem e a cor

Fundo

AGORA VAMOS EDITAR O HTML

Depois de editar as imagens hospedem elas no site http://tinypic.com/ Menos o cabeçalho pois ele ta mapeado

Depois de hospedar as imagens copie os links das imagens que esta dentro da caixa direct link e vamos alterar o template

Voces irao colocar os links no lugar dessas seguintes palavras dentro dos *( ) OBS: coloque os links dentro dos *( ) o unico que nao tem parenteses e do cabeçalho mapeado

Aperte crtl-F e pesquise as seguintes palavras obs: quando acharem essas palavras troquem elas pelolink da imagem deixando o ( )

LINK DO FUNDO DO BLOG aki vc irar colocar o link da imagem do fundo

LINK DA SIDEBAR aki vc irar colocar o link da imagem da sidebar

LINK DO TITULO DE GADGET

LINK DO RODAPE

HTML DO CABEÇALHO MAPEADO (essas palavras sao sem parenteses porque nao precisam)

Nesse lugar voce irar colocar o codigo HTML do cabeçalho mapeado

Se vc fez tudo ao conforme do tutorial o seu html ta pronto e certo para que seja colocado no blog

Agora vou ensinar a colocar o layout no blog e an seguinte forma

Vc irar no painel principal do blog e irar em modelo quando abrir a pagina de modelo vc a aperta EDITAR HTML

Quando vc apertar irar aparece a seguinte pagina e aperte prosseguir

e irar abrir essa seguinte pagina

Nessa pagina vc irar trocar os HTMLs vc irar copiar o html do layout (template) que vc fez e irar substituir pelo akele la em cima dpis de trocar os htmls aperte salvar modelo se aperecer uma pagina amarela aperte cancelar, essa pagina irar dizer que seu html nao tem os seguintes widgets entao ignore e dpis que vc salvo olhe seu blog ele estara com um visual diferente se vc encontrar erros vc irar que descobrir como retirar esses erros

Electricshade