Style Creat Templates,Renders, Programas i muito mais

domingo, 20 de março de 2011

Curso Tags Blogger ( Introduçao)

Curso Tags do Blogger Introdução Parte 2 Conforme Havia Prometido. Comentem !!!

O Header do Blogger é um dos widgets que tem código mais extenso. Entretanto, boa parte desse monte de caracteres trata-se de comentários e condicionais. Veremos pedaço por pedaço dos códigos do Header e você perceberá que não é nenhum bicho-de-sete-cabeças.

Aqui no Segundo Artigo sobre as tags do Blogger, vamos aproveitar o código do Header para aprender um pouco sobre as tags de dados e as expressões. Também começaremos a aprender sobre os includes e includables.

O início do widget do Header é semelhante aos outros widgets. Se você leu a primeira parte da série Tags do Blogger, vai encontrar as tags que mencionamos:

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nome do Blog (Cabeçalho)' type='Header'>

Includes

Os includes do Blogger, suas tags e atributos estão explicados em uma das páginas de Ajuda do Blogger. Para não repetir informaçoes, vou apenas acrescentar o que não está explicado lá.

Todo o conteúdo dos widgets do Blogger fica dentro da tag b:includable. Essa tag deve ser aberta como no exemplo:

1	`<b:includable` `id='main'>`

e depois de colocado todo o conteúdo deve ser fechada com:

1	`b:includable>`

Agora a coisa fica um pouquinho mais complicada - os includables servem para separar os trechos de código dentro do widget. Sempre deve haver um includable com uma id='main'. Em alguns widgets temos mais de um includable e include, que explicam ao browser o que e como determinado HTML deve ser interpretado. Os includables não aparecem no código fonte da maneira como estão escritos no HTML do template. Vamos ver no exemplo do Header, para que você entenda melhor.

No Header temos 3 includables. O primeiro tem a id='main' e explica ao browser o que fazer quando há imagem de fundo ou não; se o título fica sobre a imagem, ou se a imagem substitui o texto do título, etc.

Vejamos linha a linha esse trecho do código:

Uma condicional: "se for usada uma imagem" (Atenção para a tag data conforme descrito na página de Ajuda do Blogger.)

Outra condicional: "Se a condição 'substituir imagem' for igual a 'SUBSTITUA'"

Comentário: Mostre apenas a imagem, sem o texto.

Um pouco de HTML: Os comentários em HTML devem ser sempre escritos entre os sinais, conforme acima: - Eles servem para o desenvolvedor colocar frases (para si ou para o usuário) que explicam o que o código está fazendo.

Abrimos uma div "header-inner"

Um link para a home-page do blog através de uma expressão.

Vamos dar uma paradinha agora para explicar esses links com expressões.

Primeiro, releia com atenção a explicação sobre a tag data: na página de Ajuda do Blogger, pois ela é muito importante. Em outra página da Ajuda do Blogger, você encontra a lista de todas as tags de dados (data tags) que podem ser usadas com a tag data:.

Quando você precisa construir um link para uma página que você não conhece o endereço, mas existe uma tag de dados, você usa a expr:href='.

Um exemplo: a expr:href='data:label.url' faz um link para uma página de marcadores.

É importante você ficar atento que algumas tags de dados funcionam apenas dentro dos widgets para as quais elas trabalham. A tag data:description, por exemplo, só pode ser usada dentro do widget do Header. Já a tag data:blog.homepageUrl pode ser usada em vários locais do código inteiro do template.

Se vocês acharem que está complicado, me avisem, que assim faço um capítulo especial para as tags de dados.

Continuemos, então com o código de nosso Header:

1	`<img` `expr:alt='data:title'` `expr:height='data:height'` `expr:id='data:widget.instanceId + "_headerimg"'` `expr:src='data:sourceUrl'` `expr:width='data:width'` `style='display: block'/>`

Esse é o código da imagem que é carregada e que ficará no background do Header. É a continuação daquele link que vimos acima e ao clicar na imagem, o leitor é direcionado para a home page do blog. Apesar de ser um código longo, não tem mistérios:

- os atributos (alt, height, , src) usam expressões e tags de dados;

Mais uma paradinha aqui para complementar a explicação sobre expressões. Algumas expressões precisam de tags de dados MAIS algum outro valor. Neste exemplo é o caso da id da imagem: expr:id='data:widget.instanceId + "_headerimg"'

Tag de dados de id de widget (data:widget.instanceId) MAIS o nome da id (_headerimg).

As expressões que usam esse MAIS devem ser sempre escritas dessa forma:

expr (dois pontos) atributo (aspas simples) (sinal de igual) tag de dado e seu valor (sinal de mais) (aspas duplas) valor (aspas duplas) (aspas simples)

Outro exemplo para você entender melhor: um link que leva à página de feed de um blog, construído com uma expressão.

Se for para o feed do BCreate, o link normal seria assim:

Se não sabemos o nome do blog, usamos a expressão e a tag de dados e construímos o código assim:

Continuando:

a>
      div>
    <b:else/>
      

Fechamos o link, fechamos a div header inner e temos um SENÃO para aquela condicional "Se a condição 'substituir imagem' for igual a 'SUBSTITUA'".

Depois temos um comentário longo que em resumo significa que a imagem será mostrada como background ao texto (título do blog) e que a largura da imagem poderá ser modificada (reduzida) caso você faça essa opção ao fazer o upload da imagem.

O código que vem em seguida fornece instruções sobre como mostrar a imagem como background do título do blog (obedecendo a condicional).
"Não temas porque eu estou contigo" Isaías 43.5-7
Comentem !!! xD

sexta-feira, 18 de março de 2011

Tutorial - Efeito ShadowBox

Descrição: Header em PSD muito Boa. Eu que sou novo postador fazendo a minha primeira header, se liguem na Fox Create onde eu postarei, Templates Editaveis, Tutoriais e muitas outras coisas !

Nossa Avaliação Do Conteúdo:

1ª Vá em Layout > Editar Html e procure por:

2ª Colque isso \/ exatamente em cima disso /\





-- Aplicando o Efeitos nas Imagens --



Efeito com Imagem:

<a href="URL DA IMAGEM" rel="shadowbox"><br /><img src="URL DA IMAGEM" width="200" height="200" /></a>

Efeito Com Texto:
<a href="URL DA IMAGEM" rel="shadowbox"><br />TEXTO AQUI</a>



Efeito Galeria:
  <a title="SEU-TITULO-AQUI" href="URL-DA-IMAGEM1" rel="shadowbox[galeria]"><img style=" title=" border="0" alt="" src="URL DA IMAGEM1" width="150" height="150" /></a><br /><a title="SEU-TITULO-AQUI" href="URL-DA-IMAGEM2" rel="shadowbox[galeria]"><img style=" title=" border="0" alt="" src="URL DA IMAGEM2" width="150" height="150" /></a>

Caso queira mais imagens com esse efeito

Efeito com Video:

<a title="TITULO-AQUI" href="LINK-DO-VIDEO-AQUI" rel="shadowbox;width=480;height=385"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="SEU-TITULO-AQUI" border="0" alt="" src="URL-DA-IMAGEM-MINIATURA-DO-VIDEO" width="150" height="150" /></a>

Inserir Menu a:Hover no Blogger

http://img838.imageshack.us/img838/2760/menuos.jpg

Tutorial muito bom nunca antes postado na net, como criar um menu igual do blog TudoFull.com para blogger, não estou fazendo este tutorial com a intenção de plagio, mais sim com a intenção de informar e ensinar, esse tutorial é moleza de fazer !!!

1° Adicione o código abaixo acima da tag ]]><*/b:skin> sem o *
Ver código N°1
Feito isto vizualize e se não tiver nenhum erro salve.

2° Adicione o seguinte código abaixo da tag <*body> sem o *

Ver código N°2

OBS: Cole o código 2 abaixo da div header que geralmente é assim <*div class='header'> ou no lugar do header estará 'topo' sem o *

Pronto !!!
Duvidas? Comente !!!

Páginas Númeradas no Blogger

Descrição: Tutorial muito proucurado na ne, usei este código no meu trabalho mais recente Lider Jogos

Nossa Avaliação Do Conteúdo:

Adicione o código abaixo acime de ]]></b:skin>

/* Navegaçao
----------------------------------------------- */
.showpage a{
text-decoration:none;
color:#fff;
font:bold 14px Arial, Helvetica, Verdana;
border:2px solid #09F;
background-color:#09F;
margin:2px;
padding:4px 5px
}
.showpage a:hover{padding:6px 8px 6px 8px;
color:#fff;
font:bold 14px Arial, Helvetica, Verdana;
border:2px solid #09F;
background-color:#000;
margin:2px;
padding:4px 5px
}
.showpageNum a {
text-decoration:none;
color:#fff;
font:bold 14px Arial, Helvetica, Verdana;
border:2px solid #09F;
background-color:#09F;
margin:2px;
padding:4px 5px
}
.showpageNum a:hover {
color:#fff;
font:bold 14px Arial, Helvetica, Verdana;
border:2px solid #09F;
background-color:#000;
margin:2px;
padding:4px 5px
}
.showpageNum a:active {
color:#fff;
font:bold 14px Arial, Helvetica, Verdana;
border:2px solid #09F;
background-color:#000;
margin:2px;
padding:4px 5px
}
.showpageOf {
color:#009000;
font:bold 14px Arial, Helvetica, Verdana;
border:2px solid #09F;
margin:2px;
padding:4px 5px
}
.showpagePoint {
color:#fff;
font:bold 14px Arial, Helvetica, Verdana;
border:2px solid #09F;
background-color:#000;
margin:2px;
padding:4px 5px
}

#blog-pager{
font:normal 12px Arial, Helvetica, Verdana;
margin:10px 0px 0px 0px;
padding:25px 0px 0px 0px;
background:url() no-repeat;
width:520px;
height:40px;
text-align:center;
}
#blog-pager a {
color: #fff;
}
#blog-pager {text-align: center;
}

Apos isso adicione o código abaixo acime de </body>

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Anterior';
var downPageWord ='Próximo';
</script>
<script src='http://www.igorarquivos.xpg.com.br/pagenavi.js' type='text/javascript'/>
</b:if>